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>
Improve this question
1
  • Hey.. did your issue is resolved? Can you please paste the final code ?
    – Suyash
    Commented Jul 16, 2017 at 20:36

1 Answer 1

Reset to default
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 :)

Improve this answer
4
  • 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
    Commented Jun 4, 2014 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
    Commented Jun 4, 2014 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
    Commented Jun 4, 2014 at 5:25
  • @highfive can you please share the code after updating..thanks in advance
    – Suyash
    Commented Jul 16, 2017 at 20:38

You must log in to answer this question.

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