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.
gMap 2.1.5 (includes source code and minified version)
Fork it on GitHub and submit bug reports and pull requests.
This will be replaced with the Google Map.
$('#map').gMap();
* This map will show your current location if your browser supports the Geolocation API and you allow it to run.
This will be replaced with the Google Map.
$('#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 } });
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 :('); }); }
This will be replaced with the Google Map.
$('#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" } ] });
This will be replaced with the Google Map.
$("#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 });
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 }
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' } );