Adding Location Markers to a Map

You can add markers to a map to represent specific locations using the <apex:mapMarker> component. You can include text that displays when a pointer hovers over the marker.

To place a marker on a map, add an <apex:mapMarker> component as a child of the associated <apex:map>. You specify the marker’s location with the position attribute. Optionally, use the title attribute to display text when the pointer hovers over the marker.

You can add up to 100 markers to a map. Use an <apex:repeat> iteration component to add multiple markers from a collection or list.

Visualforce maps can be resource-intensive which can cause memory issues within mobile browsers and the Salesforce app. Maps with many markers or large images used as custom markers can further increase memory consumption. If you plan to deploy Visualforce maps in pages that are used in mobile contexts, be sure to test those pages thoroughly.

Note

The position attribute defines the point on the map to place the marker. You can provide position values in several formats.

You can have up to 10 geocoded address lookups per map. Lookups for both the center attribute of the <apex:map> component and the position attribute of the <apex:mapMarker> component count against this limit. To display more markers, provide position values that don’t require geocoding. Locations that exceed the geocoding limit are skipped.

Note

A string that represents an address. For example, "1 Market Street, San Francisco, CA". The address is geocoded to determine its latitude and longitude.
A string that represents a JSON object with latitude and longitude attributes that specify location coordinates. For example, "{latitude: 37.794, longitude: -122.395}".
An Apex map object of type Map<String, Double>, with latitude and longitude keys to specify location coordinates.

Here’s a page that shows a list of contacts for an account, centered on the account’s address.

1<apex:page standardController="Account">
2
3  <!-- This page must be accessed with an Account Id in the URL. For example: 
4       https://MyDomainName--c.vf.force.com/apex/NearbyContacts?id=001D000000JRBet -->
5  
6  <apex:pageBlock >
7    <apex:pageBlockSection title="Contacts For {! Account.Name }">
8    
9     <apex:dataList value="{! Account.Contacts }" var="contact">
10       <apex:outputText value="{! contact.Name }" />
11     </apex:dataList> 
12    
13  <apex:map width="600px" height="400px" mapType="roadmap"
14    center="{!Account.BillingStreet},{!Account.BillingCity},{!Account.BillingState}">
15
16    <apex:repeat value="{! Account.Contacts }" var="contact">
17    <apex:mapMarker title="{! contact.Name }"
18       position="{!contact.MailingStreet},{!contact.MailingCity},{!contact.MailingState}"
19    />
20    </apex:repeat>
21
22  </apex:map>
23
24    </apex:pageBlockSection>
25  </apex:pageBlock>
26
27</apex:page>

This code produces the following map.

Notice the following in this example.

The center and position attributes are passed as a Visualforce expression that concatenates address elements to provide an address string that can be geocoded.
Because this page uses geocoding for the addresses, it displays only the first nine contacts. The center attribute of <apex:map> uses one geocoding lookup as part of the 10 allowed. (In the illustration, the account has only three contacts.)

Visualforce Developer Guide

Adding Location Markers to a Map