title: How to make the google maps infowindow show at the mouse position when I hover over the polygon or polyline?
body: <p>I need to edit the position of <strong>infowindow</strong> so that it shows the position of the <strong>mouse</strong> when I hover over the polygon (the green area) not at the top left corner. How would I do that? </p>
  
  <p>I have tried <code>infowindow.set_positionevent.latLng)</code> but it didn't work and the infowindow didn't show at all.</p>
  
  <pre><code>var infowindow_polygon_1 = new google.maps.InfoWindow({content: '&lt;h1&gt;polygon&lt;/h1&gt;&lt;br/&gt;&lt;a href="http://www.google.com/"&gt;google&lt;/a&gt;"'});
  google.maps.event.addListener(flightPath_2,"mouseover",function(){
   this.setOptions({fillColor: "#00FF00"});
    infowindow_polygon_1.setPosition(event.latLng);
      infowindow_polygon_1.open(map);
  }); 
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Cl6xc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Cl6xc.png" alt="without edit the position using setposition"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;My First Google Map&lt;/h1&gt;
  
  &lt;div id="map" style="width:100%;height:500px"&gt;&lt;/div&gt;
  
  &lt;script&gt;
    function myMap() {
      var mapCanvas = document.getElementById("map");
      var mapOptions = {
        center: new google.maps.LatLng(51.508742, -0.120850),
        zoom: 5
      };
  
      var map = new google.maps.Map(mapCanvas, mapOptions);
  
      var wellIcon = {
        // url: "well.png", // url
        scaledSize: new google.maps.Size(20, 20), // scaled size
        origin: new google.maps.Point(0, 0), // origin
        anchor: new google.maps.Point(0, 0) // anchor
      };
  
      var raisaCairo = new google.maps.LatLng(29.957252, 31.275634);
      var libya = new google.maps.LatLng(27.195036247666614, 18.10546875);
      var ireland_1 = new google.maps.LatLng(55.26597215355588, -12.7001953125);
      var ireland_2 = new google.maps.LatLng(55.91165733399104, -5.361328125);
      var ireland_3 = new google.maps.LatLng(50.58253919582843, -10.5029296875);
      var ireland_4 = new google.maps.LatLng(52.33466792329363, -4.5263671875);
      var stavanger = new google.maps.LatLng(58.983991, 5.734863);
      var amsterdam = new google.maps.LatLng(52.395715, 4.888916);
      var london = new google.maps.LatLng(51.508742, -0.120850);
      var sep_1 = new google.maps.LatLng(44.22866952759539, -2.8125);
      var sep_2 = new google.maps.LatLng(42.211431145149, 4.3945312);
  
  
  
      var wellMarker = new google.maps.Marker({
        position: raisaCairo,
        icon: wellIcon
      });
      wellMarker.setMap(map);
  
      var infowindow_wellMarker = new google.maps.InfoWindow({
        content: "Well"
      });
  
      google.maps.event.addListener(wellMarker, 'click', function() {
        map.setZoom(6);
        map.setCenter(wellMarker.getPosition());
        infowindow_wellMarker.open(map, wellMarker);
      });
      //////////////////////////////////
  
  
  
  
      var wellMarker_1 = new google.maps.Marker({
        position: libya,
        icon: wellIcon
      });
      wellMarker_1.setMap(map);
  
      var infowindow_wellMarker_1 = new google.maps.InfoWindow({
        content: "Well"
      });
  
      google.maps.event.addListener(wellMarker_1, 'click', function() {
        map.setZoom(6);
        map.setCenter(wellMarker_1.getPosition());
        infowindow_wellMarker_1.open(map, wellMarker_1);
      });
  
  
  
      //////////////////////////////////
  
      google.maps.event.addListener(wellMarker, 'mouseover', function() {
        infowindow_wellMarker.open(map, wellMarker);
      });
      google.maps.event.addListener(wellMarker, 'mouseout', function() {
        infowindow_wellMarker.close(map, wellMarker);
      });
  
      google.maps.event.addListener(wellMarker_1, 'mouseover', function() {
        infowindow_wellMarker_1.open(map, wellMarker);
      });
      google.maps.event.addListener(wellMarker_1, 'mouseout', function() {
        infowindow_wellMarker_1.close(map, wellMarker);
      });
  
  
      //////////////////////////////////////////////////////////////////////////////
      var flightPath = new google.maps.Polyline({
        path: [stavanger, amsterdam, london],
        strokeColor: "#FF00FF",
        strokeOpacity: 0.5,
        strokeWeight: 5
      });
      flightPath.setMap(map);
  
  
      var sep = new google.maps.Polyline({
        path: [sep_1, sep_2],
        strokeColor: "#F0000F",
        strokeOpacity: 1,
        strokeWeight: 10
      });
      sep.setMap(map);
      //////////////////////////////////////////////////////////////////////////////
  
      var flightPath_2 = new google.maps.Polygon({
        path: [stavanger, amsterdam, raisaCairo],
        strokeColor: "#000000",
        strokeOpacity: 0.4,
        strokeWeight: 5,
        fillColor: "#00FF00",
        fillOpacity: 0.3
      });
      flightPath_2.setMap(map);
  
  
      var irland = new google.maps.Polygon({
        path: [ireland_1, ireland_3, ireland_4, ireland_2],
        strokeColor: "#000000",
        strokeOpacity: 0.9,
        strokeWeight: 10,
        fillColor: "#0FFFF0",
        fillOpacity: 0.7
      });
  
      irland.setMap(map);
  
      ////////////////////////////////////////////////////////////////////////////////////////
      //event
  
      var infowindow_polygon_1 = new google.maps.InfoWindow({
        content: '&lt;h1&gt;polygon&lt;/h1&gt;&lt;br/&gt;&lt;a href="http://www.google.com/"&gt;google&lt;/a&gt;"'
      });
      google.maps.event.addListener(flightPath_2, "mouseover", function() {
        this.setOptions({
          fillColor: "#00FF00"
        });
  
        infowindow_polygon_1.open(map);
        infowindow_polygon_1.setPosition(event.latLng);
      });
  
      google.maps.event.addListener(flightPath_2, "mouseout", function() {
        this.setOptions({
          fillColor: "#FF0000"
        });
        infowindow_polygon_1.close(map);
      });
  
      //event
      var infowindow_polygon_2 = new google.maps.InfoWindow({
        content: "&lt;h2&gt;polyline&lt;/h2&gt;"
      });
  
  
      google.maps.event.addListener(flightPath, "mouseover", function() {
        this.setOptions({
          strokeColor: "#00FF00"
        });
  
        infowindow_polygon_2.open(map);
        infowindow_polygon_2.setPosition(event.latLng);
      });
  
      google.maps.event.addListener(flightPath, "mouseout", function() {
        this.setOptions({
          strokeColor: "#FF0000"
        });
        infowindow_polygon_2.close(map);
      });
  
  
      ///on click
      var marker_1 = [];
      var infowindow_1 = [];
      //event 
      function placeMarker(map, location) {
        marker_1 = new google.maps.Marker({
          position: location,
          map: map
        });
        infowindow_1 = new google.maps.InfoWindow({
          content: 'Latitude: ' + location.lat() + '&lt;br/&gt;Longitude: ' + location.lng() + '&lt;br/&gt;&lt;input type="button" id="btn" value="click" onclick="removeMarker()"/&gt;&lt;br/&gt;&lt;a href="http://www.google.com/"&gt;google&lt;/a&gt;'
        });
        infowindow_1.open(map, marker_1);
      }
  
      google.maps.event.addListener(map, 'click', function(event) {
        placeMarker(map, event.latLng);
      });
  
  
  
    }
  
  
    function removeMarker() {
  
      alert('it works');
    }
  &lt;/script&gt;
  
  &lt;script src="https://maps.googleapis.com/maps/api/js?callback=myMap"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>