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

Ecrit par fabien le 17/01/2009.

| |

Sommaire

Introduction
Ajout des marqueurs
Code complet
Démonstration
Remarques
Conclusion

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

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 domment 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 : Fabien - fabien.goblet [ at ] gmail.com

Retour en haut

Bonjour, Je te remercie

Par EwKilian (non vérifié), le ven, 27/02/2009 - 11:00am.

Bonjour,
Je te remercie vraiment pour ton travail tes explications.
J'aimerais m'aidait de ton tuto pour effectuer des marqueurs déplacables.
A la fin du tuto tu parles de :
"On peut imaginer des interactions avec une base de données pour enregistrer les marqueurs".
Et en fait c'est ce que j'aimerais faire. Mes connaissances en javascript ne sont pas terrible du tout.
Je souhaiterais savoir si tu connais un lien, un tuto qui explique cela. Ou me dire par quoi je dois commencer. Car ce que je n'arrive pas à comprendre c'est comment je peux récupérer les coordonées du point pour après l'insérer dans ma base.
Je te remercie d'avance pour ton coup de pouce
A bientot
EwKilian

répondre

idem je réouvre le dossier

Par Florian (non vérifié), le dim, 20/12/2009 - 6:49pm.

idem je réouvre le dossier sur la question d'interaction avec la BD ? si tu as des infos ou tuto je suis preneur.
Bravo encore pour ta présentation.
A+