Integrating Google Map Using New Spring 15 Visualforce Components

Most of us already know about the Google Map integration in Salesforce. For integrating Google Map in previous Salesforce releases, we used JavaScript calls, some resource files, and etc, but Spring’15 release has simplified the Google Map integration. Salesforce has introduced two new Visualforce tags. Using these two tags, we can easily and clearly display the geographic locations.

<apex:map>- Displays an interactive map with zooming, scrolling, and markers.

<apex:mapMarker>- Defines a marker to be displayed at a location.

Steps to Enable Map Feature:

Before using this new feature, we need to enable it in Salesforce organization, Go to App Setup in the Side Bar à Customize à Maps and Location à Setting à Edit à Check Enable Maps and Location Services.

<apex:map>

1. <apex:map> defines the map Canvas. With the help of this tag, we can set the map size, type, and center point, based on the salesforce data or other data.
2. We can display up to 100 markers in your visualforce page. We need to add the child component named<apex:mapMarker> tag.

Attributes of <apex:map>

1. Center – This attribute defines the location of the map center. This attribute is mandatory, if the <apex:map> tag does not have any child <apex:mapMarker> tags.
2. Height –This attribute defines the height of the map. You can specify map length in percentage or number of pixels, and the value is passed through the generated HTML. If you provide an invalid value, your map might not render.
3. mapType –The type of the map to display in your visualforce page. Should be one of the following.

• Hybrid
•   Road map
•   Satelite

The default mapType is roadmap.

4. rendered – ABoolean value that specifies whether the component is rendered on the page. The default value is True.
5. width –You can specify the  width  of the  map. You can specify map length in percentage or number of pixels. If you provide an invalid value, your map might not render.
6. zoomLevel –The initial map zoom level, defined as an integer from 0 to 18. Higher values zoom in the map completely.

Sample source code for <apex:map> tag:

<apex:page standardController=”Account”>
<apex:pageBlock>
<apex:pageBlockSection title=”{! Account.Name } Location”>
<apex:outputPanel>
<apex:outputField value=”{!Account.BillingStreet}”/><br/>
<apex:outputField value=”{!Account.BillingCity}”/>, &nbsp;
<apex:outputField value=”{!Account.BillingState}”/> &nbsp;
<apex:outputField value=”{!Account.BillingPostalCode}”/><br/>
<apex:outputField value=”{!Account.BillingCountry}”/>
</apex:outputPanel>
<apex:map width=”600px” height=”400px” mapType=”roadmap” zoomLevel=”17″ center=”{!Account.BillingStreet}, !Account.BillingCity},{!Account.BillingState}”>
</apex:map>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:page>

There is no marker for the address being mapped. <apex:map> does not display any markers on your Visualforce page. If you want marker to map your address, you need to use the <apex:mapMarker> tag in your Visualforce page.

<apex:mapMarker>

1. <apex:mapMarker> defines the markers to  map the place, by using the Address or geolocation. It is the child component of <apex:map> tag.
2. You can add up to 100 markers <apex:mapMarker> components to a single map.

Attributes of <apex:mapMarker>

1. Position –sets the specific location of the marker.

There is 10 geocoded lookups per page request is allowed.  This limit is applicable for center attribute in the <apex:map> and position attribute in the <apex:mapMarker> component.

2. rendered –ABoolean value that indicates whether the component is rendered on the page. The default value is True.
3. title -Text to be displayed,  when the user hovers the mouse over the marker.

Sample source code for <apex:mapMarker>:

<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=”500px” height=”500px” mapType=”hybrid” 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>

Another example:

<apex:page standardController=”Account”>
<apex:pageBlock>
<apex:map width=”1000px” height=”400px” mapType=”roadmap” center=”{!Account.BillingStreet},{!Account.BillingCity}, Account.BillinState}” >
<apex:repeat value=”{!Account.Contacts}” var=”contact”>
<apex:mapMarker title=”{!contact.Name}” position=”{!contact.MailingStreet},{!contact.MailingCity},{!contact.MailingState}”/>
</apex:repeat>
</apex:map>
</apex:pageBlock>
</apex:page>

Limitations:

1. Visualforce mapping components aren’t currently available in Developer Edition organizations.
2. There’s a limit of 10 geocoded address lookups per page request. It means, you can see a maximum of 10 pointers in the map.  Center and Position attribute values are counted for this limit.

Reference:

Map visualforce tags in Salesforce

Visualforce Developer Guide

Salesforce Spring’15 Release Notes