Categories
jQuery Open Source

Search and geocode a location with jQuery and the Google Maps API

Using jQuery, you can easily build a Google Maps integration that allows users to search for a location and have it plotted on a Google Map using the extensive Google Maps API. This script could be used in as a store locator feature on a website or something similar.

Requirements:

Steps

  1. Setup the HTML form that will capture the Address:
          <div id="location-search">
            <h1>Plot Your Location</h1>
            <form>
                <input type="text" name="location" id="location">
                <input type="submit" id="submit">
            </form>
        </div>
        
  2. Add an emtpy div called #map, which will contain the Google Map:
          <div id="map" style="width:600px;height:400px"></div>
      
  3. Include the Google Maps API and key in your webpage using a JavaScript include:
      <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=INSERT KEY HERE"
          type="text/javascript"></script>
          
  4. Setup JS variables:
      var geocoder;
      var map;
      
  5. Using the variables setup in the previous step, set map equal the GMap2 instance and use getElementById to apply it to the #map element. Use the setCenter method to set the map’s default view. Also, set the geocoder var equal to an instance of the GClientGeocoder method.
      map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng(34, 0), 1);
      geocoder = new GClientGeocoder();
      
  6. Use jQuery to add a click event assigned to the submit button on the form. Setup a variable named address and set its value equal to the value of the #location input field. Add a return false to the click event to prevent the default action from occuring.
    $("#location-search #submit").bind("click", function(e){
    var address = $("#location").val();
    return false;
    });
    
  7. Use the getlocations method and pass the address value and callback function into it as arguments.
    geocoder.getLocations(address, addAddressToMap);
    
  8. Create the addAddress callback function. First clear any overlays using the clearOverlay() method. Next setup an if/else statement to catch any bad responses in case the Google is unable to geocode the address. If the geocoder is successful, add a pointer and overlay (info window) to the map, with the address that was geocoded.
    function addAddressToMap(response) {
      map.clearOverlays();
      if (!response || response.Status.code != 200) {
        alert("Sorry, we were unable to geocode that address");
      } else {
        place = response.Placemark[0];
        point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
        marker = new GMarker((point),8);
        map.addOverlay(marker);
        marker.openInfoWindowHtml(place.address);
        }
    }
    

It’s that simple, only 8 steps to setting up your own Google Maps integration! View a working demo

2 replies on “Search and geocode a location with jQuery and the Google Maps API”

hmm, coping section by section did not work, when i copied the code directly from the demo it did. (obviously using my key)… removing the return false didnt fix either

Looks like the "function addAddressToMap" should be inside of the " $("#location-search #submit").bind("click", function(e){ " and not outside. It needs to be between "var address = $("#location").val();" and "return false;"

It is setup that way in the demo but not shown that way in the content.

Leave a Reply

Your email address will not be published. Required fields are marked *