How to avoid InfoWindow overlapping on Google Map

Question

I've seen other question similar to this (here), but I haven't been able to get more information from the post. Here is how I'm trying to achieve it, but the windows (Site 2 and Site 4) are overlapping each other.

Runnable snippet:

var locations = [
  // Array Format: Site Name, Site Info, Marker lat, Marker lng, InfoWindow lat, InfoWindow lng
  ['Site 1', '<div>' + '<h6>Site 1</h6>' + 'PR 84.68 <br />' + 'kWh 1618' + '</div>', 23.141162, 120.120495, 23.141162, 120.120495],
  ['Site 2', '<div>' + '<h6>Site 2</h6>' + 'PR 84.68 <br />' + 'kWh 1618' + '</div>', 22.711022, 120.541029, 22.711022, 120.541029],
  ['Site 3', '<div>' + '<h6>Site 3</h6>' + 'PR 84.68 <br />' + 'kWh 1618' + '</div>', 23.317840, 120.267284, 23.317840, 120.267284],
  ['Site 4', '<div>' + '<h6>Site 4</h6>' + 'PR 84.68 <br />' + 'kWh 1618' + '</div>', 22.71637, 120.54331, 24.71637, 120.54331],
];

var infowindow = new google.maps.InfoWindow();
var marker, i;

function initMap() {
  var mapOptions = {

    center: {
      lat: 24.56331,
      lng: 120.72904
    },

    zoom: 9,
    gestureHandling: "greedy",
    scrollwheel: false,
    zoomControl: true,
  };

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

  setMarkers(map, locations)

  function setMarkers(map, locations) {

    var i

    for (i = 0; i < locations.length; i++) {
      var name = locations[i][0]
      var lat = locations[i][2]
      var long = locations[i][3]
      var latInfo = locations[i][4]
      var longInfo = locations[i][5]

      var latlngset = new google.maps.LatLng(lat, long);

      var marker = new google.maps.Marker({
        title: name,
        position: latlngset,
        winLatLng: winLatLng,
        map: map
      });
      map.setCenter(marker.getPosition())

      var content = locations[i][1];

      var infowindow = new google.maps.InfoWindow()

      var winLatLng = new google.maps.LatLng(latInfo, longInfo);

      google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow, winLatLng) {
        return function() {
          infowindow.setContent(content);
          // infoWindow.setPosition(winLatLng);
          // infowindow.open(map)
          infowindow.open(map, marker);
        };
      })(marker, content, infowindow, winLatLng));
      google.maps.event.trigger(marker, 'click');
    }
  }

}

google.maps.event.addDomListener(window, "resize", initMap);
google.maps.event.addDomListener(window, "load", initMap);

#map-canvas {
  width: 100%;
  height: 1000px;
  border: 1px solid #343a40;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<div id="map-canvas"></div>

Below is a list of the Marker and InfoWindow locations.

var locations = [
  // Array Format: Site Name, Site Info, Marker lat, Marker lng, InfoWindow lat, InfoWindow lng
  ['Site 1', '<div>'+'<h6>Site 1</h6>'+'PR 84.68 <br />'+'kWh 1618'+'</div>', 23.141162, 120.120495, 23.141162, 120.120495],
  ['Site 2', '<div>'+'<h6>Site 2</h6>'+'PR 84.68 <br />'+'kWh 1618'+'</div>', 22.711022, 120.541029, 22.711022, 120.541029],
  ['Site 3', '<div>'+'<h6>Site 3</h6>'+'PR 84.68 <br />'+'kWh 1618'+'</div>', 23.317840, 120.267284, 23.317840, 120.267284],
  ['Site 4', '<div>'+'<h6>Site 4</h6>'+'PR 84.68 <br />'+'kWh 1618'+'</div>', 22.71637, 120.54331, 24.71637, 120.54331],
];

It seems like a naive solution... Is there any available attribute (e.g. Bootstrap data-placement) that can set the position of the InfoWindow on top, bottom, left or the right side of the mark? Perhaps I misunderstood.

I also tried on setPosition on it but the infoWindows can't display properly.

  function setMarkers(map,locations){

      var i

      for (i = 0; i < locations.length; i++)
      {  
        var name =  locations[i][0]
        var lat = locations[i][2]
        var long = locations[i][3]     
        var latInfo = locations[i][4]
        var longInfo =  locations[i][5]      

        var latlngset = new google.maps.LatLng(lat, long);     

        var marker = new google.maps.Marker({  
              title: name,
              position: latlngset,
              winLatLng: winLatLng,
              map: map
            });
            map.setCenter(marker.getPosition())

            var content = locations[i][1];     

        var infowindow = new google.maps.InfoWindow()

      var winLatLng = new google.maps.LatLng(latInfo, longInfo);

      google.maps.event.addListener(marker, 'click', (function(marker,content,infowindow,winLatLng){ 
            return function() {
              infowindow.setContent(content);
              infoWindow.setPosition(winLatLng);
              infowindow.open(map)               
            };
        })(marker,content,infowindow,winLatLng)); 
      google.maps.event.trigger(marker, 'click');
      }
  }

Why are you opening so many infowindows and expecting them to not overlap each other? Infowindows are rather primitive and don't lend themselves to this kind of use. There are a number of other ways you could present the information and avoid this conflict, but it's hard to make a specific suggestion without knowing more about what you want to do. What I can tell you for sure is that if you're thinking about how to move infowindows around, you're on the wrong track. If you could step back a level and give a more general description of what you're trying to do, I may have some suggestions. — Michael Geary, Mar 19 '18 at 03:45
@MichaelGeary Thanks for your invaluable suggestion. In my case, I want to monitor the situation (`e.g. performance ratio, Kilowatt-hour, etc.`) of all power stations (`more than 100`) by visual maps. All information at a glance without user zoom in/out if possible. That's why I want to avoid infowindows overlap each other. However, a lot of markers display in the same region that could cause hard to see and misunderstand. — Penny Liu, Mar 19 '18 at 05:49
You might consider a side-by-side view, with a list of power stations on the left and a map on the right. The list would be scrollable and it would update when you zoom in in the map to show only the stations visible on the map. When you roll over an item on the list, it could highlight the matching marker, and clicking a list item would zoom the map in and maybe expand the list item to show more info about that station. Similarly, the map could have multiple markers (but no infowindows); hovering over a marker could scroll the list and clicking would open details. — Michael Geary, Mar 21 '18 at 18:02
Of course you would tweak those UI ideas as needed; for example on a mobile device there is typically no "hover" interaction, so you'd do everything with taps on the map or in the list. I would also use a smaller custom marker for the power station locations on the map. — Michael Geary, Mar 21 '18 at 18:08
Also on a personal note, my first comment sounds a bit harsh now that I see it again. I apologize; I really didn't mean it that way. I'm glad you didn't take offense. And congratulations on your recent graduation! :-) — Michael Geary, Mar 21 '18 at 18:12
Hi @MichaelGeary. Thank you for your insightful comments and suggestions. The current web page only supports for extra large devices of the situation room (`screen width from 1200 pixels and above`). The mobile website experiences will be the next concern. I will continue to trial and error for these issues. Thanks again for all your help! :-) — Penny Liu, Mar 22 '18 at 13:31

score 0 · Answer 1 · answered Mar 16 '18 at 15:39

0

There is a way to do that. To move the infowindow, use setPosition.

Call setPosition() on the info window, or Attach the info window to a new marker using the InfoWindow.open() method.

Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.

Details on infowindow here: InfoWindows

Customization InfoWindow example here: Customization

answered Mar 16 '18 at 15:39

MRestine

133
8

https://stackoverflow.com/questions/49386189/google-maps-infowindow-some-time-show-old-background-when-i-move-cursor – MRestine Mar 20 '18 at 15:44
I found a post on customizing the infowindow. I believe this is the answer you are looking for. – MRestine Mar 20 '18 at 15:47

How to avoid InfoWindow overlapping on Google Map

1 Answers1