Use Visualforce Map Components to Show Location Data More Clearly

Visualforce mapping components make it simple to create maps that use third-party mapping services. Visualforce maps are interactive, JavaScript-based maps complete with zooming, scrolling, and markers based on your Salesforce or other data. Create stand-alone map pages, maps that you can insert into page layouts, and even mobile maps for Salesforce1.

Create Visualforce maps with a set of related mapping components. <apex:map> defines a map canvas, including map size, type, center point, and initial zoom level. <apex:mapMarker> child components define markers to place on the map, by address or geolocation (latitude and longitude).

Maps that you define generate JavaScript code to render onto the page. This JavaScript connects to a mapping service and builds the map by fetching map tiles, placing markers, and even geocoding addresses if you don’t have a latitude and longitude. After the map renders, your users can interact with the map by panning and zooming, just like they’re used to with other popular map sites. The effect is if you wrote your own custom JavaScript to interact with a third-party mapping service, but without needing to actually write that JavaScript. You define the map in Visualforce and get the mapping JavaScript for free.

Note

Note

Visualforce mapping components aren’t currently available in Developer Edition organizations.

Example of Using Visualforce Map Components

Here’s a page that shows a list of contacts for an account, centered on the account’s address.
<apex:page standardController="Account">

  <!-- This page must be accessed with an Account Id in the URL. For example: 
       https://<salesforceInstance>/apex/NearbyContacts?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}">

    <apex:repeat value="{! Account.Contacts }" var="contact">
    <apex:mapMarker title="{! contact.Name }"
       position="{!contact.MailingStreet},{!contact.MailingCity},{!contact.MailingState}"
    />
    </apex:repeat>

  </apex:map>

    </apex:pageBlockSection>
  </apex:pageBlock>

</apex:page>
The preceding code produces the following map.
A map with markers

For details of how to use the new mapping components, including additional code samples, see “Creating Maps with Visualforce” in the Visualforce Developer’s Guide.