1

I am using google map based on billing address field its works fine. But now i need to display the map based on Latitude and Longitude value, when i given using the latitude and longitude value it is not displaying the map only blank page is displayed. Here i attached the code.

    <apex:page standardController="Account" >
<apex:pageBlock >
<head>

<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: 20,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    mapTypeControl: true
  }

  var map;
  var marker;

  var geocoder = new google.maps.Geocoder();
  <!--var address =  "{!Account.BillingStreet}, {!Account.BillingPostalCode} {!Account.BillingCity}, {!Account.BillingState},{!Account.BillingCountry}";  

    var address =  "{!Account.Latitude__c}, {!Account.Longitude__c} "; -->
    var lat = '{!Account.Latitude__c}';
var lng = '{!Account.Longitude__c}';
var latlng = new google.maps.LatLng(lat, lng); 



  var infowindow = new google.maps.InfoWindow({
    <!--content: "<b>{!Site__c.Name}</b>"-->
    content: "<b>{!Account.BillingStreet} {!Account.BillingPostalCode} {!Account.BillingCity}, {!Account.BillingState},{!Account.BillingCountry}</b>"
  });

  <!--geocoder.geocode( { address: address}, function(results, status) {-->

    geocoder.geocode( { 'latLng': latlng}, 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>
  • Hey.. did your issue is resolved? Can you please paste the final code ? – Suyash Jul 16 '17 at 20:36
3

You are trying to use latLng gecode service but still your code has not altered to use that service. It's still trying to use the service with address.

geocoder.geocode( { address: address}, function(results, status) {
      ...
});

Change above into geocoder.geocode( { 'latLng': yourLatLng}, function(results, status). Also make sure that you are having valid lat , lng values.

var lat = '{!Account.Latitude__c}';
var lng = '{!Account.Longitude__c}';
var latlng = new google.maps.LatLng(lat, lng);

geocoder.geocode( { 'latLng': latlng}, function(results, status){
  ...
});

More info here

I'm thinking you can get more help for this kind of questions on Stackoverflow than here :)

  • thanks for reply highfive,its my mistake now i have update my code var address = "{!Account.Latitude__c}, {!Account.Longitude__c} "; geocoder.geocode( { address: address}, function(results, status).now i have also get a blank page. – user7292 Jun 4 '14 at 5:04
  • see my update, what I was saying is to update the address service into latLng in your request. not the value. – highfive Jun 4 '14 at 5:15
  • thanks for the answer. I tried your answer and updated my code. But still can't able to get the map. Eg: latitude value:48.869 Longitude:2.292 – user7292 Jun 4 '14 at 5:25
  • @highfive can you please share the code after updating..thanks in advance – Suyash Jul 16 '17 at 20:38

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.