Question

I’m using Google Maps api v. 3 in my website. What I want to implement is the following flow:

1. User is presented a form where he enters an address (of some kind – city, street, etc).
2. After the form is filled, a map is presented to him, showing him the map centered to the address he entered. Then he can enter a keyword to search against google places in the area of the map.

What I’m stopped at is the translation of the address to map. As I understand the v3 API, I should initialize the map with LatLng center position – but having a city name or so I can’t do it just yet. I need some kind of translation between the textual address and coordinates – it’s what Google Maps are doing when I search for “Beverly Hills” for example. Some kind of reverse, I guess? How should I do it in the javascript API?

Or is there an option to include a search bar inside the v3 embedded map?

Answer 1

You need to use geocode something like below

Copied from http://code.google.com/apis/maps/documentation/javascript/geocoding.html

  var geocoder;
  var map;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

  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
        });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }

And then you will need to call codeAddress() function on your button click