Google Maps made easy for Visualforce - Spring 15

Visualforce • Jan 5, 2015

This post explains how easy to embed google maps visualforce using newly added Tags <apex:map> & <apex:mapMarker> in Spring 15 Features

<apex:page standardController="Account">    
    <!-- for test run pass Account Id 
    https://xxx.salesforce.com/apex/NearbyContacts?id=001D000000JRBet -->    
    <apex:pageBlock >
        <apex:pageBlockSection title="Contacts For {!Account.Name }"> 
        
            <!-- Displays corresponding Contacts for Account -->
            <apex:dataList value="{!Account.Contacts }" var="contact">
                <apex:outputText value="{!contact.Name }" />
            </apex:dataList>  
            
            <!-- For displaying google Map -->
            <apex:map width="600px" height="400px" mapType="roadmap" center="{!Account.BillingStreet},{!Account.BillingCity},{!Account.BillingState}"> 
            
            <!-- For Displaying Markers -->
                <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>

Output

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.