jQuery UI Maps merupakan plugin Google Maps Api berbasis javascript dengan memanfaatkan keunggulan jQuery
#jquery ui map v3. Tutorial

= Beginner =

Add the mandatory JavaScript libraries to your HTML HEAD tag.
If you are developing a web site for mobile content add:

If you are developing a web site without any mobile device support add:

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>

[https://jquery-ui-map.googlecode.com/svn/trunk/demos/google-maps-mobile-boilerplate.html View boiler plate template ] or [https://code.google.com/p/jquery-ui-map/source/browse/trunk/demos/google-maps-mobile-boilerplate.html view boiler plate template source]

=== 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("pagecreate", 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

[code]
<a data-ajax="false" href="/map.html">Go to my map</a>
[/code]

= 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 https://code.google.com/apis/maps/documentation/javascript/overlays.html

===jquery.ui.map.services===

Used for Directions, Distance Matrix, Elevation, Geocoding, Places and
Street View, see https://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

[code]
( function($) {

$.extend($.ui.gmap.prototype, {

theBeatles : function() {
alert(‘Helter skelter’);
},

alertSomething: function(a) {
alert(a);
}

});

} (jQuery) );
[/code]

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 use [https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/docs/reference.html MarkerWithLabel] this is how you would do it:

[code]
( 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) );
[/code]

However to use the MarkerWithLabel you just need to add a third parameter in the addMarker method (That goes for any extended google.maps.Marker)

[code]
$(‘#map_canvas’).gmap(‘addMarker’, { ‘position’: ‘58.3426606750, 18.0736160278’ }, function() {}, MarkerWithLabel);
[/code]

Or do something during the widget initialization. This will geocode the address option property and call the option callback property.

[code]
( 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) );
[/code]

Create an autocomplete function with Google Gecoder. This example requires jQuery UI.

[code]
( 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) );
[/code]

Call the autocomplete like this

[code]
$(‘#map_canvas’).gmap(‘autocomplete’, ‘locality’, function(ui) {
// ui.item.position <– selected position (google.maps.LatLng)
});
[/code]

Remember to have an input element with id ‘locality’
[code]
<input id="locality" type="text" />
[/code]