Google-kartat ohjaimet

Google-kartta - oletuskontrollit

Näyttäessä perusGoogle-karttaa, se tarjoaa oletuskontrollikokoelman:

  • Skaalaus (Zoom) - näyttää liukusäädinnön tai "+/-"-painikkeen kartan skaalatason hallintaan
  • Siirtäminen (Pan) - näyttää siirtokontrollin, jota käytetään kartan siirtämiseen
  • Karttyyppi (MapType) - mahdollistaa käyttäjän vaihtaa karttyyppejä (reitityskartta ja satelliittikartta)
  • Ratikkakuvake (Street View) - näyttää ratikkakuvakkeen (Pegman icon), jonka voit vetää kartalle käyttääksesi ratikkakatselua

Google-kartta - lisää kontrollit

Oletuskontrollien lisäksi Google-kartta tarjoaa myös:

  • Skaala (Scale) - näyttää kartan skaalaelementin
  • Kiertäminen (Rotate) - näyttää pienikokoisen pyöreän kuvakkeen, joka mahdollistaa kartan kiertämisen
  • Yhteenvetokartta (Overview Map) - näyttää pienoiskuvan yhteenvetokartasta, joka heijastaa laajempaa aluetta

Voit määrittää, mitkä kontrollit näytetään kartan luonnosta (MapOptionsissa) tai muuttaa kartan asetuksia setOptions()-kutsulla.

Google-kartta - poista oletuskontrollit

Voisit haluta sulkea oletuskontrollit.

Tässä tapauksessa aseta kartan disableDefaultUI-ominaisuus (karttanäyttöobjektissa) true:ksi:

esimerkki

var mapOptions {disableDefaultUI: true}

Google-kartta - avaa kaikki kontrollit

Jotkut kontrollit näkyvät oletusarvoisesti kartalla; muut eivät näy, ellei aseta niitä näkyviin.

Määritä karttanäyttöobjektissa, mitkä kontrollit lisätään tai poistetaan kartalta.

Aseta kontrolli true:ksi näyttääksesi sen - aseta kontrolli false:ksi piilottaaksesi sen.

Tämä esimerkki avaa kaikki kontrollit:

esimerkki

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

Google-kartat - Muokkaa ohjainta

Jotkut karttojen ohjaimet ovat konfiguroitavia.

Voit muokata ohjainta määrittämällä valitsimien kentän.

Esimerkiksi, zoomControlOptions-kentässä määritellään valitsimien muokkausvaihtoehdot Zoom-ohjaimelle. zoomControlOptions-kentässä voi olla:

  • google.maps.ZoomControlStyle.SMALL - Näytä pieni zoomasäädin (vain + ja - painikkeet)
  • google.maps.ZoomControlStyle.LARGE - Näytä peruszoomasäädin
  • google.maps.ZoomControlStyle.DEFAULT - Valitse paras zoom-ohjain laitteelle ja kartan koosta riippuen

esimerkki

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

Huomioitavaa: Jos haluat muokata ohjainta, ota ensin se käyttöön (aseta arvoksi true).

Toinen konfiguroitava ohjain on MapType-ohjain.

mapTypeControlOptions-kentässä määritellään valitsimien muokkausvaihtoehdot. mapTypeControlOptions-kentässä voi olla:

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR - Näytä painike jokaiselle kartatyypille
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU - Valitse kartatyyppi pudotusvalikosta
  • google.maps.MapTypeControlStyle.DEFAULT - Näyttää "oletus"-toiminnan (riippuen näytön koosta)

esimerkki

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

Voit myös käyttää ControlPosition-ominaisuutta ohjainten sijoittamiseen:

esimerkki

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