Una mappa di Google - con il set di controllo di default:
Google Maps - i controlli predefiniti
Quando si mostra una mappa standard di Google, si tratta con il set di controllo di default:
- Zoom - visualizza un cursore o "+/-" pulsanti per controllare il livello di zoom della mappa
- Pan - visualizza un controllo pan per il panning la mappa
- Maptype - consente la commutazione utente tra tipi di mappe (roadmap and satellite)
- Street View - visualizza un'icona Pegman che può essere trascinato la mappa per consentire Street View
Google Maps - Altri controlli
Oltre ai controlli di default, Google Maps ha anche:
- Scale - mostra un elemento di carta in scala
- Ruota - visualizza una piccola icona circolare che consente di ruotare le mappe
- Descrizione Mappa - visualizza una mappa panoramica di miniature che riflette la finestra corrente della mappa all'interno di una zona più ampia
È possibile specificare che controlla per mostrare quando si crea la mappa (inside MapOptions) o chiamando setOptions() per modificare le opzioni della mappa.
Google Maps - Disattivazione i controlli predefiniti
È invece potrebbe desiderare di disattivare i controlli predefiniti.
Per fare ciò, impostare la proprietà della mappa disableDefaultUI (all'interno delle opzioni Mappa oggetto) su true:
Google Maps - Accendere tutti i controlli
Alcuni controlli vengono visualizzati sulla mappa di default; mentre altri non verranno visualizzati a meno che non li imposta.
Aggiunta o rimozione di controlli dalla mappa viene specificato nella mappa opzioni oggetto.
Impostare il controllo su true per renderlo visibile - impostare il controllo su false per nasconderlo.
Il seguente esempio si "on" tutti i controlli:
Esempio
panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true Prova tu stesso " Google Maps - Controlli Modifica
Molti dei controlli della mappa sono configurabili.
I controlli possono essere modificati specificando campi opzioni di controllo.
Ad esempio, le opzioni per la modifica di un controllo Zoom sono specificati nel campo zoomControlOptions. Il campo zoomControlOptions può contenere:
- google.maps.ZoomControlStyle.SMALL - mostra un controllo mini-zoom (solo tasti + e -)
- google.maps.ZoomControlStyle.LARGE - visualizza il controllo standard di scorrimento dello zoom
- google.maps.ZoomControlStyle.DEFAULT - sceglie il miglior controllo dello zoom sulla base del dispositivo e la dimensione della mappa
Esempio
zoomControl:true,
zoomControlOptions: {
style:google.maps.ZoomControlStyle.SMALL
}
Prova tu stesso " Note: Se si modifica un controllo, consentire sempre il controllo prima (set it to true) .
Un altro controllo configurabile è il controllo maptype.
Opzioni per la modifica di un controllo sono specificate nel campo mapTypeControlOptions. Il campo mapTypeControlOptions può contenere ::
- google.maps.MapTypeControlStyle.HORIZONTAL_BAR - Display un pulsante per ogni tipo di mappa
- google.maps.MapTypeControlStyle.DROPDOWN_MENU - selezionare il tipo di mappa tramite un menu a discesa
- google.maps.MapTypeControlStyle.DEFAULT - visualizza il "default" comportamento (depends on screen size)
Esempio
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
} Prova tu stesso " È inoltre possibile posizionare un controllo, con la proprietà ControlPosition:
Esempio
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.TOP_CENTER
} Prova tu stesso " Google Maps - controlli personalizzati
Creare un controllo personalizzato che porta sempre di nuovo a Londra, quando si fa clic (if the map is dragged) :
Esempio
controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'yellow';
controlUI.style.border='1px solid';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Set map to London';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily='Arial,sans-serif';
controlText.style.fontSize='12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Home<b>'
controlUI.appendChild(controlText); Prova tu stesso " Google Maps - Controlli di riferimento
API di Google Maps di riferimento .