How to Geocode an Address in Google Maps Javascript

Step-by-Step Guide

1. 1

   Step 1: Start off with a web page that you have added a Google javascript api map to.

   Address: <input type="text" id="inputTextAddress" style=" width:200px" title="Address to Geocode">
   
   <input type="button" onclick="codeAddress()" id="inputButtonGeocode" style="width:150px" title="Click to Geocode" value="Click to Geocode">
   
   var geocoder
2. 2

   Step 2: Create a text box input for the user to enter the street address.

   geocoder = new google.maps.Geocoder()
3. 3

   Step 3: Create a button input for the user to click to geocode the address.

   It will not have any values passed to it. function codeAddress() { } , var sAddress = document.getElementById(" inputTextAddress").value
4. 4

   Step 4: Declare a variable outside of the initialize function so that it is available in any javascript code

   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) { })
5. 5

   Step 5: this will store the geocode class object.

   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{ } , You will pass this method to get the result's first geometry location. map.setCenter(results.geometry.location)
6. 6

   Step 6: Set the geocoder variable equal to an instance of the Google Maps geocoder class as new Google Maps Geocoder() inside the initialize() function.

   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.geometry.location })
7. 7

   Step 7: Add a second function to your javascript code

   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)
8. 8

   Step 8: call it codeAddress.

   Type in an address, or simply a 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!
9. 9

   Step 9: 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.

10. 10

    Step 10: Call the geocode method of the geocoder object

11. 11

    Step 11: this will take two passed-in parameters.

12. 12

    Step 12: The callback function should first check the status value of the callback function.

13. 13

    Step 13: If the status equals OK

14. 14

    Step 14: call the setCenter method of the map object variable.

15. 15

    Step 15: use the same result geometry location to add a map marker to the map object variable.

16. 16

    Step 16: 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.

17. 17

    Step 17: You can now give it a go!

Detailed Guide

About the Author