开发者

Get latitude and longitude of marker (onclick)

开发者 https://www.devze.com 2023-03-13 06:27 出处:网络
How can you create an listener to a marker and get its latitude and longitude. When I create an listener to each marker of a click event, I can do stuff like alert on开发者_开发问答 the click, but how

How can you create an listener to a marker and get its latitude and longitude. When I create an listener to each marker of a click event, I can do stuff like alert on开发者_开发问答 the click, but how can I get the coords of the marker i.e click -> this.getLat/getLng, etc. when clicked on?


Try this:

marker = new google.maps.Marker({
             position: latlng,
             map: map                    
}); //end marker

//Add listener
google.maps.event.addListener(marker, "click", function (event) {
                    alert(this.position);
}); //end addListener


As a followup to Bryan Weaver's excellent answer, if you want to SAVE latitude and longitude separately, you must use lat() and lng(). the position property is not a regular string.

bryan's code would become:

marker = new google.maps.Marker({
             position: latlng,
             map: map                    
}); //end marker

//Add listener
google.maps.event.addListener(marker, "click", function (event) {
    var latitude = this.position.lat();
    var longitude = this.position.lng();
    alert(this.position);
}); //end addListener

you can apply lat() and lng() directly on a variable (latLng)

    var latitude = latLng.lat();
    var longitude = latLng.lng();


All the answers here are good,

but I have tried something which kind of works like Google Maps. When you click somewhere on the map, a marker shows up but when you click somewhere else the old marker goes away and the new marker shows up with latitude and longitude in the text field.

Here's the DEMO

  // In the following example, markers appear when the user clicks on the map.
  // The markers are stored in an array.
  // The user can then click an option to hide, show or delete the markers.
  var map;
  var markers = [];

  function initMap() {
    var haightAshbury = {lat: 23.2748308, lng: 77.4519248};

    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 16.3,                        // Set the zoom level manually
      center: haightAshbury,
      mapTypeId: 'terrain'
    });

    // This event listener will call addMarker() when the map is clicked.
    map.addListener('click', function(event) {
      if (markers.length >= 1) {
          deleteMarkers();
      }

      addMarker(event.latLng);
      document.getElementById('lat').value = event.latLng.lat();
      document.getElementById('long').value =  event.latLng.lng();
    });
  }

  // Adds a marker to the map and push to the array.
  function addMarker(location) {
    var marker = new google.maps.Marker({
      position: location,
      map: map
    });
    markers.push(marker);
  }

  // Sets the map on all markers in the array.
  function setMapOnAll(map) {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(map);
    }
  }

  // Removes the markers from the map, but keeps them in the array.
  function clearMarkers() {
    setMapOnAll(null);
  }

  // Deletes all markers in the array by removing references to them.
  function deleteMarkers() {
    clearMarkers();
    markers = [];
  }
</script>
<script async defer
    src="http://maps.google.com/maps/api/js?sensor=false&callback=initMap">
</script>

So what this code does is, when you click somewhere on the map, the values of latitude and longitude shows up in the text field.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号