Sunday, December 18, 2011

Searching a particular address using google maps in javascript


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>

<article>
<p><span class="contentsmall">Finding the selected branch:</span><span class="contentsmall" id="status">checking...</span></p>
</article>

<script>
var geocoder;
var map;
function initialize()
{
//You can initialize the address you want search on google maps here. You can fetch the address through query string or hidden fields on your page.

  finalAddress=”Mumbai , Bandra (E)”;
}

 geocoder = new google.maps.Geocoder();

 if (geocoder)
 {
  geocoder.geocode( { 'address': finalAddress}, function(results, status)
   {
     if (status == google.maps.GeocoderStatus.OK)
     {
       var s = document.querySelector('#status');  
 
      if (s.className == 'success')
      {   
            return; 
      }   
         
      s.innerHTML = "found"; 
      s.className = 'success';  
          
      var mapcanvas = document.createElement('div');
      mapcanvas.id = 'map_canvas'; 
      mapcanvas.style.height = '350px'; 
      mapcanvas.style.width = '330px';   

      document.querySelector('article').appendChild(mapcanvas);
       
      var myOptions = {
          zoom: 15,
          panControl: true,
          scaleControl: true,
          center: results[0].geometry.location,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
 
       map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
       var marker = new google.maps.Marker({
           map: map,
           position: results[0].geometry.location
       });
     }
     else
     {
       alert("Geocode was not successful for the following reason: " +status);
     }
   });
 }
}

function error(msg)
{ 
      var s = document.querySelector('#status'); 
      s.innerHTML = typeof msg == 'string' ? msg : "failed"; 
      s.className = 'fail';   
}

initialize();
</script>

No comments:

Post a Comment