Google Maps jQuery Plugins Comparison

This comparison shows how a couple of jQuery Google Maps plugins address the task of simplifying the original Google Maps API and how they comply with the jQuery code style.

It turns out that in most jQuery Google Maps plugins the use of jQuery is limited to the initialization of a map container. The jQuery code style, indeed very flexible and concise, is not employed any further. Each plugin introduces an API in its unique style, often quite overcomplicated and clumsy, failing the idea of simplifying the native Google Maps API through wrapping its functionality and boilerplate code with a familiar jQuery code style.

These facts led to creation of Landcarte, which takes advantage of both the jQuery code style and the Google Maps API.

container initialization

Google Maps API
var map = new google.maps.Map(document.getElementById("map"));
var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(50, 12.1), zoom: 10
});
jQuery code style
var box = $("#box");
var box = $("#box").data({ title: "hey there", state: 1 });
Landcarte
var map = $("#map").geoMap();
var map = $("#map").geoMap({ center: [50, 12.1], zoom: 10 });
gmaps.js
var map = new GMaps({ div: "#map" });
var map = new GMaps({ div: "#map", lat: 50, lng: 12.1 });
jquery-ui-map
var map = $("#map").gmap();
var map = $("#map").gmap({ center: "50,12.1" });

setting container attributes

Google Maps API
map.setZoom(10);
map.setCenter(new google.maps.LatLng(50, 12));
map.setOptions({
    center: new google.maps.LatLng(50, 12), zoom: 10
});
jQuery code style
box.attr("title", "content box");
box.attr({ title: "content box", checked: false });
Landcarte
map.attr("zoom", 10);
map.attr({ center: [50, 12], zoom: 10 });
gmaps.js
map.setZoom(10);
map.setCenter({ lat: 50, lng: 12 });
jquery-ui-map
map.gmap("option", "zoom", 10);
map.gmap({ center: new google.maps.LatLng(50, 12) });

getting container attributes

Google Maps API
var z = map.getZoom();
var c = map.getCenter();
jQuery code style
var a = box.attr("title");
var c = box.attr("checked");
var c = box.prop("checked");
Landcarte
var z = map.attr("zoom");
var c = map.attr("center");
var c = map.prop("center");
gmaps.js
var z = map.getZoom();
var c = map.getCenter();
jquery-ui-map
var z = map.gmap("option", "zoom");
var c = map.gmap("option", "center");

adding elements

Google Maps API
new google.maps.Marker({
    map: map, title: "M",
    position: new google.maps.LatLng(50, 12)
});
new google.maps.Polyline({ map: map, path: [
    new google.maps.LatLng(48.92, 2.24),
    new google.maps.LatLng(46.19, 6.06)
] });
jQuery code style
box.append("<div/>", { id: "a", title: "A" });
box.append("<ul/>", { id: "b" });
Landcarte
map.add("marker", { position: [50, 12], title: "M" });
map.add("polyline", { path: [[48.92, 2.24], [46.19, 6.06]] });
gmaps.js
map.addMarker({ lat: 50, lng: 12, title: "M" });
map.drawPolyline({ path: [[48.92, 2.24], [46.19, 6.06]] });
jquery-ui-map
map.gmap("addMarker", { position: "50,12", title: "M" });
map.gmap("addShape", "Polyline", { path: [
    new google.maps.LatLng(48.92, 2.24),
    new google.maps.LatLng(46.19, 6.06)
] });

iterating over collections of elements

Google Maps API
// no built-in iterator
jQuery code style
box.find("li").each(function(index, element) { ... });
var items = box.find("li").toArray(); // array
Landcarte
map.find("marker").each(function(index, object) { ... });
var markers = map.find("marker").toArray(); // array
gmaps.js
// built-in iterator not found
var markers = map.markers; // array
jquery-ui-map
// built-in iterator not found
var markers = map.gmap("get", "markers"); // array

reducing collections to their subsets

Google Maps API
// no collections, no filters
jQuery code style
box.find("li").filter(":even");
box.find("li").filter(function(i) { return i % 12 == 1; });
Landcarte
map.find("marker").filter(":even");
map.find("marker").filter(function(i) { return i % 12 == 1; });
gmaps.js
// collections and filters not found
jquery-ui-map
var filter = { "property": "tags", "value": "foo" };
map.gmap("find", "markers", filter, function(marker, found) { ... });

attaching event handlers

Google Maps API
// 'markers' refer to a previously initialized array
for (var i = 0; i < markers.length; i++) {
    google.maps.event.addListener(
        markers[i], "click", function(e) { ... }
    );
}
jQuery code style
box.find("li").on("click", function(e) { ... });
Landcarte
map.find("marker").on("click", function(e) { ... });
gmaps.js
// event handlers are attached upon initialization
map.addMarker({
    lat: 50, lng: 12,
    click: function(e) { ... }
});
jquery-ui-map
map.gmap("addMarker", { position: "50,12" }).click(function() { ... });

selectors

Google Maps API
// unavailable
jQuery code style
var last  = box.find("ul:last");
var odd   = box.find("li:odd");
var third = box.find("div").eq(2);
Landcarte
var last  = map.find("polyline:last");
var odd   = map.find("shape:odd");
var third = map.find("marker").eq(2);
gmaps.js
// not found
jquery-ui-map
// not found

manipulating collections of elements

Google Maps API
// missing
jQuery code style
box.find("ul").attr({ title: "list" }).toggle();
box.find("li").gt(1).fadeIn();
Landcarte
map.find("polyline").attr({ strokeColor: "#9f9" }).toggle();
map.find("marker").gt(1).fit();
gmaps.js
// not found
jquery-ui-map
// not found

asynchronous requests and geocoding

Google Maps API
var g = new google.maps.Geocoder();
g.geocode({ address: "Copenhagen" }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
    }
});
jQuery code style
$.get("/copenhagen.json", function(data) {
    if (data.text) box.append($("<div/>", { text: data.text }));
});
Landcarte
$.geocode("Copenhagen", function(data) {
    if (data.location) map.add("marker", data.location);
});
gmaps.js
GMaps.geocode({
    address: "Copenhagen",
    callback: function(results, status) {
        if (status == "OK") {
            var p = results[0].geometry.location;
            map.addMarker({ lat: p.lat(), lng: p.lng() });
        }
    }
});
jquery-ui-map
map.gmap("search", { address: "Copenhagen" },
    function(results, status) {
        if (status == "OK") {
            var p = results[0].geometry.location;
            map.gmap("addMarker", { position: p });
        }
    }
);


To learn more about Landcarte, see Landcarte Reference.