These static examples show how the historical gMap plugin was configured. Return to the gMap archive or read the preserved documentation.
Simple map with marker
Displays a simple map with controls and adds one marker. The viewport gets centered automatically.
$("#map1").gMap({
markers: [{
latitude: 47.660937,
longitude: 9.569803
}]
});Different map type
Changes the map type to physical view.
The archived page noted that this was available since version 1.0.1 and that the passed argument had changed in the V3 API.
$("#map2").gMap({
maptype: google.maps.MapTypeId.TERRAIN
});Map with marker and info window
The same basic map pattern, with an info window that opens after loading:
$("#map3").gMap({
markers: [{
latitude: 47.660937,
longitude: 9.569803,
html: "Tettnang, Germany",
popup: true
}],
zoom: 6
});Addresses, geocoding and references
Since version 1.1.0, the plugin accepted addresses instead of latitude and longitude. gMap geocoded the supplied string and used it to place a marker or center the viewport.
The html property of a marker could be set to _address or _latlng to display the address or coordinates:
$("#map4").gMap({
markers: [
{
latitude: 47.651968,
longitude: 9.478485,
html: "_latlng"
},
{
address: "Tettnang, Germany",
html: "The place I live"
},
{
address: "Langenargen, Germany",
html: "_address"
}
],
address: "Braitenrain, Germany",
zoom: 10
});Extended usage
The final example combined a map without the standard controls, custom marker images, multiple markers, a custom viewport position and a fixed zoom level:
$("#map4").gMap({
mapTypeControl: false,
zoomControl: false,
panControl: false,
scaleControl: false,
streetViewControl: false,
scrollwheel: false,
markers: [
{
latitude: 47.670553,
longitude: 9.588479,
icon: {
image: "images/gmap_pin_orange.png",
iconsize: [26, 46],
iconanchor: [12, 46],
infowindowanchor: [12, 0]
}
},
{
latitude: 47.65197522925437,
longitude: 9.47845458984375
},
{
latitude: 47.594996,
longitude: 9.600708,
icon: {
image: "images/gmap_pin_grey.png",
iconsize: [26, 46],
iconanchor: [12, 46],
infowindowanchor: [12, 0]
}
}
],
icon: {
image: "images/gmap_pin.png",
iconsize: [26, 46],
iconanchor: [12, 46],
infowindowanchor: [12, 0]
},
latitude: 47.58969,
longitude: 9.473413,
zoom: 10
});The original page rendered a live map beneath every snippet and loaded Google Maps, jQuery 1.5.1 and the plugin itself. This archive keeps the complete example code but deliberately omits those executable dependencies.