Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Multiple polylines and infowindows with Google Maps V3

I have a map with multiple polylines and would like to open a line-specific-infowindow when clicking the line.

So far my code only shows the content of the last iteration.

I found two very nice examples of what I want but after hours of trying I am still no further.
Example 1: http://srsz750.appspot.com/api3/polylines-multiple.html
Example 2: http://www.geocodezip.com/v3_GenericMapBrowser.asp?filename=flights090414.xml

So your are my last shot :-S

Here is my code that shows only the content of the last iteration:

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); 
 } 
}

And here is the code I would expect to work but all lines disappeared (only the relevant code, I also added a mouseover function):

  //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
like image 939
Christian Loncle Avatar asked Nov 01 '10 10:11

Christian Loncle


People also ask

What is a Google Maps polyline?

A polyline is a list of points, where line segments are drawn between consecutive points.

How do you get bounds on Google Maps?

getBounds() in Google Maps API v3 But in API v3 you will get “bounds is undefined” error. So to get our latitude and longitude we need to move getBounds(), to some event listener. Description of bounds_changed in documentation is: “This event is fired when the viewport bounds have changed.”

What does fitBounds do in Google Maps?

Sets the viewport to contain the given bounds. Note: When the map is set to display: none , the fitBounds function reads the map's size as 0x0, and therefore does not do anything.


1 Answers

Just like in the example you posted, create a function to create the click events listeners and call it from inside the locations loop:

function createInfoWindow(poly,content) {
    google.maps.event.addListener(poly, 'click', function(event) {
        infowindow.content = content;
        infowindow.position = event.latLng;
        infowindow.open(map);
    });
}

And you can call this at the end of the loop:

createInfoWindow(poly,info);
like image 103
ifaour Avatar answered Oct 07 '22 13:10

ifaour