17. Ajouter un marqueur déplaçable et jouer avec la gravité#

Date de publication initiale : 17 janvier 2009

Introduction#

Il est possible grâce à l'API Google Maps de créer des marqueurs déplaçables. Nous verrons ici comment l'implémenter.

Ajout des marqueurs#

Définir une fonction de création des marqueurs - en définissant les options clickable, draggable, bouncy, bouncyGravity et title, et en ajoutant nu événement lors de la fin du déplacement du marqueur :

function createMarker(point){
  marker = new GMarker(point,{clickable: false, draggable: true, bouncy: true, bounceGravity: 0.2, title: 'marqueur déplaçable'});
  map.addOverlay(marker);
  GEvent.addListener(marker, "dragend", function() {
    marker.openInfoWindowHtml("Il est possible de modifier la gravité du rebond !");
  });
}

Créer un événement lorsqu'on clique sur la carte - ici on ajoute un marqueur :

GEvent.addListener(map,"click", function(overlay,latlng){
  if (latlng){
    var point = new GLatLng(latlng.y,latlng.x);
    createMarker(point);
  }
});

Code complet#

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      [Google Maps] 17. Ajouter un marqueur déplaçable et jouer avec la gravité
    </title>
    <style type="text/css">
      html { overflow:hidden; height:100%; }
      body { height:100%; margin:0; }
      #map { width:100%; height:100%; }
    </style>
    <link rel="icon" type="image/png" href="./favicon.png"/>
    <script src="http://maps.google.com/maps?file=api&v=2&key=votre_cle_ici" type="text/javascript"></script>
    <script type="text/javascript">

      var map;
      var marker;
      var latlng;

      function createMarker(point){
        marker = new GMarker(point,{clickable: false, draggable: true, bouncy: true, bounceGravity: 0.2, title: 'marqueur déplaçable'});
        map.addOverlay(marker);
        GEvent.addListener(marker, "dragend", function() {
          marker.openInfoWindowHtml("Il est possible de modifier la gravité du rebond !");
        });
      }

      function initialize() {

        map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(43.57691664771851, 1.402451992034912),15);
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());

        GEvent.addListener(map,"click", function(overlay,latlng){
          if (latlng){
            var point = new GLatLng(latlng.y,latlng.x);
            createMarker(point);
          }
        });

      }

    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map"></div>
   </body>
</html>

Démonstration#

Info

Le serveur hébergeant la démonstration n'étant plus disponible depuis de nombreuses années, la démonstration, autre fois intégrée en iFrame est désactivée.
<iframe src="http://88.191.39.115/fabien/geotribu/%5bgeotribu%5d_Google-Maps_tuto17.html" height="500px" width="500px"></iframe>

Résultat pleine page

Remarques#

Toujours se référer à l'API Google Maps - Google Maps API Reference pour les différentes classes, méthodes et options utilisées. Il existe beaucoup d'événements sur les objets - carte et marqueur - dans l'API Google Maps, à vous de les découvrir.

Conclusion#

Ce tutoriel explique comment ajouter un marqueur sur la carte à la position où l'on clique.
Il explique aussi comment faire pour que ce marqueur soit déplaçable.
On peut imaginer des interactions avec une base de données pour enregistrer les marqueurs et beaucoup d'autres choses encore.

Auteur·ice#

Fabien Goblet #

Informaticien et géographe de formation, ~~je suis~~ j'étais indépendant en base de données, webmapping, j'aide à la modélisation et à la définition du besoin client, ~~je développe~~ j'encadre le développement des interfaces d'administration et des carto-web, je conçois des api géographiques pour les administrations, les ONG, les labos de recherche. Je suis maintenant responsable de l'innovation chez Sogefi. Toujours des cartes et des données qui ont besoin de communiquer. Nous avons une spécialité dans les données foncières et de leur représentation à destination des administrations.

J'aime comprendre les données et en faire quelquechose ; du coup je fais pas mal de veille techno sur tout ce qui touche aux technologies web de dataviz - carto ou non.

J'ai une préférence pour les technologies libres. Tout ce qui touche aux interactions hommes-machines avec des technos comme Kinect, Arduino, Raspberry, les imprimantes 3d ou les machines de découpe laser, les caméras 360° me passionne. Et j'essaie de les utiliser dans le cadre du travail.

Commentaires

Afin de favoriser les échanges constructifs, merci de préférer le pseudonymat à l'anonymat. Pour rappel, l'adresse mail n'est pas exposée publiquement et sert principalement aux notifications de réponse. Les commentaires sont automatiquement republiés sur nos réseaux sociaux pour favoriser la discussion. Consulter la page sur la confidentialité et les données personnelles.
Une version minimale de la syntaxe markdown est acceptée pour la mise en forme des commentaires.
Propulsé par Isso.

Ce contenu est sous licence Creative Commons BY-NC-SA 4.0 International Pictogramme Creative Commons Pictogramme Creative Commons BY Pictogramme Creative Commons NC Pictogramme Creative Commons SA