StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POMultiple polylines and infowindows with Google Maps V3
text
Body
copied!<p>I have a map with multiple polylines and would like to open a line-specific-infowindow when clicking the line.</p> <p>So far my code only shows the content of the last iteration. </p> <p>I found two very nice examples of what I want but after hours of trying I am still no further.<br> Example 1: <a href="http://srsz750.appspot.com/api3/polylines-multiple.html" rel="noreferrer">http://srsz750.appspot.com/api3/polylines-multiple.html</a><br> Example 2: <a href="http://www.geocodezip.com/v3_GenericMapBrowser.asp?filename=flights090414.xml" rel="noreferrer">http://www.geocodezip.com/v3_GenericMapBrowser.asp?filename=flights090414.xml</a></p> <p>So your are my last shot :-S</p> <p>Here is my code that shows only the content of the last iteration:</p> <pre><code>for (var i = 0; i < locations.length; i++) { var route = locations[i]; // locations is an array of route-arrays. //route is an array with details. route[0] contains the description. var imageStart = 'img/rijder.png'; var polyOptions = { strokeColor: '#0000FF', strokeOpacity: 1.0, strokeWeight: 3 } poly = new google.maps.Polyline(polyOptions, info); var path = poly.getPath(); //line text var info = route[0]; google.maps.event.addListener(poly, 'click', function(event) { infowindow.setContent(info); infowindow.position = event.latLng; infowindow.open(map); }); //startmarker var startLatLng = new google.maps.LatLng(route[1], route[2]); var smarker = new google.maps.Marker({ position: startLatLng, map: map, icon: imageStart, title: route[7], html: route[0] }); path.push(startLatLng); //starttext google.maps.event.addListener(smarker, "click", function () { infowindow.setContent(this.html); infowindow.open(map, this); }); //endmarker var endLatLng = new google.maps.LatLng(route[4], route[5]); var emarker = new google.maps.Marker({ position: endLatLng, map: map, icon: imageEnd, title: route[8], html: route[3] }); path.push(endLatLng); //endtext google.maps.event.addListener(emarker, "click", function () { infowindow.setContent(this.html); infowindow.open(map, this); }); //close line and put on the map poly.setMap(map); } } </code></pre> <p>And here is the code I would expect to work but all lines disappeared (only the relevant code, I also added a mouseover function):</p> <pre><code> //line text google.maps.event.addListener(poly, 'click', (function(event,index){ return function(){ var routeinfw = locations[index]; var inf = routeinfw[0]; infowindow.setContent(inf); infowindow.position = mouselocation; infowindow.open(map); }; })(event,i)); //starticon </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload