+ Start a Discussion
anu123anu123 

Urgent:get the longitude and latitude

Hi all ,

     i wrote this page for displaying google map

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

 

 

Any one can u please help me.

 

Thanks in advance.

anu

Cory CowgillCory Cowgill

anu123,

 

I led a session at Dreamforce this year on this very topic.

 

I demonstrated HTML5 Geolocation with Visualforce and Apex.

 

Session Recording can be found here: http://www.youtube.com/watch?v=wwTdGqOygBQ

Source Code can be found here: https://github.com/corycowgill/sfbusradar

Application can be found here: http://www.chicagobusradar.com

 

Cory CowgillCory Cowgill

There is also a section on using Google Geocoding Service. Skip to minute 12 if you just want to know how to geocode address data.

DivyaReddyDivyaReddy

Try this and let me now any problem with it.

<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' : '50px'});
      $('#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:500px;
  background:transparent;
}
</style>

</head>
 
<body>
<div id="map"></div>
</body>
</apex:page>