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.