<apex: mapInfoWindow> Component in Visualforce Page

The <apex: mapInfoWindow> is another important component that is used for defining an info window for the marker displayed at a location on an <apex: map>. The body of the <apex:mapInfoWindow> component is displayed in the info window when users click or tap the marker. The body of the <apex: mapInfoWindow> can be Visualforce markup, HTML and CSS, or even plain text.

By default, only one info window displays at a time. That is, when you click another marker, the first info window disappears, and the new info window appears. To display multiple info windows at once, set showOnlyActiveInfoWindow to false on the containing <apex: map> component.

The <apex: mapInfoWindow> component has the following attributes:

1. id

The id is a string-type attribute, i.e., a unique identifier that allows this component to be referenced by other components on this page.

Syntax:

2. maxWidth

The maxWidth is an Integer-type attribute that is used for specifying the maximum width of the info window.

Syntax:

3. rendered

The rendered is a Boolean-type attribute that is used for specifying whether this component is rendered on the page or not. Boolean-value true is set as a default

Syntax:

Let's take an example to understand how we can use this component on the Visualforce page:

ApexMapInfoWindowExample.vfp

<!-- apex page with Account standard controller-->
<apex:page standardController="Account">
    
    <!-- apex pageBlock and pageBlockSection to display Account and its Contact Information -->
    <apex:pageBlock >
        <apex:pageBlockSection title="Contacts For {! Account.Name }">
            <!-- use apex dataList to represent contact information-->
            <apex:dataList value="{! Account.Contacts }" var="con">
                <apex:outputText value="{! con.Name }" />
            </apex:dataList> 
        </apex:pageBlockSection>
    </apex:pageBlock>
    <!-- use apex map to display Account Shipping address-->
    <apex:map width="500px" height="400px" mapType="roadmap" center="{!Account.ShippingStreet},{!Account.ShippingCity},{!Account.ShippingState}">
        <!-- use apex repeat for iterating Account's Contacts-->
        <apex:repeat value="{! Account.Contacts }" var="contact">
            <apex:mapMarker title="{! contact.Name }" position="{!contact.OtherStreet},{!contact.OtherCity},{!contact.OtherState}">
                <apex:mapInfoWindow>
                    <apex:outputPanel layout="block" style="font-weight: bold;">
                        <apex:outputText>{! contact.Name }</apex:outputText>
                    </apex:outputPanel>
                    <apex:outputPanel layout="block">
                        <apex:outputText>
                            {!contact.OtherStreet},{!contact.OtherCity},{!contact.OtherState}
                        </apex:outputText>
                    </apex:outputPanel>     		
                </apex:mapInfoWindow>
            </apex:mapMarker>
        </apex: repeat>
    </apex: map>
</apex: page>

Output