Adding info window to google maps

Question

I am having difficulty adding info windows to the markers on this google map. I have tried different methods but I think I am adding the code to the wrong place or calling the wrong variables. Can anyone help me out? thanks!

var beaches = [
    ['Bondi Beach', -33.890542, 151.274856, 1],
    ['Coogee Beach', -33.923036, 151.259052, 1],
    ['Cronulla Beach', -34.028249, 151.157507, 2],
    ['Manly Beach', -33.800101, 151.287478, 2],
    ['Maroubra Beach', -33.950198, 151.259302, 2]
];

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: new google.maps.LatLng(-33.88, 151.28),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

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

var markers = [];

var i, newMarker;

for (i = 0; i < beaches.length; i++) {
    newMarker = new google.maps.Marker({
        position: new google.maps.LatLng(beaches[i][1], beaches[i][2]),
        map: map,
        title: beaches[i][0]
    });

    newMarker.category = beaches[i][3];
    newMarker.setVisible(false);

    markers.push(newMarker);
}

function displayMarkers(category) {
    var i;

    for (i = 0; i < markers.length; i++) {
        if (markers[i].category === category) {
            markers[i].setVisible(true);
        } else {
            markers[i].setVisible(false);
        }
    }
}

google.maps.event.addListener(markers, 'click', (function (markers, i) {
    return function () {
        infowindow.setContent(beaches[i][0]);
        infowindow.open(map, markers);
    }
})(markers, i));

Apologies, I have tried that page but I think I'm using the wrong variable names. I have updated the original post with my implementation of this example included. Cheers! — Jalapeno Jack, Jul 17 '14 at 12:24
Is this your complete code? I will write an answer below but with the duplicate I posted above you should be able to get it to work! — MrUpsidown, Jul 17 '14 at 12:45

score 0 · Accepted Answer · answered Jul 17 '14 at 12:47

var markers = [];

function initialize() {

    var beaches = [
        ['Bondi Beach', -33.890542, 151.274856, 1],
        ['Coogee Beach', -33.923036, 151.259052, 1],
        ['Cronulla Beach', -34.028249, 151.157507, 2],
        ['Manly Beach', -33.800101, 151.287478, 2],
        ['Maroubra Beach', -33.950198, 151.259302, 2]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(-33.88, 151.28),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

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

    for (var i = 0; i < beaches.length; i++) {

        var newMarker = new google.maps.Marker({
            position: new google.maps.LatLng(beaches[i][1], beaches[i][2]),
            map: map,
            title: beaches[i][0]
        });

        google.maps.event.addListener(newMarker, 'click', (function (newMarker, i) {
            return function () {
                infowindow.setContent(beaches[i][0]);
                infowindow.open(map, newMarker);
            }
        })(newMarker, i));

        markers.push(newMarker);
    }
}

initialize();

I have wrapped your code in an init function. Mind your variables declarations / scopes. If you have questions, let me know. You were not too far from it...

JSFiddle demo

Thanks again! was there any reason why you removed the code that assigns the markers categories? Markers are in either group 1 or 2 and are hidden/shown using a checkbox in the html. EDIT, I put this back in and got it working. Finally getting the hang of this — Jalapeno Jack, Jul 17 '14 at 16:15
Well I try to shorten code to the minimum for a working example... — MrUpsidown, Jul 18 '14 at 07:28

Adding info window to google maps

1 Answers1