Visualforce

Maps with Visualforce using Native Apex Tags

Maps with Visualforce , Salesforce

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>
  
    <!-- Display the address on a map -->
    <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
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">

  <!-- This page must be accessed with an Account Id in the URL. For example: 
       https://<salesforceInstance>/apex/NearbyContacts?id=001D000000JRBet -->
  
  <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>

Map with marker
Map with Marker

Next post will be based on creating custom Markers on the Map

Feel free to comment

About Saurabh Dua

0 comments:

Post a Comment

Powered by Blogger.