2

Hi i used this code but google map not showing in visualforce page in account record please any one help on this

<apex:page standardController="Account">

<head>

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

1 Answer 1

7

Summer 16 released a new feature to the force.com platform of automatic adding GeoCodes for addresses on existing and new accounts, contacts, and leads.

Using this new feature, I have updated the solution below. Now we don't have to use google geocoder as we have already latitude and longitude (Account.BillingLatitude,Account.BillingLongitude) from Salesforce. This is pretty neat solution.

<apex:page standardController="Account">

<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 mapOptions = {
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        center: {lat: {!Account.BillingLatitude}, lng: {!Account.BillingLongitude}}
    };
    map = new google.maps.Map(document.getElementById('map'),
        mapOptions);

    var marker = new google.maps.Marker({
        position: {lat: {!Account.BillingLatitude},lng: {!Account.BillingLongitude}},
        map: map
    });
    var infowindowtext = "<b>{!JSENCODE(Account.Name)}</b><br>{!JSENCODE(Account.BillingStreet)}<br>{!JSENCODE(Account.BillingCity)}, {!JSENCODE(Account.BillingPostalCode)}<br>{!JSENCODE(Account.BillingCountry)}";
    infowindowtext = infowindowtext.replace(/(\r\n|\n|\r)/gm,"");             

    var infowindow = new google.maps.InfoWindow({
        content: infowindowtext
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
    });

    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>

<div id="map">Hello</div> 
</apex:page>

Previous Solution using Google Geocoder

There were couple of issues first you have used http:// to fetch the JS files inside salesforce https:// domain. Second if an address has line break then your entire JavaScript will break. You have to wrap the address component with JSENCODE like this {!JSENCODE(Account.BillingStreet)}. Here is the updated code and it is working fine.

<apex:page standardController="Account">

<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 = "{!JSENCODE(Account.BillingStreet)}, " + "{!JSENCODE(Account.BillingCity)}, " + "{!JSENCODE(Account.BillingPostalCode)}, " + "{!JSENCODE(Account.BillingCountry)}";
  address = address.replace(/(\r\n|\n|\r)/gm,"");


  var infowindowtext = "<b>{!JSENCODE(Account.Name)}</b><br>{!JSENCODE(Account.BillingStreet)}<br>{!JSENCODE(Account.BillingCity)}, {!JSENCODE(Account.BillingPostalCode)}<br>{!JSENCODE(Account.BillingCountry)}";
  infowindowtext = infowindowtext.replace(/(\r\n|\n|\r)/gm,"");             
  var infowindow = new google.maps.InfoWindow({
    content: infowindowtext
  });

  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);

        console.log('map '+map);

        //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;
}

<div id="map">Hello</div> 

</apex:page>

Output enter image description here

5
  • @hari If this helps you, can you please mark it as answer. so that it will help others.
    – Saroj Bera
    Sep 22, 2015 at 8:40
  • I'm trying to make my google maps embed default to terrain view. using your code that loads everything correctly except the map options where I set the default view to terrain.
    – Sfdcprgmr
    Mar 20, 2018 at 9:16
  • 1
    Have you tried changing mapTypeId to google.maps.MapTypeId.TERRAIN instead of google.maps.MapTypeId.ROADMAP
    – Saroj Bera
    Mar 20, 2018 at 10:02
  • it worked, Thank you very much @Saroj Bera. one more question, how can i convert Terrain map view to Heat map view
    – Sfdcprgmr
    Mar 21, 2018 at 12:42
  • @Sfdcprgmr Please check this link on how to add developers.google.com/maps/documentation/javascript/…
    – Saroj Bera
    Mar 22, 2018 at 5:06

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .