Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Dan KiddDan Kidd 

Google maps integration

Hi,

Please can you help me :( I'm trying to implement a VF page that displays (via a section on an Account page) a Google Maps view of where a customer is based based on their shipping address. I have the below page written up but it's just not working - I'm simply getting a grey box where the map should be.
(NB: API key has been redacted, but there is a valid key in there)

I've tried several methods of troubleshooting this but getting no joy, appreciate your help.

Thanks in advance,
Dan
  
<apex:page standardController="Account">
<apex:pageBlock >
<head>
 
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=[REDACTED-API-KEY]&sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?key=[REDACTED-API-KEY]"></script>
<script type="text/javascript"> 
 
$(document).ready(function() {
  
  var myOptions = {
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.roadmap,
    mapTypeControl: false
  }
  
  var map;
  var marker;
  
  var geocoder = new google.maps.Geocoder();
  var address = "{!Account.ShippingStreet}, " + "{!Account.ShippingCity}, " + "{!Account.ShippingPostalcode}";
  
  var infowindow = new google.maps.InfoWindow({
    content: "<b>{!Account.Name}</b>"
  });
 
  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 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:500px;
  background:transparent;
}
</style>
 
</head>
 
<body>
<div id="map"></div> 
</body> 
</apex:pageBlock>
</apex:page>

 
Best Answer chosen by Dan Kidd
Neetu_BansalNeetu_Bansal
Hello Dan,

Below are some of the links that will help you to achieve this:
http://forceguru.blogspot.in/2012/01/integrating-google-maps-in-salesforce.html
https://eshopsync.com/integrate-google-map-api-salesforce-2/
https://success.salesforce.com/answers?id=90630000000guBkAAI

If it helps, please mark this as best answer.

Thanks,
Neetu

All Answers

Neetu_BansalNeetu_Bansal
Hello Dan,

Below are some of the links that will help you to achieve this:
http://forceguru.blogspot.in/2012/01/integrating-google-maps-in-salesforce.html
https://eshopsync.com/integrate-google-map-api-salesforce-2/
https://success.salesforce.com/answers?id=90630000000guBkAAI

If it helps, please mark this as best answer.

Thanks,
Neetu
This was selected as the best answer
Dan KiddDan Kidd
Second link above worked, thanks!
Avadhut More 07Avadhut More 07
I was able to create Google Map using VisualForce page and it looks exactly what all customer's want.
We do not require Google API is.
Let me know if anyone wants to implement the solution.
Email: sfdc.avadhut@gmail.com

Thanks,
Avadhut