The <apex: map> is another important component that shows a map(JavaScript-based map) with panning, zooming, and based on our Salesforce data or other data.
The <apex: map> component has the following attributes:
1. center
The center attribute is an Object-type attribute used for specifying the location of the map center. If the <apex: map> component doesn't have any child <apex: mapMarker> component, we need to use the center attribute. By default, the map is centered on displaying all the markers.
Syntax:
<apex:map center="{latitude: 37.794, longitude: -122.395}"></apex:map>
2. height
The height is a string-type attribute used for specifying the map's height. We can define its values either in percentages or pixels.
Syntax:
<apex:map height="300px"></apex:map>
3. width
The width is a string-type attribute used for specifying the map's width. We can define its values either in percentages or pixels.
Syntax:
<apex:map width="300px"></apex:map>
4. id
The id is a string-type attribute, i.e., a unique identifier that allows this component to be referenced by other components on the page.
Syntax:
<apex:map id="mapId"></apex:map>
5. mapType
The mapType is a string-type attribute that is used for specifying the type of the map. A map can be one of the following types:
satellite
hybrid
roadmap
Syntax:
AD
<apex:map mapType="hybrid"></apex:map>
6. rendered
The rendered is a Boolean-type attribute that specifies whether this component is rendered on the page. The boolean value true is set as a default value for this attribute.
Syntax:
<apex:map rendered="false"></apex:map>
7. scrollBasedZooming
The scrollBasedZooming is a Boolean-type attribute used to specify whether this component can be zoomed via the scroll wheel. Boolean-value true is set as a default value for this attribute.
AD
Syntax:
<apex:map scrollBasedZooming="false"></apex:map>
8. showOnlyActiveInfoWindow
The showOnlyActiveInfoWindow is a Boolean-type attribute used to specify whether this component allows us to display multiple info windows at the same time. Boolean-value true is set as a default value for this attribute.
Syntax:
<apex:map showOnlyActiveInfoWindow="false"></apex:map>
9. zoomLevel
The zoomLevel is an Integer- type attribute used to specify the initial map zoom level. The possible value for this attribute is from 0 to 18.
Syntax:
<apex:map zoomLevel="6"></apex:map>
Note: Visualforce mapping components are not currently available in the Developer Edition organization.
Let's take an example to understand how we can use this component on the Visualforce page:
ApexMapExample.vfp
<!-- apex page with Account standard controller-->
<apex:page standardController="Contact">
<apex:pageBlock>
<apex:pageBlockSection title="{! Contact.Name } Location">
<!-- Displaying Mailing Address Information -->
<apex:outputPanel >
<apex:outputField value="{!Contact.MailingStreet}"/><br/>
<apex:outputField value="{!Contact.MailingCity}"/>,
<apex:outputField value="{!Contact.MailingState}"/>
<apex:outputField value="{!Contact.MailingPostalCode}"/><br/>
<apex:outputField value="{!Contact.MailingCountry}"/>
</apex:outputPanel>
<!-- Display the mailing address on a map -->
<apex:map mapType="roadmap" width="400px" height="400px" zoomLevel="15"
center="{!Contact.MailingStreet},{!Contact.MailingCity},{!Contact.MailingState}">
</apex: map>
</apex:pageBlockSection>
</apex:pageBlock>
</apex: page>
