Contoh Penggunaan jQuery UI Maps

jQuery UI Maps merupakan plugin Google Maps Api berbasis javascript dengan memanfaatkan keunggulan jQuery
341  
       

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]

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>