I'm looking to add multiple markers with multiple info windows using the Google Maps API. How can I achieve this?

Question

I'm looking to add multiple markers with multiple info windows using the Google Maps API. How can I achieve this?

Having trouble with the Google Maps API v3? I've set up a map with custom markers, but when clicked they all display the same content in the info window. Can you take a look at my code and help me troubleshoot? Each marker is supposed to link to a specific webpage related to that location, but I seem to be running into some issues. Any assistance would be greatly appreciated!

<!doctype html>
<head>

...

</script>
</head>
<body onload="initialize()">

<div id="header">
    <div id="headercon">
        <a href="http://www.linux4hope.org">
            <div id="headerwrap"></div>   
        </a>        
    </div>
</div>

<div id="map_canvas"></div>

</body>

</html>

javascript google-maps

Answer 1

Answer №1

To avoid overwriting, consider using unique names for both the marker and infowindow elements.

One approach could be to utilize an array to hold the data (latitude/longitude, title, content) and then dynamically create the markers and windows within a loop.

Answer 2

To avoid overwriting, consider using unique names for both the marker and infowindow elements.

One approach could be to utilize an array to hold the data (latitude/longitude, title, content) and then dynamically create the markers and windows within a loop.

Answer 3

Answer №2

The issue at hand stems from the reusing of variables in your code. The click event handlers are all anonymous functions that do not execute until the event is triggered. Once these functions run, they encapsulate the scope of the surrounding functions. Due to the reuse of variable names, the values for all infowindows except the last one get overwritten, resulting in only the final infowindow being displayed.

To address this, you could opt for separate variables for each location:

var marker1,infowindow1,marker2,infowindow2, ...

However, a more efficient solution would be to construct a data structure containing positions and their corresponding infowindows.

var locations = {
'London' : {
 marker : new google.maps.Marker({ ... }),
 infowindow : new google.maps.InfoWindow({ ... });
},
'Manassas' : { ... }

This way, you can iterate through the data structure and link each marker with its respective infowindow seamlessly.

Answer 4

The issue at hand stems from the reusing of variables in your code. The click event handlers are all anonymous functions that do not execute until the event is triggered. Once these functions run, they encapsulate the scope of the surrounding functions. Due to the reuse of variable names, the values for all infowindows except the last one get overwritten, resulting in only the final infowindow being displayed.

To address this, you could opt for separate variables for each location:

var marker1,infowindow1,marker2,infowindow2, ...

However, a more efficient solution would be to construct a data structure containing positions and their corresponding infowindows.

var locations = {
'London' : {
 marker : new google.maps.Marker({ ... }),
 infowindow : new google.maps.InfoWindow({ ... });
},
'Manassas' : { ... }

This way, you can iterate through the data structure and link each marker with its respective infowindow seamlessly.

Answer 5

Answer №3

The reason for this issue is that all the event handlers are triggering at the same time, causing all the infowindow variables to point to the same object. To resolve this, you can implement some simple solutions such as renaming the variables (e.g., infowindow1, infowindow2, etc.) or adding more closures:

(function(){
    var marker = new google.maps.Marker({
        position: London, 
        map: map,
        title:"Linux4Hope UK",
        icon: 'http://static.tumblr.com/asviked/U1flr229o/marker.png'  
    });   

    var infowindow = new google.maps.InfoWindow({
        position: London, 
        content: '<p><a href="http://www.linux4hope.org.uk">Linux4Hope, London, United Kingdom</a></p>'
    });

    google.maps.event.addListener(marker, 'click', function() {
        position: London, 
        infowindow.open(map, this);
    });
})();

Alternatively, you can try:

google.maps.event.addListener(marker, 'click', function(iw){
    return function() {
        iw.open(map, this);
    };
}(infowindow)
});

Answer 6

The reason for this issue is that all the event handlers are triggering at the same time, causing all the infowindow variables to point to the same object. To resolve this, you can implement some simple solutions such as renaming the variables (e.g., infowindow1, infowindow2, etc.) or adding more closures:

(function(){
    var marker = new google.maps.Marker({
        position: London, 
        map: map,
        title:"Linux4Hope UK",
        icon: 'http://static.tumblr.com/asviked/U1flr229o/marker.png'  
    });   

    var infowindow = new google.maps.InfoWindow({
        position: London, 
        content: '<p><a href="http://www.linux4hope.org.uk">Linux4Hope, London, United Kingdom</a></p>'
    });

    google.maps.event.addListener(marker, 'click', function() {
        position: London, 
        infowindow.open(map, this);
    });
})();

Alternatively, you can try:

google.maps.event.addListener(marker, 'click', function(iw){
    return function() {
        iw.open(map, this);
    };
}(infowindow)
});

I'm looking to add multiple markers with multiple info windows using the Google Maps API. How can I achieve this?

Answer №1

Answer №2

Answer №3

Similar questions

When the component is initialized, the computed property is not being evaluated

Mastering MongoDB update functions in JavaScript

Step-by-step guide to launching a new window or tab without automatically bringing it into focus

Vue select is causing the selected choice of another selector to be influenced

Replacing multiple attributes within a complex HTML opening tag using Node.js regular expressions

Setting nodeIntegration to false led to an Uncaught ReferenceError: require is not defined when trying to access Object.url (external "url":1) in the electron-react-typescript environment

Adjusting image size according to browser dimensions

What is the best way to prevent the onClick event from triggering during the page rendering process?

The 'api' property is not found within the 'MyService' type declaration

Listening on TCP port for HTML5 Websocket communications

Match rooms using Socket.io

Implementing TestCafe with a Rails backend and utilizing fixtures data for testing

Establish communication between two Sails applications

Issue with Gijgo grid not updating properly during change event

The .AppendChild() method does not appear to be working as expected following the completion of

Pause the audio using jQuery when the slide changes

Encountering an issue when attempting to construct the project: it asks for callback functions, but instead received an [

Enable the button if at least one checkbox has been selected

Leveraging an external TypeScript library in a TypeScript internal module

Difficulty in sharing cookies among subdomains