Menu
I'd like to show and hide a tooltip when mouseover / mouseout on the polyline path, the issue is that my polyline path has a stroke width 2 only, so is not easy to hit that area in the mouseover event, that's definitely inconvenient to user experience.
I'd like to know if there's a way to make that hit area wider using an arbitrary width, but invisible to the user?
snippet of my code below
path = new google.maps.Polyline(plotOptions);
path.setMap(that.map);
this.polyPathArray.push(path);
google.maps.event.addListener(path, 'mouseover', (function(index) {
return function(polyMouseevent) {
$(".table>tbody>tr>td").removeClass('highlight');
$(".table>tbody>tr").eq(index).find("td").addClass('highlight');
var latlngVal = '';
if(polyMouseevent) {
latlngVal = polyMouseevent.latLng;
} else {
//calculate a random position on a polyline
}
that.infowindows[index].setPosition(latlngVal);
that.infowindows[index].open(that.map);
};
})(i));
Any help would be appreciated :)
304
You can use a polyline with opacity 0 and a wider stroke over your polyline, and the info window will appear. I think user3513687 has a different issue, and the flicker is due to the cursor going on top of the InfoWindow and off of the line. A pixel offset appears to fix that issue. Here is a snippet using the code in that fiddle as a starting point:
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-3, 23),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions);
var links = [];
var link2 = [new google.maps.LatLng(-3.5999999999999996, 23.4), new google.maps.LatLng(-4.5, 23.4)],
link1 = [new google.maps.LatLng(-3.5999999999999996, 23.4), new google.maps.LatLng(-3.5999999999999996, 18)];
links.push(link1);
links.push(link2);
for (var i = 0; i < links.length; i++) {
doJob(links[i]);
}
}
function doJob(polyline_bounds) {
var polyline;
polyline = new google.maps.Polyline({
path: polyline_bounds,
strokeColor: "#0000FF",
strokeOpacity: 0.5,
strokeWeight: 2
});
invisiblePolyline = new google.maps.Polyline({
path: polyline_bounds,
strokeColor: "#0000FF",
strokeOpacity: 0.0,
strokeWeight: 20
});
polyline.setMap(map);
invisiblePolyline.setMap(map);
var info = new google.maps.InfoWindow({
content: "Position",
pixelOffset : new google.maps.Size(0, -10)
});
google.maps.event.addListener(invisiblePolyline, 'mouseover', function (event) {
polyline.setOptions({
strokeOpacity: 1
});
info.setPosition(event.latLng);
info.open(map);
});
google.maps.event.addListener(invisiblePolyline, 'mouseout', function (event) {
polyline.setOptions({
strokeOpacity:.5
});
info.close(map);
});
}
google.maps.event.addDomListener(window, 'load', initialize);html, body, #mapcanvas { margin: 0; padding: 0; height: 100% }<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="mapcanvas"></div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
