CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3google-maps-markersalgolia
Przemek Wojtas
Przemek Wojtas

Reputation: 1371

Google maps get position of an marker

I am adding multiple markers, and what I want to do is on click, get that specific marker position.

However at the moment it does work however it displays lat and lng for the last marker created. How can this be solved so that when I click on the marker it will give me that specific position of that marker.

function algolia_search(position) {
  clearOverlays();
var APPLICATION_ID = '75RQSC1OHE';
var SEARCH_ONLY_API_KEY = 'f2f1e9bba4d7390fc61523a04685cf12';
var INDEX_NAME = 'businesses';
var PARAMS = { hitsPerPage: 20 };
// Client + Helper initialization
var algolia = algoliasearch(APPLICATION_ID, SEARCH_ONLY_API_KEY);
var algoliaHelper = algoliasearchHelper(algolia, INDEX_NAME, PARAMS);
// Map initialization
algoliaHelper.on('result', function(content) {
    renderHits(content);
  var i;
  // Add the markers to the map
  for (i = 0; i < content.hits.length; ++i) {
    var hit = content.hits[i];
    var marker = new google.maps.Marker({
      position: {lat: hit._geoloc.lat, lng: hit._geoloc.lng},
      map: map,
      label: hit._geoloc.slug,
      animation: google.maps.Animation.DROP
    });
    markers.push(marker);
     marker.addListener('click', function() {
      var destinationLat = marker.getPosition().lat();
      var destinationLng = marker.getPosition().lng();
      console.log(lat);
      console.log(lng);
      console.log(destinationLat);
      console.log(destinationLng);

Upvotes: 1

Views: 1165

Answers (1)

ScaisEdge
ScaisEdge

Reputation: 133400

you need a listerner on map for click in event.latLng you have coordinates

google.maps.event.addListener(map, 'click', function(event) {
    alert ( 'Lat : '  + event.latLng.lat() + ' Lng : ' + event.latLng.lng())
});

do the fact you have already place the marker on maps you could use a closure

  var addListenerOnPoint = function(actMark){

    actMark.addListener('click', function() {
         alert ( 'Lat : '  + actMark.position.lat() + ' Lng : ' +actMark.position.lng());
    });


  for (i = 0; i < content.hits.length; ++i) {
      var hit = content.hits[i];
      var marker = new google.maps.Marker({
      position: {lat: hit._geoloc.lat, lng: hit._geoloc.lng},
      map: map,
      label: hit._geoloc.slug,
      animation: google.maps.Animation.DROP
    });
    addListenerOnPoint(marker, 
                  );
    markers.push(marker);

  }

Upvotes: 1

Related Questions