Inline Google Maps using Visualforce

Sometime ago we’ve seen how to integrate Google Maps in a Salesforce.com page to pinpoint a specific address on the map, more precisely, how to add an inline map to pinpoint an Account Billing Address. I revisited the script I wrote more than a year ago and produced it as a Visualforce page, here’s the result.

The finished product

Here’s a screenshot of what we are going to get:

Inline Google Maps using Visualforce

Improvements

  • I’m now using Google Maps API v3, which makes the map faster to load and doesn’t require an API key anymore.
  • I removed the search term {!Account.BillingState}, so the script should now correctly map any address, not only US ones.
  • It degrades nicely if the Account Billing Address isn’t found, as shown below:

Setup

Follow the 3 steps below:

  1. In Salesforce.com, navigate to Setup > Customize > Develop > Pages and create a new Visualforce Page with the following code:

    <apex:page standardController="Account">
    
    <head>
    
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script type="text/javascript"> 
    
    $(document).ready(function() {
    
      var myOptions = {
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
      }
    
      var map;
      var marker;
    
      var geocoder = new google.maps.Geocoder();
      var address = "{!Account.BillingStreet}, " + "{!Account.BillingCity}, " + "{!Account.BillingPostalCode}, " + "{!Account.BillingCountry}";
    
      var infowindow = new google.maps.InfoWindow({
        content: "<b>{!Account.Name}</b><br>{!Account.BillingStreet}<br>{!Account.BillingCity}, {!Account.BillingPostalCode}<br>{!Account.BillingCountry}"
      });
    
      geocoder.geocode( { address: address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK && results.length) {
          if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
    
            //create map
            map = new google.maps.Map(document.getElementById("map"), myOptions);
    
            //center map
            map.setCenter(results[0].geometry.location);
    
            //create marker
            marker = new google.maps.Marker({
                position: results[0].geometry.location,
                map: map,
                title: "{!Account.Name}"
            });
    
            //add listeners
            google.maps.event.addListener(marker, 'click', function() {
              infowindow.open(map,marker);
            });
            google.maps.event.addListener(infowindow, 'closeclick', function() {
              map.setCenter(marker.getPosition()); 
            });
    
          }
    
        } else {
          $('#map').css({'height' : '15px'});
          $('#map').html("Oops! {!Account.Name}'s billing address could not be found, please make sure the address is correct.");
          resizeIframe();
        }
      });
    
      function resizeIframe() {
        var me = window.name;
        if (me) {
          var iframes = parent.document.getElementsByName(me);
          if (iframes && iframes.length == 1) {
            height = document.body.offsetHeight;
            iframes[0].style.height = height + "px";
          }
        }
      }
    
    });
    </script>
    
    <style>
    #map {
      font-family: Arial;
      font-size:12px;
      line-height:normal !important;
      height:250px;
      background:transparent;
    }
    </style>
    
    </head>
    
    <body>
    <div id="map"></div> 
    </body> 
    </apex:page>
    
  2. Add the Visualforce page on the Account page layout (in a single-column section) and set it’s height to be 250px.

  3. All done! :) Navigate to one of your Account records and verify the map is displaying correctly!

Let me know if you have any questions/comments!

This was posted 4 years ago. It has 0 notes and 0 comments.