Discovering the specific marker that was clicked from a group of Google map markers

Question

Discovering the specific marker that was clicked from a group of Google map markers

I have a collection of marker objects named markers. I am currently utilizing a for loop to assign event listeners to each one. However, I am encountering difficulty in determining which specific marker was clicked.

This is the current code snippet I have:

 for(var i = 0; i < this.markers.length; i++) //attaches listener to all markers
 {
      google.maps.event.addListener(this.markers[i], "click", () =>
      {
            //need a way to identify the clicked marker
      }); 
 }

I've experimented with passing arguments to the arrow function without success. Are there any suggestions or alternatives? The usage of an arrow function is not mandatory as long as the function can provide the index of the correct marker.

javascript google-maps google-maps-api-3 callback

Answer 1

Answer №1

Please review the official documentation.

Check out this functional demonstration:

function startMap() {

  var mapOptions = {
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(1, 1)
  };

  var locations = [
    [new google.maps.LatLng(0, 0), 'Marker 1', 'Infowindow content for Marker 1'],
    [new google.maps.LatLng(0, 1), 'Marker 2', 'Infowindow content for Marker 2'],
    [new google.maps.LatLng(0, 2), 'Marker 3', 'Infowindow content for Marker 3'],
    [new google.maps.LatLng(1, 0), 'Marker 4', 'Infowindow content for Marker 4'],
    [new google.maps.LatLng(1, 1), 'Marker 5', 'Infowindow content for Marker 5'],
    [new google.maps.LatLng(1, 2), 'Marker 6', 'Infowindow content for Marker 6']
  ];

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var infowindow = new google.maps.InfoWindow();

  for (var idx = 0; idx < locations.length; idx++) {

    var marker = new google.maps.Marker({
      position: locations[idx][0],
      map: map,
      title: locations[idx][1]
    });

    google.maps.event.addListener(marker, 'click', (function(marker, idx) {

      return function() {
        infowindow.setContent(locations[idx][2]);
        infowindow.open(map, marker);
      }

    })(marker, idx));
  }
}

startMap();

#map-canvas {
  height: 200px;
}

<div id="map-canvas"></div>

<script src="https://maps.googleapis.com/maps/api/js"></script>

Answer 2

Please review the official documentation.

Check out this functional demonstration:

function startMap() {

  var mapOptions = {
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(1, 1)
  };

  var locations = [
    [new google.maps.LatLng(0, 0), 'Marker 1', 'Infowindow content for Marker 1'],
    [new google.maps.LatLng(0, 1), 'Marker 2', 'Infowindow content for Marker 2'],
    [new google.maps.LatLng(0, 2), 'Marker 3', 'Infowindow content for Marker 3'],
    [new google.maps.LatLng(1, 0), 'Marker 4', 'Infowindow content for Marker 4'],
    [new google.maps.LatLng(1, 1), 'Marker 5', 'Infowindow content for Marker 5'],
    [new google.maps.LatLng(1, 2), 'Marker 6', 'Infowindow content for Marker 6']
  ];

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var infowindow = new google.maps.InfoWindow();

  for (var idx = 0; idx < locations.length; idx++) {

    var marker = new google.maps.Marker({
      position: locations[idx][0],
      map: map,
      title: locations[idx][1]
    });

    google.maps.event.addListener(marker, 'click', (function(marker, idx) {

      return function() {
        infowindow.setContent(locations[idx][2]);
        infowindow.open(map, marker);
      }

    })(marker, idx));
  }
}

startMap();

#map-canvas {
  height: 200px;
}

<div id="map-canvas"></div>

<script src="https://maps.googleapis.com/maps/api/js"></script>

Discovering the specific marker that was clicked from a group of Google map markers

Answer №1

Similar questions

Leveraging the power of JavaScript to retrieve data from BigQuery

Can loading HTML and js through ajax be considered secure?

Why is the lower sub-component positioned above the rest of the page?

What is the best way to incorporate an ASYNC function within a .map function to dynamically populate a table in a REACT application?

The retrieval of JSON file using $.GetJson() is unsuccessful from local directory

Is it possible to pass a component into a dialogue box in material-ui using React?

SwipeJS experiencing technical difficulties

Utilizing JavaScript and PHP to dynamically load HTML content on a webpage

Always ensure that an element remains at the bottom during the sorting process

Passing objects to an AngularJS form using UIB TypeAhead without two-way binding

Learn how to retrieve data by clicking on the previous and next buttons in FullCalendar using Vue.js

Limiting the ability to pan to a single globe within the Google Maps API

A guide to sorting JSON objects in Node.js

The issue with updating values in the jQuery UI datepicker persists

The method of altering a menu link in WordPress using jQuery varies according to whether the user is logged in or not

Custom Joi middleware in Express v4 is failing to pass the Request, Response, and Next objects

Node.js is throwing an error code 344, indicating that it is not possible to manipulate headers after they have already been

MongoDB issued an error notification stating: "The operation `disneys.insertOne()` has experienced a timeout after 10000 milliseconds."

Switching Image Values in JavaScript: A Quick Guide

Unable to remove the most recently added Object at the beginning