How can I make a Google Map InfoWindow tilt at a certain angle?

Question

I need to make multiple info windows for a single marker. Normally they become overlapped. Can I make google map Info Window like tilted or in certain angle so that they can be visible all at a time clearly?

Answer 1

You could use the Snazzy Info Window plugin. You create 3 SnazzyInfoWindow objects and set a different placement option for each one of them.

Example:

var infoWindowData = [
  { content: 'Info Window 1', placement: 'top'},
  { content: 'Info Window 2', placement: 'right'},
  { content: 'Info Window 3', placement: 'bottom',}
];

var marker = new google.maps.Marker({
  map: map,
  position: { lat: 40, lng: 20 }
})

// Loop through the data and create a SnazzyInfoWindow for each item in the array
infoWindowData.forEach(function(entry) {
  var infoWindow = new SnazzyInfoWindow({
    marker: marker,
    content: entry.content,
    placement: entry.placement,
  });
  infoWindow.open();
})

Here is a JSBin with a working example.