Google maps api v3 polyline visible when marker mousover - google-maps

Question

// Aircraft on map
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
optimized: false,
internalid: planes[15],
zIndex: planes[3],
rotation: planes[4],
mouseovertxt: '<b>'+planes[11]+'</b><br />'+planes[0]+'-'+planes[13]+'-'+planes[14]+'<br />Status: '+planes[16]+'<br />Alt: '+planes[9]+'ft Speed: '+planes[10]+'kts<br />EET: '+planes[17]
});
// Aircraft route
line = new google.maps.Polyline({
path: [dep, myLatLng],
strokeColor: "#c3524f",
strokeOpacity: 1,
strokeWeight: 2,
geodesic: true,
map: map,
polylineID: i,
visible: true
});
line2 = new google.maps.Polyline({
path: [myLatLng, arr],
strokeColor: "#c3524f",
strokeOpacity: .5,
strokeWeight: 2,
geodesic: true,
map: map,
polylineID: i,
visible: true
});
// On mouse over
google.maps.event.addListener(marker, 'mouseover', function () {
infowindow.setContent(this.mouseovertxt);
infowindow.open(map, this);
line.setVisible(false);
line2.setVisible(false);
});
// On mouse out
google.maps.event.addListener(marker, 'mouseout', function () {
infowindow.close();
line.setVisible(true);
line2.setVisible(true);
});
}
}
setMarkers(map, planes);
});
Right now I've reversed the visibility of the lines just to show that the correct lines appear, but only one of them will change visible no matter what marker you hover. Is this because I have only one marker, or is there a simple fix to this? Also, I tried fixing the scrollbar bug, but with no luck. Will try some more though.

Answer 1

Possible approach:
store the lines as properties of the markers, than you may access them easily within the mouse-handlers:
// Aircraft on map
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
optimized: false,
internalid: planes[15],
zIndex: planes[3],
rotation: planes[4],
line1:new google.maps.Polyline({
path: [dep, myLatLng],
strokeColor: "#c3524f",
strokeOpacity: 1,
strokeWeight: 2,
geodesic: true,
map: map,
polylineID: i,
visible: true
}),
line2:new google.maps.Polyline({
path: [myLatLng, arr],
strokeColor: "#c3524f",
strokeOpacity: .5,
strokeWeight: 2,
geodesic: true,
map: map,
polylineID: i,
visible: true
}),
mouseovertxt: '<b>'+planes[11]+'</b><br />'+planes[0]+'-'+planes[13]+'-'+planes[14]+'<br />Status: '+planes[16]+'<br />Alt: '+planes[9]+'ft Speed: '+planes[10]+'kts<br />EET: '+planes[17]
});
// On mouse over
google.maps.event.addListener(marker, 'mouseover', function () {
infowindow.setContent(this.mouseovertxt);
infowindow.open(map, this);
this.get('line1').setVisible(false);
this.get('line2').setVisible(false);
});
// On mouse out
google.maps.event.addListener(marker, 'mouseout', function () {
infowindow.close();
this.get('line1').setVisible(true);
this.get('line2').setVisible(true);
});