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

  • @hari If this helps you, can you please mark it as answer. so that it will help others. – Saroj Bera Sep 22 '15 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 '18 at 9:16
  • 1
    Have you tried changing mapTypeId to google.maps.MapTypeId.TERRAIN instead of google.maps.MapTypeId.ROADMAP – Saroj Bera Mar 20 '18 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 '18 at 12:42
  • @Sfdcprgmr Please check this link on how to add developers.google.com/maps/documentation/javascript/… – Saroj Bera Mar 22 '18 at 5:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.