Kontroller för Google Maps

Google Maps - Standardkontroller

När den standardmässiga Google Maps-kartan visas, erbjuder den en standarduppsättning kontroller:

• Zoom (Zoom) - Visa en glidare eller "+/-"-knappar för att kontrollera kartans zoomnivå
• Dra (Pan) - Visa kontroller för att dra kartan
• Karttyp (MapType) - Tillåter användaren att växla mellan karttyper (routekarta och satellitvy)
• Gatuvy (Street View) - Visa en gatuvyfigur (Pegman ikon), som kan dras till kartan för att aktivera gatuvy

Google Maps - Mer kontroller

Förutom standardkontroller erbjuder Google Maps också:

• Skala (Scale) - Visa kartans skalningskomponent
• Rotera (Rotate) - Visa en liten cirkulär ikon som tillåter dig att rotera kartan
• Översiktskarta (Overview Map) - Visa en miniatyrbild av översiktskartan, som reflekterar den nuvarande vyporten för den bredare regionen

Du kan specificera vilka kontroller som ska visas när du skapar kartan (inom MapOptions) eller ändra kartans alternativ genom att anropa setOptions().

Google Maps - Inaktivera standardkontroller

Du kanske vill stänga av standardkontrollerna.

För detta, sätt kartans disableDefaultUI-attribut (inom kartvalen) till true:

exempel

var mapOptions {disableDefaultUI: true}

Google Maps - Öppna alla kontroller

Vissa kontroller visas som standard på kartan; andra visas inte, om du inte sätter dem.

Vänligen specificera i kartvalen att lägga till eller ta bort kontroller.

För att göra en kontroll synlig ställ in den till true - för att dölja den ställ in den till false.

Denna exempel öppnar alla kontroller:

exempel

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

Google Maps - Ändra kontroller

Vissa kartkontroller är konfigurerbara.

Du kan ändra kontrollen genom att specificera alternativfältet för kontrollen.

Till exempel specificeras alternativ för att ändra Zoom-kontrollen i zoomControlOptions-fältet. zoomControlOptions-fältet kan innehålla:

• google.maps.ZoomControlStyle.SMALL - Visa mini-zoomkontroll (endast + och - knappar)
• google.maps.ZoomControlStyle.LARGE - Visa standardzoomrullgardin
• google.maps.ZoomControlStyle.DEFAULT - Välj bästa zoomkontroll baserat på enhet och kartstorlek

exempel

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

Observera: Om du vill ändra kontrollen, aktivera den först (sätt den till true).

En annan konfigurerbar kontroll är MapType-kontrollen.

mapTypeControlOptions-fältet specificerar alternativ för att ändra kontrollen. mapTypeControlOptions-fältet kan innehålla:

• google.maps.MapTypeControlStyle.HORIZONTAL_BAR - Visa en knapp för varje karttyp
• google.maps.MapTypeControlStyle.DROPDOWN_MENU - Välj karttyp genom en rullgardin
• google.maps.MapTypeControlStyle.DEFAULT - Visar "standard"-beteende (beroende på skärmstorlek)

exempel

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

Du kan också använda ControlPosition-egenskapen för att placera kontrollen:

exempel

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