JS Tutorial
- Overview
- Documents
- Demos
The Google Map version 3 plugin for jQuery and jQM takes away some of the head aches from working with the Google Map API. Instead of having to use Google event listeners for simple events like click, you can use jQuery click events on the map and markers.
It is also very flexible, highly customizable, lightweight (3.2kB or 3.9kB for the full) and works out of the box with jQuery mobile. But one of its best features (atleast for SEO people) is that you can populate a map from microformats, RDFa or microdata on your site, which can be used as a fallback when a user doesn't have javascript enabled.
Add the mandatory JavaScript libraries to your HTML HEAD tag. If you are developing a web site for mobile content add:
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript" ></script> <script src="PATH_TO_PLUGIN/jquery.ui.map.full.min.js" type="text/javascript"></script>
If you are developing a web site without any mobile device support add:
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script> <script src="PATH_TO_PLUGIN/jquery.ui.map.full.min.js" type="text/javascript"></script>
To add a map just add
<script type="text/javascript">
$(function() {
// Also works with: var yourStartLatLng = '59.3426606750, 18.0736160278';
var yourStartLatLng = new google.maps.LatLng(59.3426606750, 18.0736160278);
$('#map_canvas').gmap({'center': yourStartLatLng});
});
</script>
and add a DIV tag within the BODY section of your HTML document
<div id="map_canvas" style="width:250px;height:250px"></div>
Help, my map is rendered incorrectly! (jQM)
If you use Ajax the map can unfortunately render incorrect. To prevent this you can:
- Refresh the map
<script type="text/javascript">
$('#page_id').live("pageshow", function() {
$('#map_canvas').gmap('refresh');
});
$('#page_id').live("pageinit", function() {
$('#map_canvas').gmap({'center': '59.3426606750, 18.0736160278'});
});
</script>
- Show the map in the pageshow event
<script type="text/javascript">
$('#page_id').live("pageshow", function() {
$('#map_canvas').gmap({'center': '59.3426606750, 18.0736160278'});
});
</script>
- Not use Ajax
<script type="text/javascript"> $.mobile.ajaxEnabled = false; </script>
or
<a data-ajax="false" href="/map.html">Go to my map</a>
Advanced
In v3 the plugin has been split up into 4 JavaScript files to better reflect the Google maps v.3 API:
jquery.ui.map
Used when you need minimal map features e.g. adding a marker to a map, loading markers from JSON.
jquery.ui.map.overlays
Used for KML and GeoRSS Layers and Fusion Table Layers, see http://code.google.com/apis/maps/documentation/javascript/overlays.html
jquery.ui.map.services
Used for Directions, Distance Matrix, Elevation, Geocoding, Places and Street View, seehttp://code.google.com/apis/maps/documentation/javascript/services.html
jquery.ui.map.extensions
Used for your extensions and modifications of existing methods
This is how you create a new method in the extension file
( function($) {
$.extend($.ui.gmap.prototype, {
theBeatles : function() {
alert('Helter skelter');
},
alertSomething: function(a) {
alert(a);
}
});
} (jQuery) );
If you would like to modify existing methods you can do that too. Let's say you would like to modify the addMarker method to only useMarkerWithLabel this is how you would do it:
( function($) {
$.extend($.ui.gmap.prototype, {
// We override the addMarker method
addMarker: function(markerOptions, callback) {
var marker = new google.maps.MarkerWithLabel( jQuery.extend({'map': this.get('map'), 'bounds': false}, markerOptions) );
var markers = this.get('markers');
if ( marker.id ) {
markers[marker.id] = marker;
} else {
markers.push(marker);
}
if ( marker.bounds ) {
this.addBounds(marker.getPosition());
}
this._call(callback, this.get('map'), marker);
return $(marker);
}
});
} (jQuery) );
However to use the MarkerWithLabel you just need to add a the property 'marker' in the addMarker method (That goes for any extended google.maps.Marker)
$('#map_canvas').gmap('addMarker', { 'position': '58.3426606750, 18.0736160278', 'marker': MarkerWithLabel }, function() {});
Or do something during the widget initialization. This will geocode the address option property and call the option callback property.
( function($) {
$.extend($.ui.gmap.prototype, {
// This fires after the widgets create method
_init: function() {
var self = this;
// If you add the property option address in the constructor it will be geocoded
if ( this.options.address && this.options.callback ) {
this.search({'address': this.options.address}, function(results, status) {
if ( status === 'OK' ) {
self._call(self.options.callback, results, status);
}
});
}
}
});
} (jQuery) );
Create an autocomplete function with Google Gecoder. This example requires jQuery UI.
( function($) {
$.extend($.ui.gmap.prototype, {
/**
* Autocomplete using Google Geocoder
* @param panel:string/node/jquery
* @param callback:function(ui) called whenever something is selected
*/
autocomplete: function(panel, callback) {
var self = this;
$(this._unwrap(panel)).autocomplete({
source: function( request, response ) {
self.search({'address':request.term}, function(results, status) {
if ( status === 'OK' ) {
response( $.map( results, function(item) {
return { label: item.formatted_address, value: item.formatted_address, position: item.geometry.location }
}));
}
});
},
minLength: 3,
select: function(event, ui) {
self._call(callback, ui);
},
open: function() { $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" ); },
close: function() { $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" ); }
});
}
});
} (jQuery) );
Call the autocomplete like this
$('#map_canvas').gmap('autocomplete', 'locality', function(ui) {
// ui.item.position <-- selected position (google.maps.LatLng)
});
Remember to have an input element with id 'locality'
<input id="locality" type="text" />
jQuery mobile demo
Demo
- Benchmark
- Basic example
- Streetview example
- Geolocation example
- Load Microformats example
- Load RDFa example
- Load Microdata example
- Load markers by data-attribute (similar to jMapping)
- Load JSON example
- Load Fusion data example
- Geo search example
- Filter by marker property value
- Using MarkerClusterer
- Extending the plugin with pagination
