Controlli di Google Maps
Google Maps - I controlli predefiniti
Quando si mostra una mappa Google standard, viene fornita con il set di controlli predefinito:
- Zoom: visualizza un dispositivo di scorrimento o pulsanti "+/-" per controllare il livello di zoom della mappa
- Panoramica: visualizza un controllo panoramica per la panoramica della mappa
- MapType: consente all'utente di passare da un tipo di mappa all'altro (roadmap e satellite)
- Street View: mostra un'icona Pegman che può essere trascinata sulla mappa per abilitare Street View
Google Maps - Più controlli
Oltre ai controlli predefiniti, Google Maps ha anche:
- Scala: visualizza un elemento di scala della mappa
- Ruota: visualizza una piccola icona circolare che consente di ruotare le mappe
- Mappa panoramica: visualizza una mappa panoramica in miniatura che riflette la visualizzazione della mappa corrente all'interno di un'area più ampia
Puoi specificare quali controlli mostrare durante la creazione della mappa (all'interno di MapOptions) o chiamando setOptions() per modificare le opzioni della mappa.
Google Maps - Disabilitazione dei controlli predefiniti
Potresti invece voler disattivare i controlli predefiniti.
Per fare ciò, imposta la proprietà disableDefaultUI della mappa (all'interno dell'oggetto Opzioni mappa) su true:
Esempio
var mapOptions {disableDefaultUI: true}
Google Maps - Attiva tutti i controlli
Alcuni controlli vengono visualizzati sulla mappa per impostazione predefinita; mentre altri non appariranno a meno che non li imposti.
L'aggiunta o la rimozione di controlli dalla mappa è specificata nell'oggetto Opzioni mappa.
Imposta il controllo su true per renderlo visibile: imposta il controllo su false per nasconderlo.
L'esempio seguente attiva tutti i controlli:
Esempio
var mapOptions {
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
rotateControl: true
}
Google Maps - Modifica dei controlli
Molti dei controlli della mappa sono configurabili.
I controlli possono essere modificati specificando i campi delle opzioni di controllo.
Ad esempio, le opzioni per modificare un controllo Zoom sono specificate nel campo zoomControlOptions. Il campo zoomControlOptions può contenere:
- google.maps.ZoomControlStyle.SMALL - mostra un controllo mini-zoom (solo pulsanti + e -)
- google.maps.ZoomControlStyle.LARGE - mostra il controllo del dispositivo di scorrimento dello zoom standard
- google.maps.ZoomControlStyle.DEFAULT: seleziona il miglior controllo dello zoom in base al dispositivo e alle dimensioni della mappa
Esempio
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
Nota: se modifichi un controllo, abilita sempre prima il controllo (impostalo su true).
Un altro controllo configurabile è il controllo MapType.
Le opzioni per la modifica di un controllo sono specificate nel campo mapTypeControlOptions. Il campo mapTypeControlOptions può contenere:
- google.maps.MapTypeControlStyle.HORIZONTAL_BAR - mostra un pulsante per ogni tipo di mappa
- google.maps.MapTypeControlStyle.DROPDOWN_MENU - seleziona il tipo di mappa tramite un menu a discesa
- google.maps.MapTypeControlStyle.DEFAULT - mostra il comportamento "predefinito" (dipende dalle dimensioni dello schermo)
Esempio
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
Puoi anche posizionare un controllo, con la proprietà ControlPosition:
Esempio
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_CENTER
}