jQuery gMap 2 - Google Maps API V3

gMap is a jQuery plugin that helps you embed Google Maps into your website. With less than 2 KB (minified and gzipped) in size it is very flexible and highly customizable

Original version by Cedric Kasner, modified by Mario Estrada to use the Google Maps API V3.

• Download
• Examples
• Documentation

Download

gMap 2.1.5 (includes source code and minified version)

Contribute

Fork it on GitHub and submit bug reports and pull requests.

Examples

Default View

Code:

$('#map').gMap();

Custom Controls and Map Type*

* This map will show your current location if your browser supports the Geolocation API and you allow it to run.

Code:

$('#map_controls').gMap(
{
     latitude: -2.206,
     longitude: -79.897,
     maptype: 'TERRAIN',
     zoom: 8,
     controls: {
         panControl: true,
         zoomControl: false,
         mapTypeControl: true,
         scaleControl: false,
         streetViewControl: false,
         overviewMapControl: false
     }
});

Manipulation Code:

if(navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(function(position)
	{
		$('#map_controls').gMap('addMarker', {
			latitude: position.coords.latitude,
			longitude: position.coords.longitude,
			content: 'You are here!',
			icon: {
				image: "images/gmap_pin.png", 
				iconsize: [26, 46],
				iconanchor: [12, 46]
			},
			popup: true
		});
		$('#map_controls').gMap('centerAt', {
			latitude: position.coords.latitude,
			longitude: position.coords.longitude,
			zoom: 8
		});
	}, function()
	{
		alert('Couldn\'t find you :(');
	});
}

Markers

Code:

 $('#map_addresses').gMap({
	address: "Quito, Ecuador",
	zoom: 5,
	markers:[
		{
			latitude: -2.2014,
			longitude: -80.9763,
			html: "_latlng"
		},
		{
			address: "Guayaquil, Ecuador",
			html: "My Hometown",
			popup: true
		},
		{
			address: "Galapagos, Ecuador",
			html: "_address"
		}
	]
});

Kitchen Sink - Extended Usage

Code:

$("#map_extended").gMap({
	controls: false,
	scrollwheel: true,
	maptype: 'TERRAIN',
	markers: [
		{
			latitude: 47.670553,
			longitude: 9.588479,
			icon: {
				image: "images/gmap_pin_orange.png",
				iconsize: [26, 46],
				iconanchor: [12,46]
			}
		},
        {
			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]
			}
		}
	],
	icon: {
		image: "images/gmap_pin.png", 
		iconsize: [26, 46],
		iconanchor: [12, 46]
	},
	latitude: 47.58969,
	longitude: 9.473413,
	zoom: 10
});

Documentation

You need to use the Maps API V3 Javascript from Google, you can set the sensor parameter to true or false if you're going to detect the user's location, there's no need to generate an API key:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.gmap.min.js"></script>

This version uses the same documentation as the original version with the following differences:

The maptype has to be set as an string and can be set to any of these values: 'HYBRID', 'TERRAIN', 'SATELLITE' or 'ROADMAP'.

Added the shadowanchor setting to position the shadow properly.

This version no longer uses the infowindowanchor setting.

The control setting now can be set to false for no control or as an Javascript object containing each individual control as a property.

A whole set of options can be set as follows:

var options = {
    controls: {
        panControl: true,
        zoomControl: true,
        mapTypeControl: true,
        scaleControl: true,
        streetViewControl: true,
        overviewMapControl: true
    },
    scrollwheel: true,
    maptype: 'TERRAIN',
    markers: [
        {
            latitude: -2.2014,
            longitude: -80.9763,
        },
        {
            address: "Guayaquil, Ecuador",
            html: "My Hometown",
            icon: {
                image: "images/gmap_pin_grey.png",
                iconsize: [26, 46],
                iconanchor: [12,46]
            }
        }
    ],
    icon: {
        image: "http://www.google.com/mapfiles/marker.png",
        shadow: "http://www.google.com/mapfiles/shadow50.png",
        iconsize: [20, 34],
        shadowsize: [37, 34],
        iconanchor: [9, 34],
        shadowanchor: [19, 34]
    },
    latitude: -2.282,
    longitude: -80.272,
    zoom: 10
}

Aditional Methods

This methods should be called on elements with initialized maps.

• centerAt, usage:

  $('#map').gMap('centerAt',
  	{
  		latitude: 0,
  		longitude: 0,
  		zoom: 10
  	}
  );
  

• addMarker, usage:

  $('#map').gMap('addMarker',
  	{
  		latitude: 0,
  		longitude: 0,
  		content: 'Some HTML content'
  	}
  );