Ways to resolve the issue with the information window on Google Maps

Question

Ways to resolve the issue with the information window on Google Maps

I have a problem with displaying infowindows in Google Maps; currently, it only shows the information for the last marker added.

    let myLatlng = new window.google.maps.LatLng(-33.890542, 151.274856 );
    let mapOptions = {
      zoom: 13,
      center: myLatlng,
      scrollwheel: true,  

      }; 
    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra BeachManly Beach Manly Beach Manly Beach', -33.950198, 151.259302, 1]
    ];

    let map = new window.google.maps.Map(
      document.getElementById("map"),
      mapOptions
    );


    var count;
    var markers=[];
    for (count = 0; count < locations.length; count++) {  
      markers.push(new google.maps.Marker({
      position: new google.maps.LatLng(locations[count][1], locations[count][2]),
      map: map,
      title: locations[count][0]
      }));
    }


    var infowindow = new google.maps.InfoWindow({
      content:"<div></div>"
      });

    markers.forEach(function(marker) {
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
      });
    });

javascript google-maps vue.js web google-maps-markers

Answer 1

Answer №1

In my opinion, updating your code to the following would be beneficial:

const locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra BeachManly Beach Manly Beach Manly Beach', -33.950198, 151.259302, 1]
];
let count;
let markers = [];

for (count = 0; count < locations.length; count++) {
  const myLatlng = new window.google.maps.LatLng(locations[count][1], locations[count][2]);

  const mapOptions = {
    zoom: 13,
    center: myLatlng,
    scrollwheel: true,
  };

  const map = new window.google.maps.Map(document.getElementById("map"), mapOptions);

  const marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: locations[count][0]
  });

  markers.push(marker);
}

const infowindow = new google.maps.InfoWindow({
  content: "<div></div>"
});

markers.forEach(marker => {
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
  });
});

markers.forEach(marker => {
  marker.setMap(map);
});

Answer 2

In my opinion, updating your code to the following would be beneficial:

const locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra BeachManly Beach Manly Beach Manly Beach', -33.950198, 151.259302, 1]
];
let count;
let markers = [];

for (count = 0; count < locations.length; count++) {
  const myLatlng = new window.google.maps.LatLng(locations[count][1], locations[count][2]);

  const mapOptions = {
    zoom: 13,
    center: myLatlng,
    scrollwheel: true,
  };

  const map = new window.google.maps.Map(document.getElementById("map"), mapOptions);

  const marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: locations[count][0]
  });

  markers.push(marker);
}

const infowindow = new google.maps.InfoWindow({
  content: "<div></div>"
});

markers.forEach(marker => {
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
  });
});

markers.forEach(marker => {
  marker.setMap(map);
});

Answer 3

Answer №2

I've identified a few issues with your current approach:

You're initializing the map every time within the loop, which is causing only the last marker to show up.
You're attempting to bind events to only the last marker after the loop, whereas each marker should have its own event binding inside the loop.

To address these issues and get things working properly, consider the following suggestions:

Initialize the map once before adding markers to it.
Bind click events for each individual marker inside the loop.
Ensure info-window positioning using the latLng object.

For a functional demonstration, observe the code snippet below:

var locations = [
    ['Bondi Beach', -33.890542, 151.274856, 4],
    ['Coogee Beach', -33.923036, 151.259052, 5],
    ['Cronulla Beach', -34.028249, 151.157507, 3],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
    ['Maroubra BeachManly Beach Manly Beach Manly Beach', -33.950198, 151.259302, 1]
];

var count, marker;

// Initialize the map
var mapOptions = {
    zoom: 13,
    center: new google.maps.LatLng(locations[0][1], locations[0][2]),
    scrollwheel: true,
};

var map = new google.maps.Map(document.getElementById("map"), mapOptions);

// Create an info window
var infowindow = new google.maps.InfoWindow({
    maxWidth: 350,
    pixelOffset: new google.maps.Size(-10,-25)
});

var infoFn = function (count) {
    return function (e) {
        var content = '<div>' +
            '<span>Location: ' + locations[count][0] + '</span>' +
            '<span>, Lat: ' + locations[count][1] + '</span>' +
            '<span>, Long: ' + locations[count][2] + '</span>' +
            '</div>';

        infowindow.setContent(content);
        infowindow.open(map);
        infowindow.setPosition(new google.maps.LatLng(locations[count][1], locations[count][2]));
    }
};

// Add markers
for (count = 0; count < locations.length; count++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[count][1], locations[count][2]),
        map: map,
        title: locations[count][0]
    });
    marker.setMap(map);

    let fn = infoFn(count);
    google.maps.event.addListener(marker, 'click', fn);
}

Answer 4

I've identified a few issues with your current approach:

You're initializing the map every time within the loop, which is causing only the last marker to show up.
You're attempting to bind events to only the last marker after the loop, whereas each marker should have its own event binding inside the loop.

To address these issues and get things working properly, consider the following suggestions:

Initialize the map once before adding markers to it.
Bind click events for each individual marker inside the loop.
Ensure info-window positioning using the latLng object.

For a functional demonstration, observe the code snippet below:

var locations = [
    ['Bondi Beach', -33.890542, 151.274856, 4],
    ['Coogee Beach', -33.923036, 151.259052, 5],
    ['Cronulla Beach', -34.028249, 151.157507, 3],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
    ['Maroubra BeachManly Beach Manly Beach Manly Beach', -33.950198, 151.259302, 1]
];

var count, marker;

// Initialize the map
var mapOptions = {
    zoom: 13,
    center: new google.maps.LatLng(locations[0][1], locations[0][2]),
    scrollwheel: true,
};

var map = new google.maps.Map(document.getElementById("map"), mapOptions);

// Create an info window
var infowindow = new google.maps.InfoWindow({
    maxWidth: 350,
    pixelOffset: new google.maps.Size(-10,-25)
});

var infoFn = function (count) {
    return function (e) {
        var content = '<div>' +
            '<span>Location: ' + locations[count][0] + '</span>' +
            '<span>, Lat: ' + locations[count][1] + '</span>' +
            '<span>, Long: ' + locations[count][2] + '</span>' +
            '</div>';

        infowindow.setContent(content);
        infowindow.open(map);
        infowindow.setPosition(new google.maps.LatLng(locations[count][1], locations[count][2]));
    }
};

// Add markers
for (count = 0; count < locations.length; count++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[count][1], locations[count][2]),
        map: map,
        title: locations[count][0]
    });
    marker.setMap(map);

    let fn = infoFn(count);
    google.maps.event.addListener(marker, 'click', fn);
}

Ways to resolve the issue with the information window on Google Maps

Answer №1

Answer №2

Similar questions

Mastering the $emit function in Vue.js

Tips for displaying a loader image with a centered message and preventing the bootstrap modal dialogue box from closing during an AJAX response from a PHP file

Incapable of modifying the text within a div container

Search for a specific key within a list of dictionaries

Encountering a 401 error message with a 'truncated server' response while using Google Apps Script

Using AJAX to Verify Google Recaptcha V3 Response

What could be the reason behind CSS internal style not working while inline style is functioning properly?

The React application is experiencing difficulties in receiving the response data (JSON) from the Express server, despite the fact that

Tips for utilizing state and city dropdown menus in JavaScript multiple times without interfering with other dropdowns

inSession variable in express: set to false

Determine the location based on the preceding parameter of $routeChangeError using AngularJS

Value binding with conditional rendering in VueJS 2

Creating a custom regex script in Javascript to properly parse Google Sheets data that contains commas

Build a React application using ES6 syntax to make local API requests

A step-by-step guide on utilizing moment.js to format the data provided by a vuetify v-text-field (with the type: time)

Organizing various elements into separate divs with just one ajax request

How can I leverage Express, AngularJS, and Socket.io to facilitate broadcasting and receiving notifications?

Is checking for an email address in a form necessary?

What is the best way to halt a CSS transition using JavaScript when dealing with an image?

What repercussions come from failing to implement an event handler for 'data' events in post requests?