Google Maps V3 Geocode + Zoom

I was using geocode service of Google Maps Version 2 the Javascript API. https://developers.google.com/maps/documentation/javascript/v2/reference However google decided not to support his anymore.

Note: The Google Maps JavaScript API Version 2 has been officially deprecated as of May 19, 2010. The V2 API will continue to work until May 19, 2013. We encourage you to migrate your code to version 3 of the Maps JavaScript API.

So how can I geocode in google maps version 3 javascript api with zoom?

Answers


To zoom the map to best show the results of the geocoding operation, you can use the google.maps.Map fitBounds method with the viewport property of the result:

function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map, 
                position: results[0].geometry.location
            });
        if (results[0].geometry.viewport) 
          map.fitBounds(results[0].geometry.viewport);
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }

code snippet:

var geocoder, map, marker;

function codeAddress() {
  var address = document.getElementById("address").value;
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      if (marker && marker.setMap) marker.setMap(null);
      marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });
      if (results[0].geometry.viewport)
        map.fitBounds(results[0].geometry.viewport);
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

function initialize() {
  geocoder = new google.maps.Geocoder();
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  google.maps.event.addDomListener(document.getElementById('btn'), 'click', codeAddress);
  codeAddress();

}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="address" value="Palo Alto, CA" />
<input id="btn" value="Geocode" type="button" />
<div id="map_canvas"></div>

var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': zipcode }, function(results, status)
{
    if (status == google.maps.GeocoderStatus.OK)
    {
        map.setCenter(results[0].geometry.location);
        map.setZoom(12);
    }
    else
    {
       alert(zipcode + " not found");
       console.log("status : ", status);
    }
});

Need Your Help

Kafka in Docker not working

docker apache-kafka docker-compose kafka-python

I am trying to use wurstmeister\kafka-docker image with docker-compose, but I am having real problems with connecting everything.

Do you need to create an NSAutoreleasePool within a block in GCD?

iphone objective-c cocoa macos grand-central-dispatch

Normally, if you spawn a background thread or run an NSOperation on an NSOperationQueue you need to create an NSAutoreleasePool for that thread or operation because none exists by default.