Google Maps (V2 API)

While you can use the original Google Maps JavaScript API to do what you need. This plugin attempts to simplify the process to adding maps to a page.

Not all portions of the original API were carried over into this plugin, some portions are considered a work in progress, other portions are considered unknown to the developer at this time.

I am not affiliated with Google and this is a personal project to simplify the usage of Google Maps API.

Special thanks to Menno at www.codefocus.ca for doing a code review.

Released under the GPL license & MIT license

Obtain API Key

All Maps API applications should load the Maps API using an API key. Follow these steps to generate an API key.

Testimonials

• "I have been crawing around in JQuery plugin code for about 6 months and this is one really FINE "first" plugin" - Russell Stoker
• "Your additions are amazing! and such time savers too!" - Joseph Moglia(grad student at Humboldt State University in California in GIS and Remote Sensing)

Simple Map

$('#map_canvas').googleMaps();

Simple Latitude & Longitude

$('#map_canvas').googleMaps({
	latitude: 42.351505,
	longitude: -71.094455
});

Custom Depth

$('#map_canvas').googleMaps({
	 depth: 18
});

Map Animate

$('#map_canvas').googleMaps({
	 pan: {
		panLatitude:	37.4569, 	
		panLongitude:	-122.1569,
		timeout: 		4000
	}
});

Enable Scroll Wheel Zoom

$('#map_canvas').googleMaps({
	scroll: true
});

Disable Scroll Wheel Zoom

$('#map_canvas').googleMaps({
	scroll: false
});

Single Marker

$('#map_canvas').googleMaps({
	 markers: {
        latitude: 	37.4416,
        longitude: -122.1516
    }
});

Multiple Marker

$('#map_canvas').googleMaps({
	 markers: [{
        latitude: 	37.4416,
        longitude: -122.1516
    },{
        latitude: 	37.4516,
        longitude: -122.1616
    },{
        latitude: 	37.4566,
        longitude: -122.1666
    }]
});

Marker Drag

$('#map_canvas').googleMaps({
	markers: {
        latitude: 	37.4416,
        longitude: -122.1516,
		draggable: true
    }
});

Map Icon Simple

$('#map_canvas').googleMaps({
	markers: {
        latitude: 	37.4416,
        longitude: -122.1516,
        icon: {
        	image: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png'
        }
    }
});

Map Icon Custom

$('#map_canvas').googleMaps({
	markers: {
        latitude: 	37.4416,
        longitude: -122.1516,
        icon: { 
            image: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png', 
            shadow: 'http://chart.apis.google.com/chart?chst=d_map_pin_shadow', 
            iconSize: '12, 20', 
            shadowSize: '22, 20' 
        } 
    }
});

Marker Info Box (onClick)

<div id="address">1600 Amphitheatre Parkway Mountain View, CA 94043</div>

$('#map_canvas').googleMaps({
	markers: {
        latitude: 	37.4416,
        longitude: -122.1516,
        info: {
            layer: '#address'
        }
    }
});

Marker Info Box (onLoad)

<div id="address">1600 Amphitheatre Parkway Mountain View, CA 94043</div>

$('#map_canvas').googleMaps({
	markers: {
        latitude: 	37.4416,
        longitude: -122.1516,
        info: {
            layer: '#address'
        }
    }
});

Multiple Marker Info Box (onClick)

<div id="address1">1600 Amphitheatre Parkway Mountain View, CA 94043</div>
<div id="address2">North From 1600 Amphitheatre Parkway Mountain View, CA 94043</div>
<div id="address3">More North From 1600 Amphitheatre Parkway Mountain View, CA 94043<</div>

$('#map_canvas').googleMaps({
	markers: [{
        latitude: 	37.4416,
        longitude: -122.1516,
        info: {
            layer: '#address1'
        }
    },{
        latitude: 	37.4516,
        longitude: -122.1616,
        info: {
            layer: '#address2'
        }
    },{
        latitude: 	37.4566,
        longitude: -122.1666,
        info: {
            layer: '#address3'
        }
    }]
});

Control Change

$('#map_canvas').googleMaps({
	controls: {
		type: {
			control: 'GOverviewMapControl'
		},
		zoom: {
			control: 'GSmallZoomControl'
		}
    }
});

Control Position (Left & Right)

• G_ANCHOR_TOP_RIGHT
• G_ANCHOR_BOTTOM_RIGHT
• G_ANCHOR_TOP_LEFT
• G_ANCHOR_BOTTOM_LEFT

$('#map_canvas').googleMaps({
	controls: {
        type: {
            location: 'G_ANCHOR_TOP_LEFT',
        },
        zoom: {
            location: 'G_ANCHOR_TOP_RIGHT',
        }
    }
});

Control Position (X & Y)

$('#map_canvas').googleMaps({
	controls: {
        type: {
            x: 30,
            y: 30
        },
        zoom: {
            x: 30,
            y: 30
        }
    }
});

Control LocalSearch

$('#map_canvas').googleMaps({
	controls: {
		localSearch: true;
	}
});

Control Maptypes

$('#map_canvas').googleMaps({
	mapType: [{ 
        remove: 'G_SATELLITE_MAP' 
    }, { 
        remove: 'G_NORMAL_MAP' 
    }]
});

Polyline Simple

$('#map_canvas').googleMaps({
	polyline: {
	    startLatitude: 	37.4419,
	    endLatitude:	37.4519,
	    endLongitude:	-122.1519,
	    color: 			'#ff0000',
	    pixels: 		2
	},
});

Polyline Geodesic

$('#map_canvas').googleMaps({
	depth: 2,
	geodesic: {
		startLatitude: 40.65642,
		startLongitude: -73.7883,
		endLatitude: 61.1699849,
		endLongitude:-149.94449,
		color: '#ff0000', // Optional
		pixels: 10, // Optional
		opacity: 10 // Optional
	}
});

Layer Simple

$('#map_canvas').googleMaps({
	layer: 'org.wikipedia.en'
});

Geocoding Simple

$('#map_canvas').googleMaps({
	geocode: '320 - 507 West Broadway Vancouver, BC V5Z 0B4'
});

GeoXML RSS

$('#map_canvas').googleMaps({
	latitude: 49.496675,
	longitude: -102.65625,
	depth: 3,
	feed: 'http://api.flickr.com/services/feeds/geo/?g=322338@N20&lang=en-us&format=feed-georss'
});

GeoXML KML

$('#map_canvas').googleMaps({
	latitude: 41.875696,
	longitude: -87.624207,
	feed: 'http://mapgadgets.googlepages.com/cta.kml'
});

Traffic Overlay

$('#map_canvas').googleMaps({
	trafficInfo: true
});

Streetview Overlay

$('#map_canvas').googleMaps({
	streetViewOverlay: true
});

Download

• Normal
• Compressed