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

2
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:
    [html]
    <div id="location-search">
    <h1>Plot Your Location</h1>
    <form>
    <input type="text" name="location" id="location">
    <input type="submit" id="submit">
    </form>
    </div>
    [/html]
  2. Add an emtpy div called #map, which will contain the Google Map:
    [html]
    <div id="map" style="width:600px;height:400px"></div>
    [/html]
  3. Include the Google Maps API and key in your webpage using a JavaScript include:
    [js]
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=INSERT KEY HERE"
    type="text/javascript"></script>
    [/js]
  4. Setup JS variables:
    [js]
    var geocoder;
    var map;
    [/js]
  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.
    [js]
    map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(34, 0), 1);
    geocoder = new GClientGeocoder();
    [/js]
  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.
    [js]
    $("#location-search #submit").bind("click", function(e){
    var address = $("#location").val();
    return false;
    });
    [/js]
  7. Use the getlocations method and pass the address value and callback function into it as arguments.
    [js]
    geocoder.getLocations(address, addAddressToMap);
    [/js]
  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.
    [js]
    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);
    }
    }
    [/js]

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

  1. 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

  2. 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