Maps with Visualforce using Native Apex Tags

Maps with Visualforce , Salesforce

Map In VisualForce- Salesforce

We all are aware of displaying map in Visualforce Using Google Map API's. This post will help you create maps and insert markers on the map using native apex tags (Which in turn uses google API's).

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, panning, and markers based on your Salesforce or other data

Visualforce mapping components aren’t available in Developer Edition organizations.Try the below code in Sandbox or production Environment.

Creating Basic Map
Use the below code to Create a simple map with the center as the location value provided.
<apex:page >
<h1>World OF Salesforce</h1>


<apex:map width="600px" height="400px" mapType="roadmap" zoomLevel="16"
center="Cyber City, Gurgaon ,haryana ,India">
</apex:map>
</apex:page>

This will not create any markers as we have not defined it. The below snapshot is the out of the code.

Basic Map Visualforce

Adding Markers to the map

To insert markers use <apex:mapMarker> tag as a child element of <apex:map>. You can mention title and the position of the marker as an attribute. Maximum of 100 markers can be inserted on a map.

Copy and paste the below code to create the markers of contact associated to a Account.

<apex:page standardController="Account">



<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>