CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3infowindowheatmap
Andrew LaPrise
Andrew LaPrise

Reputation: 3413

Infowindows without markers with the Google Maps JavaScript API

I am using the Google Maps JavaScript API to create a heatmap layer. I would like to add mouseover events to 100+ locations on the map that will display an infowindow. This would get pretty cluttered if I used markers for every event, so I was hoping to find a way to eliminate markers altogether (although I did throw together an ugly mess of a solution in which a button will show/hide those markers). My first thought was to use the LatLngBounds. As a simple example:

var infowindow = new google.maps.InfoWindow(
  { content: "some info",
    size: new google.maps.Size(50,50)
  });
var southWest = new google.maps.LatLng(-31.203405,125.244141);
var northEast = new google.maps.LatLng(-25.363882,131.044922);
var loc = new google.maps.LatLngBounds(southWest,northEast);
google.maps.event.addListener(loc, 'mouseover', function() {
  infowindow.open(map);
}); 
google.maps.event.addListener(loc, 'mouseout', function() {
  infowindow.close();
});

For whatever reason, though, the mouseover event never seems to happen. Is there a problem with the code? Is there a better way to do this than by using LatLngBounds?

Upvotes: 0

Views: 3210

Answers (1)

cretzzzu3000
cretzzzu3000

Reputation: 221

First of all, you should make a new rectangle with your bounds:

var southWest = new google.maps.LatLng(-31.203405,125.244141);
var northEast = new google.maps.LatLng(-25.363882,131.044922);
var loc = new google.maps.LatLngBounds(southWest,northEast);


var rectangle = new google.maps.Rectangle({
    bounds: loc,
    editable: false,
    draggable: false,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });

rectangle.setMap(map);

And then just use an event listener on that rectangle

google.maps.event.addListener(rectangle, 'mouseover', openInfoWindow);

function openInfoWindow(event) {
    var ne = rectangle.getBounds().getNorthEast();
    var sw = rectangle.getBounds().getSouthWest();

    var content = 'Infowindow content';

    // Set the info window's content and position.
    infoWindow.setContent(contentString);
    infoWindow.setPosition(ne);
    infoWindow.open(map);
}

Upvotes: 1

Related Questions