Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 28 di 32
  • livello principiante
Indice lezioni

Google Maps

Utilizzare indicazioni geografiche, recuperare coordinate e visualizzare mappe
Utilizzare indicazioni geografiche, recuperare coordinate e visualizzare mappe
Link copiato negli appunti

Un modo semplice per ottenere una mappa personalizzata consiste nell'utilizzare la gemma google4r-maps capace di generare il codice HTML necessario alla visualizzazione di una mappa di Google via GMap2. Per poter utilizzare questo servizio occorre registrarsi gratuitamente al servizio di Google.

Iniziamo con un semplice esempio creando un oggetto GMap2, in Irb:

>> require 'rubygems'
>> require 'google4r/maps'
>> map = Google4R::Maps::GMap2.new("map", "my-map")

=> #<Google4R::Maps::GMap2:0xb7a8c174 @dragging_enabled=true, @onload_js=nil, 
@continuous_zoom_enabled=false, @markers=[], @name="map", @zoom=:auto, 
@controls=[:large_map, :scale, :map_type], @double_click_zoom_enabled=false, @icons=[], 
@map_type=:normal, @info_window_enabled=true, @div_id="my-map", @center=:auto,
@options={:register_gunload=>true}>

Dove gli argomenti passati a new rappresentano rispettivamente il nome della variabile usata nel codice JavaScript e l'id del tag div che conterrà il codice HTML generato. Dopo l'inizializzazione non resta che centrare la mappa utilizzando il metodo center che prende come argomento le coordinate del luogo, ad esempio:

>> map.center = [ 41.88, 12.47 ]
=> [41.88, 12.47]

È possibile anche controllare tutti i parametri di una mappa come ad esempio il livello di zoom, il tipo di mappa, e le dimensioni. Per generare il codice HTML da utilizzare in una pagina Web va chiamato il metodo to_html che darà in output qualcosa del genere:

>> puts map.to_html
<div id="my-map"></div>
<script type="text/javascript" charset="utf-8">
//<![CDATA[
/* Create a variable to hold the GMap2 instance and the icons in. */
var map;
var map_icons;

function map_loader() {
/* Create GMap2 instance. */
map = new GMap2(document.getElementById("my-map"), {  });
map.setCenter(new GLatLng(41.88, 12.47), 13);

/* Set map options. */
map.setMapType(G_NORMAL_MAP);
map.enableDragging();
map.enableInfoWindow();
map.disableDoubleClickZoom();
map.disableContinuousZoom();

/* Add controls to the map. */
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
map.addControl(new GMapTypeControl());

/* Create global variable holding all icons. */
map_icons = new Array();

/* Add markers to the map. */

/* User supplied Javascript */

}

if (window.addEventListener) { /* not MSIE */
  window.addEventListener('load', function() { map_loader(); }, false);
} else { /* MSIE */
  window.attachEvent('onload', function() { map_loader(); }, false);
}

/* Optional Javascript */
if (window.addEventListener) { /* not MSIE */
  window.addEventListener('unload', function() { GUnload(); }, false);
} else { /* MSIE */
  window.attachEvent('onunload', function() { GUnload(); }, false);
}
// ]]>
</script>
=> nil

Sono gestiti anche i marker che possono essere visualizzati sulla mappa. Vanno creati con il metodo create_marker, come argomenti vanno passate le coordinate, e configurati attraverso i metodi icon, title, info_window_html, etc. Ad esempio:

>> marker = map.create_marker([map.center[0] + 1, map.center[1] + 2])
=> #<Google4R::Maps::GMarker:0xb7a60b78 @point=[42.88, 14.47], @clickable=true, @bounce_gravity=1, @drag_cross_move=false, @bouncy=false, @onclick_handlers=[], @draggable=false>
>> marker.title = "Esempio"
=> "Esempio"
>> marker.info_window_html = "Esempio di <b>Marker</b>"
=> "Esempio di <b>Marker</b>."

Per ottenere le coordinate di un luogo si può utilizzare la classe GeoCoder che permette di risalire alle coordinate (e ad altre utili informazioni) a partire da un indirizzo:

>> require 'rubygems'
>> require 'google4r/maps'
>> google_key = 'GOOGLE_MAPS_API'
>> geocoder = Google4R::Maps::Geocoder.new(google_key)
>> res = geocoder.query("Piazza del Popolo, Roma")

=> {"Status"=>{"code"=>200, "request"=>"geocode"}, "name"=>"Piazza del Popolo, Roma", "Placemark"=>[{"AddressDetails"=>{"Country"=>{"AdministrativeArea"=>{"SubAdministrativeArea"=>{"Locality"=>{"LocalityName"=>"Roma", "Thoroughfare"=>{"ThoroughfareName"=>"Piazza del Popolo"}}, "SubAdministrativeAreaName"=>"Roma"}, "AdministrativeAreaName"=>"Lazio"}, "CountryNameCode"=>"IT"}, "Accuracy"=>6}, "id"=>"p1", "Point"=>{"coordinates"=>[12.476451, 41.910285, 0]}, "address"=>"Piazza del Popolo, Roma, Roma (Lazio), Italy"}]} 

Quindi si può accedere alle informazioni attraverso i valori dell'hash restituito, ad esempio, per ottenere le coordinate.

>> pm = res["Placemark"][0]
>> pm["Point"]["coordinates"]
[12.476451, 41.910285, 0]

Ovviamente questi valori possono essere passati a center per costruire una mappa come abbiamo visto prima.


Ti consigliamo anche