Contoh Penggunaan jQuery UI Maps

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" />
nyingspot: Blog Seputar Bisnis Teknologi. Temukan hal menarik tentang bisnis dan teknologi hanya di nyingspot.com
Artikel Lainnya

This website uses cookies.