CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
victor
victor

Reputation: 23

Multimarker and infoboxes for every marker

I try to make a custom infobox. If I run for one marker, it works, but if I try from an imgUr (the array has got coordinates, name and other attributes for every marker) which have more than one marker I can't make it work. It shows only the first one marker and none else and no infobox.

Here is the code:

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

    var location = new google.maps.LatLng(imgAr[i].coords.coordinates[1],
                                          imgAr[i].coords.coordinates[0]);

    var marker = new google.maps.Marker({
                        position : location,
                        map : map,
                        icon : "icons/coffee1.png" ,
                        animation : google.maps.Animation.DROP,
                        infoboxIndex : i  // <--- That's the extra attribute
    });

    var content = "<h5> Name:" + imgAr[i].name +
                  "<br> Description:" + imgAr[i].description +
                  "<br><img src='" + imgAr[i].image +
                  "' width='100px' height='100px'/> <h5>";

    var var_infobox_props = {
        content: content,
        disableAutoPan: false,
        maxWidth: 0,
        pixelOffset: new google.maps.Size(-10, 0),
        zIndex: null,
        boxClass: "myInfobox",
        closeBoxMargin: "2px",
        closeBoxURL: "icons/close.png",
        infoBoxClearance: new google.maps.Size(1, 1),
        visible: true,
        pane: "floatPane",
        enableEventPropagation: false
    };

    var var_infobox = new InfoBox(var_infobox_props);

    google.maps.event.addListener(marker, 'mouseover',
        function(event) {
            map.panTo(event.latLng);
            map.setZoom(16);
            infocoffee[this.infoboxIndex].open(map, this);
        }
    );

    // Save infobox in array
    infocoffee.push(var_infobox);

    // Save marker in array
    markers.push(marker);
}

markers.setMap(map);

What is not working? How can I fix it?

Upvotes: 0

Views: 100

Answers (1)

kaho
kaho

Reputation: 4784

It sounds like either infocoffee.push(var_infobox); or markers.push(marker); results in an error, and the javascript stopped execute from there (That's why you have only one markers.)

I reproduce it on the JSFiddle. Take a look at the working sample, and the sample with error.

=-=-=- edited -=-=-=
The same concept should apply to the infobox plugin, as it is shown here.

Upvotes: 1

Related Questions