adding popup to more than one marker in Google Map

Question

I am struggling a bit with this seemingly simple problem. I would like to add a popup message to more than one marker in Google map. The following is my current slightly simplified code:

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Map1</title>

    <style type="text/css">
        html, body, #map-canvas {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        #marker-tooltip {
            display: none;
            position:absolute;
            width: 300px;
            height: 200px;
            background-color: #ccc;
            margin: 15px;
        }
    </style>

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

        function initialize() {
            var mapOptions = {
                zoom: 5,
                center: new google.maps.LatLng(52.04, -1.5),
                mapTypeId: google.maps.MapTypeId.TERRAIN
            };

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

            var pinString1 = '{"lat":52.04,"lng":-1.5}';
            var pinString2 = '{"lat":52.21,"lng":-1.22}';

            var infowindow = new google.maps.InfoWindow({
                content: "Pin1 Popup"
            });

            var marker = new google.maps.Marker({
                position: JSON.parse(pinString1),
                map: map,
                title: 'Pin1 Title'
            });

            marker.addListener('click', function () {
                infowindow.open(map, marker);
            });

            infowindow = new google.maps.InfoWindow({
                content: "Pin2 Popup"
            });

            marker = new google.maps.Marker({
                position: JSON.parse(pinString2),
                map: map,
                title: 'Pin2 Title'
            });

            marker.addListener('click', function () {
                infowindow.open(map, marker);
            });
        }
        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
</head>
<body>
    <div id="map-canvas"></div>
</body>
</html>

It seems that the click event is only added to the last marker. Why does this happen? How can I fix this?

PS:

Refactoring this into a function also solve the problem of using markers twice:

function CreateMarker(markerPositionString, markerTitle, infoWindowContent, map) {
            var infowindow = new google.maps.InfoWindow({
                content: infoWindowContent
            });

            var marker = new google.maps.Marker({
                position: JSON.parse(markerPositionString),
                map: map,
                title: markerTitle
            });

            marker.addListener('click', function () {
                infowindow.open(map, marker);
            });
        }

duplicate of [Google Maps JS API v3 - Simple Multiple Marker Example](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) — geocodezip, Oct 28 '15 at 10:13

score 1 · Accepted Answer · answered Oct 28 '15 at 06:03

1

You are using the same reference for two different marker objects. You should create a separate reference for each marker:

// create first reference
var marker1 = new google.maps.Marker({
    position: JSON.parse(pinString1),
    map: map,
    title: 'Pin1 Title'
});

marker1.addListener('click', function () {
    infowindow.open(map, marker1);
});

// ...

// create second reference
var marker2 = new google.maps.Marker({
    position: JSON.parse(pinString2),
    map: map,
    title: 'Pin2 Title'
});

marker2.addListener('click', function () {
    infowindow.open(map, marker2);
});

answered Oct 28 '15 at 06:03

nem035

34,790
6
87
99

quite hard to achieve if you do this in a loop. Found this in the meantime: http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/ – cs0815 Oct 28 '15 at 06:05
not really that hard if you keep your references in some sort of a structure, for instance in an array – nem035 Oct 28 '15 at 06:05
I guess I will have to post another question. In my scenario, the marker titles come from the first column in a list of vectors and the infowindow's context from the second column of that vector over which I have to loop. Could you possibly adapt the solution to show that? – cs0815 Oct 28 '15 at 06:13
@csetzkorn if you update your question with the code and desired behavior I can definitely take a look – nem035 Oct 28 '15 at 06:19
Thanks. I actually factored this out into a function, which does the trick (i.e. inside the function the marker is unique). Thanks for your help ... – cs0815 Oct 28 '15 at 06:25

adding popup to more than one marker in Google Map

1 Answers1