Come mettere la nuova interfaccia delle Google Maps sul nostro sito

Nuova interfaccia Google Maps

Da quando Google ha aggiornato esteticamente le Google Maps con i controlli tipo quello indicato nella figura qui di fianco, noi che facciamo siti Web eravamo rimasti un po’ amareggiati dal fatto che sui nostri siti eravamo rimasti con quelle Google Maps con un look così vecchio.

Fortunatamente, da mercoledì mattina non è più così. In un post sul blog ufficiale, Google ha comunicato la possibilità di avere la nuova interfaccia anche sulle mappe create da noi.

In pratica, per aggiungere i nuovi controlli in “stile 3D” e anche i comportamenti associati di mouse e tastiera, è sufficiente una riga di codice:

  // Create a map.
  var map = new GMap2(myMapDiv);
  // Give it the maps.google.com experience.
  map.setUIToDefault();

La nuova funzione, presente dalla versione 2.146 delle Google Maps è setUIToDefault().

Questa funzione inoltre garantisce che se Google farà degli ulteriori aggiornamenti all’interfaccia, questi saranno automaticamente trasmessi anche sul nostro sito.

Questa funzione inoltre modificherà i controlli secondo le dimenzioni della mappa. Per mappe di dimensioni maggiori di 300 x 400, i controlli di default sono i seguenti:

• GLargeMapControl3D
• GMapTypeControl
• GScaleControl

Per mappe di dimensioni 00 x 400 o più piccole, i controlli di default sono:

• GSmallZoomControl3D
• GMenuMapTypeControl

Entrambi abilitano lo zoom con la rotella del mouse, lo zoom con il doppio click e i controlli tramite tastiera GKeyboardHandler alla mappa.

Volendo, poi si può personalizzare l’interfaccia secondo i nostri gusti. Se vogliamo disattivare lo zoom con la rotella del mouse, possiamo istanziare l’oggetto  GMapUIOptions e aggiustarne le opzioni come preferiamo. Ad esempio:

  // Get the default GMapUIOptions.
  var uiOptions = map.getDefaultUI();
  // Disable scroll wheel zoom.
  uiOptions.zoom.scrollwheel = false;
  // Now set the map's UI with the tweaked options.
  map.setUI(uiOptions);

Oltre a questo, si può anche accedere direttamente ai nuovi controlli 3D usati su maps.google.com:

• GLargeMapControl3D
• GSmallZoomControl3D

La documentazione completa delle funzioni, della classe GMapUIOptions e di tutti i controlli, sono disponibili su: Google Maps API Reference.

Per il momento non ci sono post correlati.

Tags: google maps