Google Maps-API - Beispiel für Kartentypen

Google Maps API - Beispiel für Kartentypen

Google Maps API unterstützt vier Kartentypen:

ROADMAP - Zeigt die normale Straße / Straßenkarte an (Standardkartentyp).
TERRAIN - Normale Straßen- / Straßenkarte basierend auf Geländeinformationen anzeigen.
SATELLITE - Nur Satellitenbilder anzeigen.
HYBRID - Gemischte Normal- und Satellitenansichten, zeigen Straßen- / Straßenansichten über den Satellitenbildern an.

Note
Normalerweise verwenden Sie entweder "ROADMAP" oder "HYBRID", nicht viele Anwendungsfälle für "TERRAIN" und "SATELLITE". s “.

1. Kartentypen

In diesemMapTypeId API reference finden Sie alle verfügbaren Kartentypen.

Sie können die Kartentypen beim Erstellen von Google Maps folgendermaßen ändern:

    var latlng = new google.maps.LatLng(37.4220279, -122.0840677);
    var myOptions = {
      zoom: 13,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP   //change here
    };

    var map = new google.maps.Map(document.getElementById("map_container"),myOptions);

Oder ändern Sie es dynamisch wie folgt:

    var map = new google.maps.Map(document.getElementById("map_container"),myOptions);

    map.setMapTypeId(google.maps.MapTypeId.HYBRID);

2. Steuerungsoptionen für Kartentypen

Außerdem können Sie die Position und den Stil des „Map Type Controllers“ ändern. Der Kartentyp-Controller ist eine kleine Box oder ein Dropdown-Menü auf der Karte, sodass der Benutzer den Kartentyp dynamisch ändern kann.

Siehe Abbildung :

google map controls

3 Steuerelemente für Kartentypen werden unterstützt:

STANDARD - Standardmäßig variieren die Anzeigeoptionen je nach Fenstergröße und anderen Faktoren.
DROPDOWN_MENU - Zeigt Optionen in einem Dropdown-Menü an.
HORIZONTAL_BAR - Zeigt Optionen als Schaltflächen an und richtet sie horizontal aus.

Konfigurieren Sie den Steuerungsstil wie folgt:

    var latlng = new google.maps.LatLng(37.4220279, -122.0840677);
    var myOptions = {
      zoom: 13,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControlOptions: {
     style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
      }
    };

Darüber hinaus können Sie anpassen, wo der Kartentyp-Controller angezeigt werden soll, und alle verfügbaren Positionen inGoogle Map control position reference angeben.

    var latlng = new google.maps.LatLng(37.4220279, -122.0840677);
    var myOptions = {
      zoom: 13,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControlOptions: {
     style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
     position: google.maps.ControlPosition.BOTTOM_RIGHT
      }
    };

In den obigen Codefragmenten werden die Steuerelemente unten rechts angezeigt.

3. Beispiel für Kartentypen

Ein vollständiges Beispiel für die Anzeige des Standorts von Google Office (1600 Amphitheatre Parkway Mountain View, CA 94043) auf Google Maps:

Kartentyp = HYBRID
Map Type Control = DROPDOWN_MENU
Kontrollposition für Kartentyp = TOP_CENTER
Fügen Sie eine Markierung hinzu, um den Ort auf der Karte zu identifizieren.



Google Maps API - Map Type

Ergebnis

Laden Sie dieses Beispiel herunter.

TOC

Google Maps-API - Beispiel für Kartentypen