function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Milan HrdlickaMilan Hrdlicka 

visualize map using google map service

Hello,
I need to visualize google map service data in Salesforce base don longtitude and latitude using google map service and given API key - from what I understand till now I need a Java script embeded in a visualforce page using api key from google.
Could anyone share any code to embed into a visualforce page (I already have the API key foem google)?
Also I would need advice on how to get longtitude and latitrude data from google map service using address details.
Your help will be much appreciated.
Many thanks,
Milan
SandhyaSandhya (Salesforce Developers) 
Hi,

Below is the sample code
 
<apex:page standardController="Account">

<head>

<script type="text/javascript" src="<a target="_blank" href="http://maps.google.com/maps/api/js?sensor=false" rel="nofollow">http://maps.google.com/maps/api/js?sensor=false</a>"></script>
<script type="text/javascript" src="<a target="_blank" href="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" rel="nofollow">http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js</a>"></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>

Please refer below link for more information on this.

https://developer.salesforce.com/forums/?id=906F000000098oxIAA
 
Hope this helps you!

Please mark it as Best Answer if my reply was helpful. It will make it available for other as the proper solution.
 
Thanks and Regards
Sandhya