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

Categories: jQueryOpen Source

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

scott · January 13, 2011 at 11:16 am

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

neolith · June 28, 2011 at 2:54 pm

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 *

Related Posts

GruntJS

My First GruntJS Plugin: Bust My Cache

GruntJS is a JavaScript Task runner that has been around for about 2+ year, at least as far as I can remember. I started playing around with GruntJS which uses Node.js about a year ago, Read more…

HTML5

HTML5 Local Storage and Web Personalization

I have just finished doing some research on using HTML5 Local storage instead of Cookies for website personalization and have come to the conclusion that everyone should be using HTML5 local storage in place of Read more…

eCommerce

How to implement Bronto Email JavaScript Conversion tracking in Google Tag Manager

This tutorial will show you how to setup Bronto Advanced JavaScript Conversion tracking using Google Tag Manager. Bronto Advanced JavaScript tracking gives you more visibility to all of the products that customers are purchasing, then Read more…