Google Maps API

Context-Menu sur Map

NoSmoking

La carte

Cliquez sur la carte avec le bouton droit de la souris pour faire apparaître le menu.

  • Vue plan
  • Vue plan avec relief
  • Vue satellite
  • Vue satellite avec legende
  • Zoom +
  • Zoom -
  • Ajouter un marker

Code HTML du menu

Le code HTML du menu fait partie intégrante de la page et est caché dans un élément en display:none.

<div style="display:none;">
  <div id="cm-map" class="context-menu">
    <ul>
      <li data-action="vue_route">Vue plan</li>
      <li data-action="vue_terrain">Vue plan avec relief</li>
      <li data-action="vue_satellite">Vue satellite</li>
      <li data-action="vue_satellite_legende">Vue satellite avec legende</li>
      <li></li>
      <li data-action="zoom+">Zoom +</li>
      <li data-action="zoom-">Zoom -</li>
      <li></li>
      <li data-action="add_marker">Ajouter un marker</li>
    </ul>
  </div>
</div>

La relation entre le menu et l'action a effectuer se fait grâce à l'attribut data-action, voir la fonction ci après.

Les éléments vides <li></li> sont considérés comme des séparateurs.

Fonction appelée au click sur le menu

/**
 * Action à déclencher suivant la valeur du paramètre
 * @param {Object} param - {
 *       "action"  : string,
 *       "element" : élément du menu ayant déclenché l'action,
 *       "latLng"  : objet google.maps.LatLng
 *     }
 */
function mapAction(param) {
  switch (param.action) {
    case "vue_route":
      this.setMapTypeId(google.maps.MapTypeId.ROADMAP);
      break;
    case "vue_satellite_legende":
      this.setMapTypeId(google.maps.MapTypeId.HYBRID);
      break;
    case "vue_satellite":
      this.setMapTypeId(google.maps.MapTypeId.SATELLITE);
      break;
    case "vue_terrain":
      this.setMapTypeId(google.maps.MapTypeId.TERRAIN);
      break;
    case "zoom+":
      if (param.latLng) {
        this.setCenter(param.latLng);
      }
      this.setZoom(this.getZoom() + 1);
      break;
    case "zoom-":
      if (param.latLng) {
        this.setCenter(param.latLng);
      }
      this.setZoom(this.getZoom() - 1);
      break;
    case "add_marker":
      addMarker(this, {
        "draggable": true,
        "position": param.latLng
      });
      break;
  }
}

Le this dans cette fonction représente l'objet auquel on a affecté un événement, "rightclick" en l'occurence, pour faire apparaître le menu, on peut donc lui appliquer directement les méthodes qu'il posséde.

Création et affectation du menu

// création context menu pour la map
var mapContextMenu = new ContextMenu({
  map: oMap,                // objet google.maps.Map
  idMenu: "cm-map",         // id élément DOM du menu
  callback: mapAction       // réf. fonction appelée
});
// affectation event pour context menu sur la map
google.maps.event.addListener(oMap, "rightclick", function(data) {
  mapContextMenu.show(this, data.latLng);
});

Le constructeur ContextMenu est basé sur l'objet google.maps.OverlayView de l'API Google Maps et est défini dans le fichier gm-contextmenu.js qu'il faut donc insérer dans la page.

Les codes sources

Ressources