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>
