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.



  1. Setup the HTML form that will capture the Address:
          <div id="location-search">
            <h1>Plot Your Location</h1>
                <input type="text" name="location" id="location">
                <input type="submit" id="submit">
  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=";v=2&amp;key=INSERT KEY HERE"
  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) {
      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);

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 *