Syntax Highlighter JS

Thursday, March 7, 2013

Salesforce Google Maps (V3) mash-up

Since I posted my example of a Google maps mash-up on Salesforce, Google has changed the way version 3 of the maps API works.  Unfortunately, these changes broke the previous example.

I have created a new example and here is what the page looks like now:

<apex:page sidebar="false" showHeader="false" cache="false" controller="GoogleMap_Accounts_Controller"> <style> html, body, #map_canvas { margin: 0; padding: 0; height: 100%; } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script> var map; function initialize() { // set the map options in the format that V3 of googlemaps expects var mapOptions = { zoom: 4, center: new google.maps.LatLng(32.5206608,-86.80249), mapTypeId: google.maps.MapTypeId.ROADMAP }; // attach our map to the map_canvas div map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions); // Pull the data in from the SOQL and use visualforce to create the javascript calls <apex:repeat value="{!AccountsList}" var="Account"> showAddress("{!JSENCODE(Account.Name)}", "{!JSENCODE(Account.Name)} <a href='../{!Account.id}' target='_blank'>Details</a>", "{!Account.BillingLat__c}", "{!Account.BillingLong__c}"); </apex:repeat> } // function initialize() google.maps.event.addDomListener(window, 'load', initialize); function showAddress(title, content, Lat, Long) { // convert our raw values to the format that google expects var latlng = new google.maps.LatLng(parseFloat(Lat), parseFloat(Long)); if (latlng != null) { // create an info window var infowindow = new google.maps.InfoWindow({ content: content }); // Create a marker on the map var marker = new google.maps.Marker({ position: latlng, map: map, title: title }); // Add an event to the marker so the info window will appear when it is clicked google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); } // check for null latlng due an error parsing } // end show address </script> <div id="map_canvas" style="width: 100%; height: 100%"></div> </apex:page>
I have posted the code on Git Hub for easy downloading.  The sample page and controller can be found here.

3 comments:

  1. Great code!, it saved me a bunch of Hours ;-) thanks!

    ReplyDelete
  2. Will this work with the new Salesforce geocoding fields?

    ReplyDelete