at 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 (i.e. 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 concepts beyond the initialization of a map container and extends these concepts to the rest of the code, to the map engine itself.

→  Comparison of Google Maps jQuery Plugins

Brief Overview


// or, alternatively, with initial options:
$("#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:

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

After that follows the downloaded version of Landcarte. (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.