Add infoWindow for multiple marker in google map V3

How to add infoWindow as dynamic on multiple maker? I have tried in
lots of way and then I found that solution as given below:

function initialize() {

    var locations = [ [ 'Bondi Beach', -33.890542, 151.274856 ],
            [ 'Coogee Beach', -33.923036, 151.259052 ],
            [ 'Cronulla Beach', -34.028249, 151.157507 ],
            [ 'Manly Beach', -33.80010128657071, 151.28747820854187 ],
            [ 'Maroubra Beach', -33.950198, 151.259302 ] ];

    var latlng = new google.maps.LatLng(-33.890542, 151.274856);

    var settings = {
        zoom : 10,
        center : latlng,
        mapTypeControl : true,
        mapTypeControlOptions : {
            style : google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        navigationControl : true,
        navigationControlOptions : {
            style : google.maps.NavigationControlStyle.SMALL
        },
        mapTypeId : google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("mapContainer"),
            settings);

    var companyLogo = new google.maps.MarkerImage("parking.png",
            new google.maps.Size(100, 50), new google.maps.Point(0, 0),
            new google.maps.Point(50, 50));
    var companyShadow = new google.maps.MarkerImage("parking_shadow.png",
            new google.maps.Size(130, 50), new google.maps.Point(0, 0),
            new google.maps.Point(65, 50));
    var companyMarker = [];
    var infowindow = [];
    var loc = null;
    var myLatLng = null;
    for ( var i = 0; i < locations.length; i++) {

        loc = locations[i];
        myLatLng = new google.maps.LatLng(loc[1], loc[2]);
        eval("var companyMarker"
                + i
                + " = new google.maps.Marker({ position: myLatLng, map: map, icon: companyLogo, shadow: companyShadow, title:loc[0],zIndex: i});");
    }
    var a = [];
    for (i = 0; i < locations.length; i++) {

        google.maps.event
                .addListener(
                        eval("companyMarker" + i),
                        'click',
                        function() {
                            var ind = $(this).attr('z-index');
                            if (infowindow[ind])
                                infowindow[ind].close();
                            eval("var infowindow"
                                    + ind
                                    + " = new google.maps.InfoWindow({content: locations[ind][0]});");
                            eval("infowindow" + ind).open(map,
                                    eval("companyMarker" + ind));
                        });
    }
}

$(document).ready(function() {
    initialize();
});

If there anything seems confusing feel free to contact me.

Advertisements

Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s