CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
Nick
Nick

Reputation: 565

Infowindow that follows mouse with Google Maps JS v3?

It is possible to create an infowindow that follows the mouse? Preferably offset to the top right of the mouse pointer.

function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var contentString = 'follow mouse';

  var infowindow = new google.maps.InfoWindow({
      content: contentString
  });

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Uluru (Ayers Rock)'
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

Upvotes: 0

Views: 1517

Answers (1)

Nick
Nick

Reputation: 565

Adding this at the end of the initialize() function makes the infowindow follow the mouse.

google.maps.event.addListener(map,'mousemove',function(event){
    infowindow.setPosition(event.latLng);
});

Adding the param pixelOffset to the infowindow function offsets it top right.

var infowindow = new google.maps.InfoWindow({
  content: contentString,
  pixelOffset: new google.maps.Size(10,-10)
});

Upvotes: 2

Related Questions