Pour rendre un marker Google Map déplaçable sur la carte, ou encore draggable, nous ferons appel à la propriété enableDragging de l’objet GMarker.
Dans un premier temps, nous créons une carte et quelques markers.
Dans cet exemple, on ajoute en plus les coordonnées du marker dans l’info bulle (en cliquant sur le marker) une fois que celui-ci à été déposé.
À noter que le script présenté ci-dessous ne gère que le déplacement des markers et non la récupération des coordonnées du point.
Visualisation des markers déplaçables (draggable)
Comment rendre un marker déplaçable (draggable) avec Google Map
<script type="text/javascript"> var map = new GMap2(document.getElementById('map'), { size: new GSize(635,300)}); /* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map avec une taille de 635 * 300 pixel */ var myPoints = []; /* Déclaration du tableau qui contiendra nos points, objets GLatLng. */ var bounds = new GLatLngBounds(); /* Instanciation de la classe GLatLngBounds */ myPoints.push( new GLatLng(48.8566667, 2.3509871)); // Paris myPoints.push( new GLatLng(48.8123155, 2.2381535)); // Meudon myPoints.push( new GLatLng(48.3906042, -4.4869013)); // Brest myPoints.push( new GLatLng(50.6371834, 3.0630174)); // Lille /* On remplit notre tableau */ for(var i = 0; i < myPoints.length; i++){ bounds.extend(myPoints[i]); var thisMarker = addThisMarker(myPoints[i]); map.addOverlay(thisMarker); } /* Extension des limites de la carte afin d'y insérer tous les points On ajoute également un marker pour chacun de ces points sur la carte */ function addThisMarker(point){ var marker = new GMarker(point, {draggable : true}); return marker; } On peut ensuite utiliser une méthode map State de la classe GMap2 intitulée getBoundsZoomLevel qui récupère le zoom nécessaire pour afficher la carte en fonction de ses limites. var newZoom = map.getBoundsZoomLevel(bounds); De la même manière, on récupère le centre de la région (objet GLatLngBounds) à l'aide de la méthode getCenter(). var newCentre = bounds.getCenter(); Il suffit ensuite d'initialiser la carte avec ces éléments. map.setCenter(newCentre, newZoom); </script>
15 mars 2011 à 12 h 40 min
Bonjour, SVP est ce que il y a quelqu’un qui peut m’aider à trouver comment utiliser les coordonnées des points du markeur pour l’utiliser dans une autre application, je lui suis très reconnaissant . merci d’avance
29 août 2011 à 10 h 49 min
Super ce tuto ! Au final comment on récupére les coordonnées une fois le marqueur positionné au bon endroit ?
Merci d’avance.
Seb