Important Message

I can see that there has been a couple of issue registers for this project. However, due to time constraints I am not able to work on this project. Therefore this project will no longer be maintained.

I initially worked on this project for couple of websites I was working on, and since then things have come a long way. I would like to develop this plug-in once I get sometime using the new Google Maps API v3. However, until further notice, I would like you guys to know that I am unable to work on this project. Sorry for the inconvenience.

Hopefully, I will have time to work on this plug-in.

Update date: 14th of July, 2010.

jquery.googlemap ($.googlemap)

A simple jQuery plugin which handles integration of Google Maps (API). It works on top of both jQuery and Google Maps API v2 - and you can instantiate a working Google map with just:

// Javascript
// minimal code setup (requires jQuery 1.2+ and Google Maps API v2
$(".map").googlemap({addresses: ["1 ABC ST, NSW 2193 Sydney, Australia"]});

It returns jQuery object for chaining and it also has its own API:

// instance of jquery.googlemap object from above instantiation
var api = $(".map").googlemap();

// HTML
<div class="map"></div>

Try for yourself and see!

More examples

Full option set

// Javascript
// instantiate by giving full options
var locations = new Array();
locations = [
    "1 ABC St, Cantebury UK",
    "2 XYZ St, Yorkshire US"
];

$(".map").googlemap({
    labels: true, controls: true, zoom: 3, latitude: -23, longitude: 133, 
    html: ".popup-content", anchor: ".external-map-marker", addresses: locations,
    debug: false
});

// HTML
<div class="map"></div>
<p class="hidden popup-content">This is 1 ABC St, Canterbury UK</p>
<p class="hidden popup-content">This is 2 XYZ St, Yorkshire US</p>
<a class="external-map-marker">1 ABC St</a>
<a class="external-map-marker">2 XYZ St</a>

Chainability

$(".map")
    .googlemap({addresses: locations})
    .each(function() { alert($(this).attr("id")); });