Landcarte, a Google Maps jQuery plugin

Landcarte is a jQuery plugin and a JavaScript library providing a simple and concise way to embed geographic maps into a web page and make use of their numerous features, including markers, shapes, layers, user interaction events and geocoding. In its core, Landcarte is based on the Google Maps API v3 and jQuery.


The core idea behind Landcarte is to reduce the amount of repetitive and sometimes extensive code constructions (aka boilerplate code) frequently emerging from the native syntax of the Google Maps API.

Landcarte is also an alternative to quite a number of previously existing jQuery map plugins. By contrast, it makes use of jQuery style beyond the initialization of a map container and extends this style to all the rest of the map machinery.

→  Comparison of Google Maps jQuery Plugins

Brief Overview


var map = $("#map").geoMap();
// or, alternatively, with initial options:
var map = $("#map").geoMap({ center: [50, 12], zoom: 10 });

Markers, Shapes and Layers

map.add("markers", [[50.5, 15.5], [56.5, 10.5]], { icon: "m.png" })
    .add("polyline", {
        path: [[48.92, 2.24], [46.19, 6.06], [48.19, 16.35]],
        strokeColor: "#f00", strokeWeight: 3


var markers  = map.find("marker");
var shapes   = map.find("shape:odd");
var polyline = map.find("polyline:visible").eq(2);
var marker   = map.find("marker:last");

Attributes and Properties

map.attr("center", [46.5, 8]);
marker.prop({ position: [46.5, 8], icon: "m.png" });

Collection Iterator

map.find("marker").each(function(i, marker) {
    marker.attr({ title: "Marker #" + i });


var balloon = map.find("infowindow:last");
map.find("marker").on("click", function(event) {
    var marker =, p = marker.prop("position");
    balloon.attr({ content: + ", " + p.lon }).show(map, marker);


$.geocode("Copenhagen", function(data) {
    if (data.location) map.add("marker", data.location);

Brief Introduction

Since Landcarte relies both on jQuery and the Google Maps API v3, they should be included into the page prior to Landcarte:

<script src="//"></script>
<script src="//"></script>

NB: In order to have the Google Maps API included, Google Maps might require a personal API key.

A map is initialized on the map container's jQuery object:


or, alternatively, with initial options:

$("#map").geoMap({ center: [50, 12], zoom: 10 });

Once the map is initialized it can be referred to by the same method call:

var map = $("#map").geoMap();

That's it. Further, this code is easily extended to something more practical:

Example #1

A map with clickable markers displaying their location.

var icon = { url: "star.png", anchor: { x: 10, y: 10 } };
var points = [
    [-16.795, -151.492], [-16.857, -151.478], [-16.903, -151.434],
    [-16.890, -151.398], [-16.841, -151.359], [-16.712, -151.034]

// initializing a map instance and adding markers and a polyline
var map = $("#map").geoMap({ center: [-16.8, -151.25], zoom: 10 })
    .add("markers", points, { icon: icon })
    .add("polyline", points);

// initializing an info balloon
var balloon = map.add("infowindow").find("infowindow:last");

// attaching a click handler to the markers
map.find("marker").on("click", function(event) {
    var marker =;
    // displaying the result of the geocoding request
    $.geocode(marker.prop("position"), function(data) {
        balloon.attr({ content: data.locality }).show(map, marker);

// restyling the polyline
map.find("polyline").attr({ strokeColor: "#c09" });

Example #2

The following code snippet is an interpretation of an example from the Google Maps API v3 Developer's Guide in terms of Landcarte:

$(function() {
    var map = $("#map").geoMap({
        zoom: 4,
        center: [-25.363882, 131.044922],
        mapTypeId: "roadmap"
    map.on("click", function(event) {
        map.add("marker", event.location)
            .animate("center", event.location);

This looks a bit less wordy and a bit more readable than the original code quoted below:

var map;
function initialize() {
    var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
    var mapOptions = {
        zoom: 4,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    map = new google.maps.Map(document.getElementById("map_canvas"),

    google.maps.event.addListener(map, 'click', function(event) {

function placeMarker(location) {
    var marker = new google.maps.Marker({
        position: location,
        map: map


google.maps.event.addDomListener(window, 'load', initialize);

Click on the map below to see it working.

The term landcarte stands for 'land map'. It can be decomposed into English land and French carte. It is also the archaic spelling of the modern German word for 'map' — Landkarte, which combines the same two roots of common Germanic and Middle French origin.

Landcarte Reference