API Google Maps - Exemple de types de carte

L'API Google Maps prend en charge quatre types de cartes:

FEUILLE DE ROUTE - Affiche une carte de rue / route normale (type de carte par défaut).
TERRAIN - Affiche une carte routière / routière normale en fonction des informations sur le terrain.
SATELLITE - Afficher uniquement les images satellites.
HYBRIDE - Vues normales et satellites mixtes, affichez les vues rue / route sur les images satellites.

Note
Normalement, vous utilisez simplement «ROADMAP» ou «HYBRID», pas beaucoup de cas d'utilisation pour «TERRAIN» et «SATELLITE “.

1. Types de carte

Reportez-vous à ceMapTypeId API reference pour tous les types de carte disponibles.

Vous pouvez modifier les types de carte lors de la création de Google Maps comme ceci:

    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);

Ou changez-le dynamiquement comme ceci:

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

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

2. Options de contrôle des types de carte

En outre, vous pouvez modifier la position et le style du «contrôleur de type de carte». Le contrôleur de type de carte est une petite boîte ou un menu déroulant affiché sur la carte, afin que l'utilisateur puisse changer le type de carte de manière dynamique.

Voir figure:

google map controls

3 Les contrôles de type de carte sont pris en charge:

PAR DÉFAUT - Par défaut, les options d'affichage varient en fonction de la taille de la fenêtre et d'autres facteurs.
DROPDOWN_MENU - Afficher les options dans un menu déroulant.
HORIZONTAL_BAR - Affichez les options sous forme de boutons et alignez-les horizontalement.

Configurez le style de contrôle comme ceci:

    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
      }
    };

En outre, vous pouvez personnaliser où afficher le contrôleur de type de carte, reportez-vous à toutes les positions disponibles dans ceGoogle Map control position reference.

    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
      }
    };

Dans les extraits de code ci-dessus, les contrôles seront affichés en bas à droite,

3. Exemple de types de carte

Un exemple complet pour afficher l'emplacement du bureau Google (1600 Amphitheatre Parkway Mountain View, CA 94043) sur Google Maps:

Type de carte = HYBRIDE
Contrôle de type de carte = DROPDOWN_MENU
Position de contrôle du type de carte = TOP_CENTER
Ajoutez un marqueur pour identifier l'emplacement sur la carte.



Google Maps API - Map Type

Résultat

Téléchargez cet exemple.

TOC

API Google Maps - Exemple de types de carte