info widows with different information on polylines google map api v3

Question

I need to display different data on an infowindow that pops up when someone clicks a polyline form the many available,

I have looked in to many solutions for this here is one examples i come accross,

Google Maps API - Trouble with Arrays and InfoWindows

But this solution doesn't seem to work for me, it doesn't display an infowindow when i click on a polyline. please help me on this...i used a different code and it only displays the last element of the array..what i does is i add polylines via a for loop.please help me on this one..here is my code,

    var map;
    var polylinesIn = [];
    var infowindow = new google.maps.InfoWindow();
    var infowindowArray = [];
    function initialize() {


        var styles = [{ featureType: "landscape", stylers: [{ color: "#000514"}] }, { featureType: "administrative.country", stylers: [{ weight: 0.1 }, { color: "#009acd"}] }, { featureType: "water", stylers: [{ color: "#1f4fa5dc"}] }, { featureType: "road", stylers: [{ color: "#000514"}] }, { featureType: "administrative.locality", stylers: [{ color: "#7cfc00" }, { visibility: "off"}] }, { featureType: "landscape.man_made", stylers: [{ visibility: "off"}] }, { featureType: "poi", stylers: [{ visibility: "off"}] }, { featureType: "administrative.province", stylers: [{ visibility: "on"}]}];

        var mapOptions = {
            center: new google.maps.LatLng(7.3, 80.6333),
            zoom: 3,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);

        map.setOptions({ styles: styles });

        var lineSymbolIn = {
            path: google.maps.SymbolPath.CIRCLE,
            scale: 2,
            strokeColor: '#FF8000'
        };


        for (var i = 0; i < 5; i = i + 1) {

            var conentVal = i.toString();
            //var infowindow = new google.maps.InfoWindow();
            var netTrafficIn = [
            new google.maps.LatLng(53.3333866 + i, -6.247401 + i),
            new google.maps.LatLng(7.3, 80.6333)];

            var polylineIn = new google.maps.Polyline({
                path: netTrafficIn,
                icons: [{ icon: lineSymbolIn, offset: '100%'}],
                strokeColor: "  #FF8000",
                strokeOpacity: 1.0,
                strokeWeight: 1,
                geodesic: true

            });
            polylineIn.setMap(map);
            polylinesIn[i]=polylineIn;
            animateCircleIn(i);

            addInfowindow(i.toString());
            createInfoWindow(i);                                         
        }

    }

    function addInfowindow(contentVal) {
        infowindow = new google.maps.InfoWindow({ content: contentVal });
        infowindowArray.push(infowindow);
    }

    function createInfoWindow(id) {
        google.maps.event.addListener(polylinesIn[id], 'click', (function (id) {
            return function () {
                infowindowArray[id].open(map, polylinesIn[id]);
            }
        })(id));

    }

    function animateCircleIn(id) {
        var count = 0;
        offsetId = window.setInterval(function () {
            count = (count + 1) % 200;

            var icons = polylinesIn[id].get('icons');
            icons[0].offset = (count / 2) + '%';
            polylinesIn[id].set('icons', icons);
        }, 20);

    }

Thank you very much :)

Okey i did some changes like yal suggested, but still infowindows doesnt appear..please help..thank you very much :)

You have asked this question already. It's the same situation as in http://stackoverflow.com/questions/11931415/animate-symbol-on-multiple-geodesic-polylines Please google "javascript closure" and you might learn something instead of asking the same question again and again. — slawekwin, Aug 14 '12 at 08:28
Hey, thanx for answering the previous 1. but i am lost here, i tried having functions but then it didnt display anything :( ill try more..thnx again — user1584241, Aug 14 '12 at 08:39

score 0 · Answer 1 · edited May 23 '17 at 12:10

0

The other question you linked to describes your problem. You have to use a copy of the variable you iterate, so that it doesn't change its value. I showed it to you in your previous question: Animate symbol on multiple geodesic polylines

You could just move attaching your event to function animateCircle which already does that:

function animateCircleIn(id) {
    var count = 0;
    offsetId = window.setInterval(function () {
        count = (count + 1) % 200;

        var icons = polylinesIn[id].get('icons');
        icons[0].offset = (count / 2) + '%';
        polylinesIn[id].set('icons', icons);
    }, 20);

        google.maps.event.addListener(polylinesIn[id], 'click', function (event) {
            infowindow.content = "x" + id.toString();
            infowindow.position = event.latLng;
            infowindow.open(map); //,flightPath);
        });
}

But real problem here is that you didn't learn anything from your previous question or the one you linked in your question. You should read about "javascript closure". I realy hope it's the last time you are asking about it.

edited May 23 '17 at 12:10

Community

1
1

answered Aug 14 '12 at 08:45

slawekwin

6,270
1
44
57

thank you for your reply. much appreciated..i did try to learn but i am very new to this..il read on the materials throroly..when i seprate it to a new method, nothing gets displayed, that was the issue... :) – user1584241 Aug 14 '12 at 08:59
in that case sorry for my outburst :-) does code you posted in question display infowindow for every polyline, just with the last index or did I misunderstood you? – slawekwin Aug 14 '12 at 09:20
no problem..i can understand :) yeaa..the first code displays the last index for every polyline in an infowindow..and having it in the animateCircle function doesn't give an infowindow, nothing happens when i click a polyline..i tired the method in the referenced question i posed aswel..same result..no infowindow :( – user1584241 Aug 14 '12 at 09:22

score 0 · Answer 2 · edited May 23 '17 at 12:26

The problem is that you are using the same infoWindow for all polylines you have. When you change the value of infowindow in this part of code

google.maps.event.addListener(polylinesIn[id], 'click', function (event) {
            infowindow.content = "x" + id.toString();
            infowindow.position = event.latLng;
            infowindow.open(map); //,flightPath);
    });

you change the value of the first one by reference and all infowindows that ancored with a polyline will change too. The infowindow that you use inside your function isn't a copy of the instantiated one, it is the reference instead.

You can try two diferent things in this case. First is create an infowindow to every polyline you want by using infowindow = new google.maps.InfoWindow(); inside your function.

Or you could create a hole new scope. In that case I suggest you read this post: Google Maps API - Trouble with Arrays and InfoWindows

hey thanks for the reply..much appreciated :) i tried putting it to another function, but nothing appears, as in no infowindow on click event. i tired refereing to the array position of the polyline aswell :( this is soo confusing... — user1584241, Aug 15 '12 at 04:54
i edited the code, can you tell me whats wrong now? the infowindows doesn't appear.. :( — user1584241, Aug 15 '12 at 05:13

score 0 · Answer 3 · edited Aug 15 '12 at 19:18

The following code works:

            (function (id) {
                google.maps.event.addListener(polylinesIn[id], 'click', function (event) {
                    infowindow.content = "x" + id.toString();
                    infowindow.position = event.latLng;
                    infowindow.open(map); //,flightPath);
                });
            })(i)

I added this closure inside the for loop which solved the problem.. Thanks for pointing me in the right direction, guys.. :)

info widows with different information on polylines google map api v3

3 Answers3