+ 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!