Controlli di Google Maps

Google Maps - Controlli predefiniti

Quando si visualizza la mappa Google standard, fornisce un set di controlli predefiniti:

• Zoom (Zoom) - Mostra una barra di scorrimento o pulsanti "+/-" per controllare il livello di zoom della mappa
• Scorrimento (Pan) - Mostra il controllo di scorrimento per spostare la mappa
• Tipo di mappa (MapType) - Permette agli utenti di passare tra i tipi di mappa (pianimetria e immagine satellitare)
• Street View - Mostra l'icona del piccolo uomo di Street View (Pegman icon), che puoi trascinare sulla mappa per abilitare Street View

Google Maps - Altri controlli

Oltre ai controlli predefiniti, Google Maps offre anche:

• Scala (Scale) - Mostra l'elemento di scala della mappa
• Rotazione (Rotate) - Mostra un piccolo icona circolare che ti permette di ruotare la mappa
• Mappa panoramica (Overview Map) - Mostra una panoramica della mappa in miniature, che riflette la vista corrente della mappa su una regione più ampia

Puoi specificare quali controlli mostrare quando crei la mappa (nelle MapOptions) o modificare le opzioni della mappa chiamando setOptions().

Google Maps - Disabilita i controlli predefiniti

Potresti voler disabilitare i controlli predefiniti.

Per questo, impostare l'attributo disableDefaultUI della mappa (nello oggetto delle opzioni della mappa) su true:

istanza

var mapOptions {disableDefaultUI: true}

Google Maps - Apri tutti i controlli

Alcuni controlli appaiono di default sulla mappa; altri non compaiono, a meno che non li imposti tu stesso.

Specificare nell'oggetto delle opzioni della mappa quali controlli aggiungere o rimuovere dalla mappa.

Impostare il controllo su true lo rende visibile - impostare il controllo su false lo nasconde.

Questo esempio apre tutti i controlli:

istanza

var mapOptions {
  panControl: true,
  zoomControl: true,
  mapTypeControl: true,
  scaleControl: true,
  streetViewControl: true,
  overviewMapControl: true,
  rotateControl: true
}

Google Maps - Modifica dei controlli

Alcuni controlli della mappa sono configurabili.

Puoi modificare il controllo specificando il campo delle opzioni del controllo.

Ad esempio, nel campo zoomControlOptions sono definite le opzioni utilizzate per modificare il controllo di zoom. Il campo zoomControlOptions può includere:

• google.maps.ZoomControlStyle.SMALL - Mostra il controllo di zoom mini (solo pulsanti + e -)
• google.maps.ZoomControlStyle.LARGE - Mostra il controllo di zoom a slitta standard
• google.maps.ZoomControlStyle.DEFAULT - Scegli il miglior controllo di zoom in base all'hardware e alle dimensioni della mappa

istanza

zoomControl: true,
zoomControlOptions: {
    style: google.maps.ZoomControlStyle.SMALL
}

Attenzione: se si desidera modificare il controllo, abilitalo prima (impostalo su true).

Un altro controllo configurabile è il controllo MapType.

Il campo mapTypeControlOptions definisce le opzioni utilizzate per modificare il controllo. Il campo mapTypeControlOptions può includere:

• 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' (a seconda delle dimensioni dello schermo)

istanza

mapTypeControl: true,
mapTypeControlOptions: {
  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}

Puoi anche utilizzare l'attributo ControlPosition per posizionare il controllo:

istanza

mapTypeControl: true,
mapTypeControlOptions: {
  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
  position: google.maps.ControlPosition.TOP_CENTER
}