CODEWITHSUNDEEP
eventsgoogle-maps-api-3
MacMac
MacMac

Reputation: 35301

Get latitude and longitude of marker (onclick)

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?

Upvotes: 14

Views: 52717

Answers (3)

Tushar
Tushar

Reputation: 11

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.

Upvotes: 1

tony gil
tony gil

Reputation: 9554

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();

Upvotes: 25

Bryan Weaver
Bryan Weaver

Reputation: 4473

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

Upvotes: 29

Related Questions