apex: mapMarker Component in Visualforce Page

 The <apex: mapMarker> is another important component in the Visualforce page that defines a marker to be displayed at a location on an <apex: map> component. We always use the <apex: mapMarker> component inside the <apex: map> component. We can use up to 100 <apex: mapMarker> components inside a single <apex: map> component.

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

1. icon

The "icon" is a string-type attribute used for specifying the URL of the icon that needs to be displayed for this marker.

Syntax:

<apex: mapMarker icon="iconURL"></apex: mapMarker>  

2. id

The "id" is a string-type attribute used to specify the URL of the icon that needs to be displayed for this marker.

Syntax:

<apex: mapMarker icon="iconURL"></apex: mapMarker></p>  

<p><strong>3. rendered</strong></p>  

<p>The <strong>"rendered"</strong> is a Boolean-type attribute used to specify whether this component is rendered on this page.</p>  

<p><strong>Syntax:</strong></p>  

<div class="codeblock"><textarea name="code" class="xml">  

<apex: mapMarker rendered="false"></apex: mapMarker>  

4. title

The "title" is a string-type attribute used to specify the text that needs to be displayed when the user moves the cursor over the marker.

Syntax:

<apex: mapMarker title="Marker Title"></apex: mapMarker>  

5. position

The "position" is an Object-type attribute used to specify the marker's location. We can use one of the following ways to specify the position:

1. A string represents a JSON object with latitude and longitude attributes that specify location coordinates.

Syntax:

<apex: mapMarker position=" 1 Market Street, San Francisco, CA"></apex: mapMarker>  

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

ApexMapMarkerExample.vfp

AD

<!-- 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>