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
<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 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
( 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 use [https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/docs/reference.html MarkerWithLabel] 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 third parameter in the addMarker method (That goes for any extended google.maps.Marker)
$('#map_canvas').gmap('addMarker', { 'position': '58.3426606750, 18.0736160278' }, function() {}, MarkerWithLabel);
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" />