Geocode an Address in Google Maps Javascript

Google Applications is one of the most powerful tools available today for dynamic map creation and manipulation. There are nearly unlimited uses for Google Maps, and a good starting place on your road to a great site is figuring out how to get a map location from a simple street address. Follow the steps below and you'll be well on your way to creating an intuitive, interactive web page utilizing Google Applications. Each step here shows you a screenshot with the exact code added in that step; you can click on each screenshot to enlarge it.

Steps

  1. Start off with a web page that you have added a Google javascript api map to.
  2. Create a text box input for the user to enter the street address.

    Address: <input type="text" id="inputTextAddress" style=" width:200px" title="Address to Geocode" />
  3. Create a button input for the user to click to geocode the address.

    <input type="button" onclick="codeAddress()" id="inputButtonGeocode" style="width:150px" title="Click to Geocode" value="Click to Geocode" />
  4. Declare a variable outside of the initialize function so that it is available in any javascript code, this will store the geocode class object.

    var geocoder;
  5. Set the geocoder variable equal to an instance of the Google Maps geocoder class as new Google Maps Geocoder() inside the initialize() function.

    geocoder = new google.maps.Geocoder();
  6. Add a second Define a JavaScript Function in HTML code, call it codeAddress. It will not have any values passed to it.

    function codeAddress() { }
  7. Make sure that the first line of the function uses getElementById to get the address from the text box and place it into a variable we'll call sAddress.

    var sAddress = document.getElementById(" inputTextAddress").value;
  8. Call the geocode method of the geocoder object, this will take two passed-in parameters. The first is the GeocoderRequest, this says what kind of request is being made and what the request value is. The second is the callback function that will be used to process the results.

    geocoder.geocode( { 'address': sAddress}, function(results, status) { });
  9. The callback function should first check the status value of the callback function. Use an IF statement to test the result, check to see if the status equal google.maps.GeocoderStatus.OK. Also add an ELSE clause to the IF statement as well.

    if (status == google.maps.GeocoderStatus.OK) {
    }
    else{
    }
  10. If the status equals OK, call the setCenter method of the map object variable. You will pass this method to get the result's first geometry location.

    map.setCenter(results[0].geometry.location);
  11. Next, use the same result geometry location to add a map marker to the map object variable. Create a new variable – we'll call it oMarker – it will be created as a new google.maps.Marker. The new method takes two parameters, the first is the map object that you're adding the marker to, and the second is the position to place the marker, which is again the first results geometry location.

    var marker = new google.maps.Marker({
     map: map,
     position: results[0].geometry.location
    });
  12. Finally we're going to add an alert message to the ELSE to let the user know that the Geocode didn't work like it should have. You can use the status to give a bit more information rather than just saying that it didn't work.

    alert("Geocode was not successful for the following reason: " + status);
  13. You can now give it a go! Type in an address, or simply a Have a "Staycation" in Your Own City and state, or even something as simple as a state name! You'll see the map move to the new location and add a marker to the map!

    The live page for this example can be viewed and used through a link from the sources and citations area if you scroll down!



Tips

  • If you get an error, use console.log in combination with your favourite javascript debugger (such as firebug) as a way to debug your javascript.
    • Alternatively, you can do this. If you get an error, place alert(""); messages throughout your javascript so you can see how far the code gets before erroring.
  • Javascript is case sensitive, so be aware of typos and formatting.
  • Javascript errors can be very elusive. Have a friend/coworker check out code that won't work – many times a new set of eyes is just what's needed....

Warnings

  • Be sure that you're using Google Maps the way it was intended by checking their terms of use.

Things You'll Need

  • Web page with Google Maps api map enabled
  • Javascript basic knowledge

Related Articles

Sources and Citations

Retrieved from "https://kipkis.com/index.php?title=Geocode_an_Address_in_Google_Maps_Javascript&oldid=355366"