web-dev-qa-db-fra.com

Capturer les coordonnées dans Google Map en cliquant sur l'utilisateur

J'utilise ce code pour capturer les coordonnées lorsque l'utilisateur clique sur la carte en utilisant l'écouteur d'événements ci-dessous:

google.maps.event.addListener(map, 'click', function(event) {
    placeMarker(event.latLng);
});

Toutefois, cette fonction n'est pas appelée lorsque l'utilisateur clique sur un emplacement déjà marqué dans Map . Cela signifie que cette fonction n'est pas appelée pour les points où le pointeur de la souris se change en icône représentant une main sur Google Map. 

Besoin d'aide pour capturer ce genre de lieux.

google-maps-api-3
37
Bads123

Vous devez ajouter le listener de clic sur le marqueur qui vous indiquera la position du marqueur.

//Add listener
google.maps.event.addListener(marker, "click", function (event) {
    var latitude = event.latLng.lat();
    var longitude = event.latLng.lng();
    console.log( latitude + ', ' + longitude );
}); //end addListener

Edit: Vous avez besoin de quelque chose comme ça

//Add listener
google.maps.event.addListener(marker, "click", function (event) {
    var latitude = event.latLng.lat();
    var longitude = event.latLng.lng();
    console.log( latitude + ', ' + longitude );

    radius = new google.maps.Circle({map: map,
        radius: 100,
        center: event.latLng,
        fillColor: '#777',
        fillOpacity: 0.1,
        strokeColor: '#AA0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        draggable: true,    // Dragable
        editable: true      // Resizable
    });

    // Center of map
    map.panTo(new google.maps.LatLng(latitude,longitude));

}); //end addListener
45
Ashwin Parmar

Une autre solution consiste à placer un polygone sur la carte, de même taille que le rectangle de la carte, et à collecter les clics de ces rectangles. 

function initialize() {
  var mapDiv = document.getElementById('map-canvas');
  var map = new google.maps.Map(mapDiv, {
    center: new google.maps.LatLng(37.4419, -122.1419),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  google.maps.event.addListener(map, 'bounds_changed', function() {
      var lat1 = 37.41463623043073;
      var lat2 = 37.46915383933881;
      var lng1 = -122.1848153442383;
      var lng2 = -122.09898465576174;  

      var rectangle = new google.maps.Polygon({
         paths : [
           new google.maps.LatLng(lat1, lng1),
           new google.maps.LatLng(lat2, lng1),
           new google.maps.LatLng(lat2, lng2),
           new google.maps.LatLng(lat1, lng2)
         ],
        strokeOpacity: 0,
        fillOpacity : 0,
        map : map
      });
      google.maps.event.addListener(rectangle, 'click', function(args) {  
         console.log('latlng', args.latLng);
    });
  });
}

Maintenant, vous obtenez LatLng pour les lieux d'intérêt (et leurs goûts) aussi.

démo -> http://jsfiddle.net/qmhku4dh/

13
davidkonrad

Vous parlez des icônes de points d'intérêt que Google place sur la carte.

Cela fonctionnerait-il pour vous de supprimer ces icônes entièrement? Vous pouvez le faire avec une carte stylée. Pour voir à quoi cela ressemble, ouvrez la carte stylisée Wizard et naviguez sur la carte jusqu'à la zone qui vous intéresse.

Cliquez sur Point d'intérêt sous Type d'entité, puis cliquez sur Étiquettes sous Type d'élément. Enfin, cliquez sur Visibility sous Stylers, puis cliquez sur le bouton radio Off situé en dessous.

Cela devrait supprimer toutes les icônes de points d’intérêt sans affecter le reste du style de la carte. Une fois ceux-ci supprimés, les clics correspondants répondront à votre écouteur d'événements de carte normal.

La zone Style de map à droite devrait indiquer:

Type d'entité: poi
Type d'élément: étiquettes
Visibilité: désactivée

Si le résultat vous convient, cliquez sur Afficher JSON en bas de la zone Style de carte. Le JSON résultant devrait ressembler à ceci:

[
  {
    "featureType": "poi",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

Vous pouvez utiliser ce JSON (littéralement un objet JavaScript) en utilisant un code similaire aux exemples du guide du développeur Styled Maps . Voir également la référence MapTypeStyle pour une liste complète des styles de carte.

4
Michael Geary

Cet exemple illustre l'utilisation d'écouteurs d'événements de clic sur des POI (points d'intérêt). Il écoute l'événement click sur une icône de point d'intérêt, puis utilise le lieuId à partir des données de l'événement avec une demande directionsService.route pour calculer et afficher un itinéraire jusqu'au lieu cliqué. Il utilise également le lieuId pour obtenir plus de détails sur le lieu.

Lisez la documentation de Google.

 <pre>
<!DOCTYPE html>
<html>
  <head>
    <title>POI Click Events</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      .title {
        font-weight: bold;
      }
      #infowindow-content {
        display: none;
      }
      #map #infowindow-content {
        display: inline;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="infowindow-content">
      <img id="place-icon" src="" height="16" width="16">
      <span id="place-name"  class="title"></span><br>
      Place ID <span id="place-id"></span><br>
      <span id="place-address"></span>
    </div>
    <script>
      function initMap() {
        var Origin = {lat: -33.871, lng: 151.197};

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 18,
          center: Origin
        });
        var clickHandler = new ClickEventHandler(map, Origin);
      }

      /**
       * @constructor
       */
      var ClickEventHandler = function(map, Origin) {
        this.Origin = Origin;
        this.map = map;
        this.directionsService = new google.maps.DirectionsService;
        this.directionsDisplay = new google.maps.DirectionsRenderer;
        this.directionsDisplay.setMap(map);
        this.placesService = new google.maps.places.PlacesService(map);
        this.infowindow = new google.maps.InfoWindow;
        this.infowindowContent = document.getElementById('infowindow-content');
        this.infowindow.setContent(this.infowindowContent);

        // Listen for clicks on the map.
        this.map.addListener('click', this.handleClick.bind(this));
      };

      ClickEventHandler.prototype.handleClick = function(event) {
        console.log('You clicked on: ' + event.latLng);
        // If the event has a placeId, use it.
        if (event.placeId) {
          console.log('You clicked on place:' + event.placeId);

          // Calling e.stop() on the event prevents the default info window from
          // showing.
          // If you call stop here when there is no placeId you will prevent some
          // other map click event handlers from receiving the event.
          event.stop();
          this.calculateAndDisplayRoute(event.placeId);
          this.getPlaceInformation(event.placeId);
        }
      };

      ClickEventHandler.prototype.calculateAndDisplayRoute = function(placeId) {
        var me = this;
        this.directionsService.route({
          Origin: this.Origin,
          destination: {placeId: placeId},
          travelMode: 'WALKING'
        }, function(response, status) {
          if (status === 'OK') {
            me.directionsDisplay.setDirections(response);
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      };

      ClickEventHandler.prototype.getPlaceInformation = function(placeId) {
        var me = this;
        this.placesService.getDetails({placeId: placeId}, function(place, status) {
          if (status === 'OK') {
            me.infowindow.close();
            me.infowindow.setPosition(place.geometry.location);
            me.infowindowContent.children['place-icon'].src = place.icon;
            me.infowindowContent.children['place-name'].textContent = place.name;
            me.infowindowContent.children['place-id'].textContent = place.place_id;
            me.infowindowContent.children['place-address'].textContent =
                place.formatted_address;
            me.infowindow.open(me.map);
          }
        });
      };
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
        async defer></script>
  </body>
</html>
</pre>
0
Pablo Binotto