Ajouter un type de carte - V3

La méthode StyledMapType permet d’ajouter à la carte d’autres types de vues possibles.

Il faut dans un premier temps déclarer les paramètres et options du nouveau style (ici mon_style) comme par exemple featureType, elementType, ….

Lors du chargement de la carte, renseigner les différents types cartes de carte qui seront disponibles via les boutons de navigation (ici : plan et axes routiers) via le paramètre mapTypeIds.

Le paramètre mapTypeId sert quant à lui à préciser quel type de carte charger par défaut.

Dans cet exemple, nous affichons les axes routiers en vert et les espaces entre ces axes en noir.

<script type="text/javascript">

  /* Déclaration des variables  */
  var map;
  var paris = new google.maps.LatLng(48.8566667, 2.3509871);

  var MON_TYPE_DE_CARTE = 'Axe routier';

  /* Initialisation de la carte  */
  function initialize() { 

   /* Déclaration du style "Axes Routiers"  */
   var mon_style = [
    {
     featureType: "road",
     elementType: "geometry",
     stylers: [
      { hue: "#00ff00" },
      { saturation: 100 }
     ]
    },
    {
     featureType: "landscape",
     elementType: "geometry",
     stylers: [
      { hue: "#000000" },
      { saturation: 75 },
      { lightness: -100}
     ]
    }
   ];

   /* Options de la carte à afficher */
   var mapOptions = {
    zoom: 12,
    center: paris,
    mapTypeControlOptions: {
     mapTypeIds: [google.maps.MapTypeId.ROADMAP, MON_TYPE_DE_CARTE]
    },
    mapTypeId: MON_TYPE_DE_CARTE
   };

   map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

   var styledMapOptions = {
    name: "Axes Routiers"
   };

   var routeMapType = new google.maps.StyledMapType(mon_style, styledMapOptions);

   /* Association du type de carte à son id que l'on ajoute
   au jeu de types de cartes disponibles */
   map.mapTypes.set(MON_TYPE_DE_CARTE, routeMapType);
  }

</script>