<apex:mapMarker title="{! Account.Name }" position="{!Account.BillingStreet},{!Account.BillingCity},{!Account.BillingState}" icon="{! URLFOR($Resource.MapMarkers, 'moderntower.png') }" />
Use a common graphics format, such as PNG, GIF, or JPEG. The preferred marker size is 32 × 32 pixels. Other sizes are scaled, which doesn’t always produce ideal results.
<apex:page standardController="Account"> <!-- This page must be accessed with an Account Id in the URL. For example: https://<salesforceInstance>/apex/AccountContacts?id=001D000000JRBet --> <apex:pageBlock > <apex:pageBlockSection title="Contacts For {! Account.Name }"> <apex:dataList value="{! Account.Contacts }" var="contact"> <apex:outputText value="{! contact.Name }" /> </apex:dataList> <apex:map width="600px" height="400px" mapType="roadmap" center="{!Account.BillingStreet},{!Account.BillingCity},{!Account.BillingState}"> <!-- Add a CUSTOM map marker for the account itself --> <apex:mapMarker title="{! Account.Name }" position="{!Account.BillingStreet},{!Account.BillingCity},{!Account.BillingState}" icon="{! URLFOR($Resource.MapMarkers, 'moderntower.png') }"/> <!-- Add STANDARD markers for the account's contacts --> <apex:repeat value="{! Account.Contacts }" var="ct"> <apex:mapMarker title="{! ct.Name }" position="{! ct.MailingStreet },{! ct.MailingCity },{! ct.MailingState }"> </apex:mapMarker> </apex:repeat> </apex:map> </apex:pageBlockSection> </apex:pageBlock> </apex:page>
To use different icons for markers added inside an iteration like <apex:repeat>, use an expression related to the iteration variable to define the URL. One simple way is to use icons named for a lookup field on a record. Another approach is to provide the icon name in a custom formula field.
<!-- Add CUSTOM markers for the account's contacts --> <apex:repeat value="{! Account.Contacts }" var="ct"> <apex:mapMarker title="{! ct.Name }" position="{! ct.MailingStreet },{! ct.MailingCity },{! ct.MailingState }" icon="{! URLFOR($Resource.MapMarkers, ct.ContactType__c + '.png') }"> </apex:mapMarker> </apex:repeat>