Infowindow on polyline for google maps v3 not working

Question

i am trying to draw a line on a map with an associated infowindow in google maps v3. My mouseover seems to be working, but cannot seem to get the infowindow to open.

function drawScheduledCommand(radius, map, latlng, angle, infoText){
  var spherical  = google.maps.geometry.spherical;
  twoThirdRadius = radius / 3 * 2 ;
  oneThirdRadius = radius / 3 ;
  twoThirdPoint  = new spherical.computeOffset(center, twoThirdRadius, angle);
  endPoint       = new spherical.computeOffset(twoThirdPoint, oneThirdRadius, angle);

  var positionLineOptions = {
    strokeColor: "#FFFFF0",
    strokeOpacity: 0.99,
    strokeWeight: 2,
    fillColor: "#FFFFF0",
    fillOpacity: 0.99,
    map: map,
    zIndex: 5,
    path: [twoThirdPoint, endPoint]
  }
  line = new google.maps.Polyline(positionLineOptions);

  var lineInfoWindow = new google.maps.InfoWindow();
  lineInfoWindow.setContent(infoText);
  lineInfoWindow.open(map);

  google.maps.event.addListener(line, 'mouseover', function() {
     console.log(infoText);
     lineInfoWindow.open(map);
  });

  google.maps.event.addListener(line, 'mouseout', function() {
     lineInfoWindow.close();

  });
}

Answer 1

For anyone else with this issue: use setPosition() (like you did), or you can set the position by passing in an MVCObject to the open() call, like so:

infowindow.open(map,marker);

See an example or the reference docs for details.

Answer 2

Say for example you have plotted a vehicle route polyline collecting latlongs data and want to showinfo window with content(lets say timestamp at which it was present there) on hover-

var rawData = [{ll: [18.9750, 72.8258], t: 1476416370},  .......];
// data is lets say array of lat longs and t
var data, polylineCoordinates; 
var infoWindow = new google.maps.InfoWindow();

angular.forEach(rawData, function(item) {
  var latlng = new google.maps.LatLng(item.ll[0], item.ll[1]);
  data.push([latlng, item.t]);
});
// polylineCoordinates is array of LatLng objects
angular.forEach(data, function(item) {
  polylineCoordinates.push(item[0]);
});

var polyline = new google.maps.Polyline({
          path: polylineCoordinates,
          strokeColor: "#0000ff",
          strokeOpacity: 2,
          strokeWeight: 4,
          geodesic: true
        });
polyline.setMap(map);
google.maps.event.addListener(polyline, 'mouseover', function(e) {
  // closes previous info window when mouse moves over polyline
  if(infoWindow.getMap()) { infoWindow.close(); }
  var t;
  angular.forEach(data, function(ping) {
  // accurate to 110 m when coordinates have 3 decimal places precision
  // extracting timestamp for a lat lon coordinate

  if(ping[0].lat().toFixed(3) == e.latLng.lat().toFixed(3) && ping[0].lng().toFixed(3) == e.latLng.lng().toFixed(3)) {
    t = moment(new Date(ping[1] * 1000)).format('Do MMM LT');
    infoWindow.setPosition(e.latLng);
    infoWindow.setContent('<b>' + t + '</b>');
    infoWindow.open(map);
   };
  });
 });