Google Maps Controleknoppen

Google Maps - Standaard knoppen

Wanneer je de standaard Google Maps weergeeft, biedt het de standaard set van knoppen:

• Zoomen (Zoom) - Toont een schuifregelaar of "+/-" knoppen om het zoomniveau van de kaart te controleren
• Verschuiven (Pan) - Toont de knoppen die gebruikt worden om de kaart te verschuiven
• Kaarttype (MapType) - Laat gebruikers wisselen tussen kaarttypen (route en satelliet)
• Stratenbeeld (Street View) - Toont een stratenbeeldpictogram (Pegman icon), dat je kunt verslepen naar de kaart om stratenbeeld in te schakelen

Google Maps - Meer knoppen

Naast de standaard knoppen biedt Google Maps ook:

• Schaal (Scale) - Toont het element van de schaal van de kaart
• Draaien (Rotate) - Toont een klein cirkelvormig pictogram dat je kunt draaien om de kaart te draaien
• Overzichtskaart (Overview Map) - Toont een minikaart met een overzicht, die de huidige kaartweergave van een bredere regio weergeeft

Je kunt aangeven welke knoppen je wilt weergeven bij het maken van de kaart (binnen MapOptions) of de opties van de kaart wijzigen door setOptions() aan te roepen.

Google Maps - Uitschakelen van standaard knoppen

Je zou de standaard knoppen mogelijk willen uitschakelen.

Voor dit doel, stel de disableDefaultUI-eigenschap van de kaart (binnen het object van de kaartopties) in op true:

voorbeeld

var mapOptions {disableDefaultUI: true}

Google Maps - Open alle knoppen

Sommige knoppen verschijnen standaard op de kaart; anderen verschijnen niet, tenzij je ze instelt.

Geef in het object van de kaartopties aan welke knoppen je wilt toevoegen of verwijderen aan de kaart.

Knoppen instellen op true maakt ze zichtbaar - instellen op false verbergt ze.

Deze voorbeeld opent alle knoppen:

voorbeeld

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

Google Maps - Knoppen wijzigen

Sommige kaartknoppen zijn instelbaar.

U kunt de opties van de knop wijzigen door het veld opties van de knop te specificeren.

Bijvoorbeeld, in het veld zoomControlOptions zijn de opties gedefinieerd die worden gebruikt om de Zoom-knop te wijzigen. Het veld zoomControlOptions kan bevatten:

• google.maps.ZoomControlStyle.SMALL - Toont een mini zoomknop (alleen + en - knoppen)
• google.maps.ZoomControlStyle.LARGE - Toont de standaard zoomschuifregelaar
• google.maps.ZoomControlStyle.DEFAULT - Kiest de beste zoomknop op basis van het apparaat en de kaartgrootte

voorbeeld

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

Opmerking: Als u de knop wilt wijzigen, moet u deze eerst inschakelen (zet deze op true).

Een andere instelbare knop is de MapType-knop.

Het veld mapTypeControlOptions definieert de opties die worden gebruikt om de knop te wijzigen. Het veld mapTypeControlOptions kan bevatten:

• google.maps.MapTypeControlStyle.HORIZONTAL_BAR - Toont een knop voor elk kaarttype
• google.maps.MapTypeControlStyle.DROPDOWN_MENU - Selecteer de kaarttype via een keuzelijst
• google.maps.MapTypeControlStyle.DEFAULT - Toont het "standaard" gedrag (afhankelijk van het schermformaat)

voorbeeld

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

U kunt ook de eigenschap ControlPosition gebruiken om de positie van de knop te bepalen:

voorbeeld

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