How to display Info Window just above polyline in Google Map?

Question

Problem here is i am taking latitude and longitude information from database and drawing polylines on Google map with Info Window,it worked fine with markers.However info window appears on top of the Google map even though i have set position of it. I have used code as following:-

 <script type="text/javascript">


 function initialize()
        {
          var map;

           var markers = JSON.parse('<%=ConvertDataTabletoString() %>');
     var infoWindow = new google.maps.InfoWindow({maxWidth:200,minWidth:200});
           var marker;

           var x=new google.maps.LatLng(16.697000,74.244000);
       var stavanger=new google.maps.LatLng(markers[0].lat1, markers[0].lng1);

         var london=new google.maps.LatLng(markers[0].lat, markers[0].lng);
           var j=0;

           var i=0;
           var points=new Array();
           var points2=new Array();

           var mapProp = {
           center:new google.maps.LatLng(markers[0].lat, markers[0].lng),
           zoom:14,
           mapTypeId:google.maps.MapTypeId.ROADMAP

            }; 
   var map=new google.maps.Map(document.getElementById("map_canvas"),mapProp);

             google.maps.event.addListener(map, "click", function(event)
        {

                var marker = new google.maps.Marker({
                position: event.latLng, 
                 animation: google.maps.Animation.DROP,
                map: map

                });


              document.getElementById("txttolat").value = event.latLng.lat();
             document.getElementById("txttolong").value = event.latLng.lng();

               var pt=event.latLng.lat();
             points[j]=event.latLng.lat();

             points2[j]=event.latLng.lng();
             j=j+1;

              document.getElementById("txtlat").value = points[0];
             document.getElementById("txtlong").value = points2[0];
             //            });

              });

             for (i = 0; i < markers.length; i++) {
             var data = markers[i]

    var stavanger2=new google.maps.LatLng(markers[i].lat1, markers[i].lng1);

         var london2=new google.maps.LatLng(markers[i].lat, markers[i].lng);

              var myTrip=[stavanger2,london2];
               var flightPath=new google.maps.Polyline({




                path:myTrip,
            strokeColor:"#0000FF",
             strokeOpacity:0.8,
             strokeWeight:10,
               map: map,
               title: data.title
                    });
                  // }
                  (function(flightPath, data) {

           google.maps.event.addListener(flightPath, 'click', function(e) {
                 // alert('you clicked polyline');

               infoWindow.setContent(data.description);

                 infoWindow.open(map,flightPath);
                 infoWindow.setPosition(e.latLng);
                 document.getElementById("txtname").value = data.title;

                  document.getElementById("txtlat").value = e.latLng.lat();
                  document.getElementById("txtlong").value = e.latLng.lng();
                     });

                      })(flightPath, data);


                       }
                       }



               google.maps.event.addDomListener(window, 'load', initialize);
                    </script>

Answer 1

You have to change click event listener for flightpath.

From google api reference InfoWindow class method open() is defined as

open(map?:Map|StreetViewPanorama, anchor?:MVCObject) Opens this InfoWindow on the given map. Optionally, an InfoWindow can be associated with an anchor. In the core API, the only anchor is the Marker class. However, an anchor can be any MVCObject that exposes a LatLng position property and optionally a Point anchorPoint property for calculating the pixelOffset (see InfoWindowOptions). The anchorPoint is the offset from the anchor's position to the tip of the InfoWindow.

You used flightPath (Polyline) as an anchor which doesn't provide position property.

So, first, you get position of click and then just open infowindow on map:

infoWindow.setPosition(e.latLng);
infoWindow.open(map);

// infoWindow.open(map,flightPath);
// infoWindow.setPosition(e.latLng);

Check example at jsbin. Note: I had to fake JSON.parse() method to get some data.