+ Start a Discussion
Dan KiddDan Kidd 

Google maps integration


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,
<apex:page standardController="Account">
<apex:pageBlock >
<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
        //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() {
        google.maps.event.addListener(infowindow, 'closeclick', function() {
    } else {
      $('#map').css({'height' : '15px'});
      $('#map').html("Oops! {!Account.Name}'s address could not be found, please make sure the address is correct.");
  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";
#map {
  font-family: Arial;
  line-height:normal !important;
<div id="map"></div> 

Best Answer chosen by Dan Kidd

All Answers

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