Marker content (infoWindow) Google Maps

Question

I'm trying to add infoWindow's to multiple markers on a Google Map. The closest I have come is to get an infoWindow to display the last address you can see in the array, on all markers. The bit of code I have pasted below does not work, I get an "Uncaught TypeError: Cannot read property '4' of undefined". I'm sure this is a scope issue, but I'm going round in circles here and could do with some help:

var hotels = [
            ['ibis Birmingham Airport', 52.452656, -1.730548, 4, 'Ambassador Road<br />Bickenhill<br />Solihull<br />Birmingham<br />B26 3AW','(+44)1217805800','(+44)1217805810','info@ibisbhamairport.com','http://www.booknowaddress.com'],
            ['ETAP Birmingham Airport', 52.452527, -1.731644, 3, 'Ambassador Road<br />Bickenhill<br />Solihull<br />Birmingham<br />B26 3QL','(+44)1217805858','(+44)1217805860','info@etapbhamairport.com','http://www.booknowaddress.com'],
            ['ibis Birmingham City Centre', 52.475162, -1.897208, 2, 'Ladywell Walk<br />Birmingham<br />B5 4ST','(+44)1216226010','(+44)1216226020','info@ibisbhamcity.com','http://www.booknowaddress.com']
        ];

        for (var i = 0; i < hotels.length; i++) {
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(hotels[i][1], hotels[i][2]),
                map: map,
                icon: image,
                title: hotels[i][0],
                zIndex: hotels[i][2]
            });

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

            google.maps.event.addListener(marker, 'click', function () {
                var markerContent = hotels[i][4];
                infoWindow.setContent(markerContent);
                infoWindow.open(map, this);
            });
        }

Thanks in anticipation.

change `var marker = ...` to `let marker = ...` and `var infoWindow = ...` to `let infoWindow = ...` — Pierre, Sep 22 '22 at 08:03

score 61 · Accepted Answer · edited Oct 22 '14 at 21:05

61

We've solved this, although we didn't think having the addListener outside of the for would make any difference, it seems to. Here's the answer:

Create a new function with your information for the infoWindow in it:

function addInfoWindow(marker, message) {

            var infoWindow = new google.maps.InfoWindow({
                content: message
            });

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

Then call the function with the array ID and the marker you want to create:

addInfoWindow(marker, hotels[i][3]);

edited Oct 22 '14 at 21:05

Azteca

549
6
19

answered May 03 '11 at 13:18

DarrylGodden

1,526
5
25
44

3

I looked through a lot of SO answers to variants of this question. Your answer was the clearest. Thank you. – ZMorek Aug 30 '11 at 19:25
@DarrylGodden... Thanks .. for your info about infowindow. – RED.Skull Apr 05 '13 at 09:58
4

What's the info variable for? – Ben Taliadoros Jun 27 '13 at 11:58
NB : The reason is wasn't working originally is that you were creating a an event listener callback which would have had a different scope. Although it was making a concrete 'i', I suspect it was still trying to access 'hotels' from the callback function, but since hotel was a 'var' it is only accessible in your parent function. – MultiMat Jun 25 '15 at 12:49

score 34 · Answer 2 · edited May 23 '17 at 12:25

34

Although this question has already been answered, I think this approach is better : http://jsfiddle.net/kjy112/3CvaD/ extract from this question on StackOverFlow google maps - open marker infowindow given the coordinates:

Each marker gets an "infowindow" entry :

function createMarker(lat, lon, html) {
    var newmarker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lon),
        map: map,
        title: html
    });

    newmarker['infowindow'] = new google.maps.InfoWindow({
            content: html
        });

    google.maps.event.addListener(newmarker, 'mouseover', function() {
        this['infowindow'].open(map, this);
    });
}

edited May 23 '17 at 12:25

Community

1
1

answered Jun 06 '12 at 14:51

BenC

1,647
18
25

+1 this works so well!! You can't initialise it with a custom property of infowindow, BUT apparently you can just create the 'infowindow' key... Glad it works. Thanks! – Nathaniel Rogers May 06 '16 at 06:29
Can we customize the style for tooltip? – Sachin HR Apr 10 '18 at 12:09
@SachinHR : see https://developers.google.com/maps/documentation/javascript/reference/3.exp/info-window did not try but you can inject any styled HTML in content and style it with CSS. You can change the icon with the marked see https://developers.google.com/maps/documentation/javascript/reference/3.exp/marker – BenC Apr 10 '18 at 14:06
Is it possible to display pic as well as name on hover for that particular marker? – Sachin HR Apr 11 '18 at 13:04

Marker content (infoWindow) Google Maps

2 Answers2

Linked