Google Maps made easy for Visualforce - Spring 15

Visualforce Jan 05, 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.

Phanindra Mangipudi

Salesforce, Lightning Web Componets, Node.Js, Angular 2+, Bootstrap