Google maps api v3 polyline visible when marker mousover

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 &nbsp; 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.

What does the code look like for the marker ("what marker")? What does your map code look like? Please provide a [Minimal, Complete, Tested and Readable example](http://stackoverflow.com/help/mcve) that demonstrates the issue. — geocodezip, Dec 26 '14 at 23:13
You said: "Basically, I want the polyline only to be shown when hovering/mouseover the marker". What have you done to attempt that? There is still no map defined in your code. — geocodezip, Dec 26 '14 at 23:59
Ok new example. Take a look at the following: http://jsfiddle.net/s93sad03/37/. What I want is to only show the black polyline while hovering/mouseovering the marker, how do i do that? I tried putting new polyline inside that addListener, but I couldn't figure out how to remove it again. Would it be possible to for instance define polyline'visible: false' in the polyline, and in the mouseover event define polyline'visible:true'? Thanks — SteveHI, Dec 27 '14 at 10:01
The method is simply called [`setVisible`](https://developers.google.com/maps/documentation/javascript/reference?hl=en&csw=1#Polyline) http://jsfiddle.net/s93sad03/38/ — Dr.Molle, Dec 27 '14 at 10:43
Ahh, it was that simple, thanks! Do you know how this would work out if i had one var = marker, but several different markers, where each one has its own line? I have several markers/lines, but when hovering, only one specific line will enlighten, no matter what marker i hover over. — SteveHI, Dec 27 '14 at 11:58
http://www.virtualnorwegian.net/livemap5 See first post for the code. — SteveHI, Dec 27 '14 at 14:05

score 0 · Answer 1 · answered Dec 28 '14 at 00:23

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

Google maps api v3 polyline visible when marker mousover

1 Answers1