+ Start a Discussion
shobana shobanashobana shobana 

Display All Accounts on Google Maps using Visualforce and Apex

Hi all ,

          I have a requirement that i need to display all Account on Google maps using Single Visualforce page to track All Account from Current Location,can any one help me out to solve this issue.....

Below code  will show the location of particular records of Acccounts but i want to show all Account location in single visualforce page
<apex:page standardController="Account">

<head>

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://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>

Thank you in advance......
pconpcon
To do this on one VisualForce page you will need to write a controller that queries all of the account and then have you javascript iterate over all the accounts.  I would recommend that you do this via a @remoteAction [1] so that your data is already in the correct format for you to iterate over inside of your javascript.  The controller should be pretty simple and your JavaScript would simply loop over each account and place the information.  You may also want to read up on using the geolation functionatlity of SOQL/Apex [2] [3] so you do not have to call the google geocode method.

[1] https://www.salesforce.com/us/developer/docs/apexcode/Content/apex_classes_annotation_RemoteAction.htm
[2] http://www.salesforce.com/docs/developer/pages/Content/pages_js_remoting.htm
[3] http://www.salesforce.com/us/developer/docs/soql_sosl/Content/sforce_api_calls_soql_geolocate.htm
[4] https://developer.salesforce.com/blogs/developer-relations/2012/10/winter-13-using-apex-and-soql-with-geolocation.html
sfdc_prabusfdc_prabu
I have the same requirement help me on this
ketki kulkarni 33ketki kulkarni 33

I have completed same requirement using Google maps API v3. Also I have used javascript remoting here to fetch all account records on page and displayed addresses on basis of longitude and lattitude values.

Here is link for google map API v3 documentaion -
https://developers.google.com/maps/documentation/javascript/

Justin EpistolaJustin Epistola
hi ketki kulkarni 33, 

Can you post the finished code? 

Thank you!
Jason Orbison 6Jason Orbison 6
I have some custom code that I created this working for my company. you are free to take a look. No more geocoding necessary because salesfroce does this automatically for free. A really cool thing. 

https://jorbison.wixsite.com/mysite/single-post/2017/02/22/VisualForce-Map-Accounts

p.s. I just launched this site today so please be gentle as I plan on adding more items.