Hide InfoWindow before custom styles are applied

Question

I'm using Google Maps API InfoWindow and I'm setting custom classes via javascript.

 this.infoWindow.addEventListener("domready", this.handleContentReady);

 handleContentReady = () => {
   document.getElementsByClassName("gm-style-iw")[0]
     .parentElement
     .classList
     .add("custom-iw")
 }

The issue with it that when infoWindow is first loaded it doesn't have custom styles yet so it jumps from default to my custom styles

Is there a way to hide infoWindow before custom styles are applied?

Have you tried opening the infowindow out of the viewport (where it can't be seen)? — geocodezip, Dec 12 '18 at 15:36
I've already found and added the solution. Thanks for giving an idea — sheff3rd, Dec 12 '18 at 16:17

score 0 · Answer 1 · answered Dec 12 '18 at 16:16

Okay, I've found an answer

The solution is to set pixelOffset for infoWindow to be outside map before window is open

this.infoWindow.setOptions({ pixelOffset: new google.maps.Size(0, 2000) })
this.infoWindow.open(this.props.mapInstance, this.props.marker);

And to set it back after the content is ready

handleContentReady = () => {
  document.getElementsByClassName("gm-style-iw")[0]
    .parentElement
    .classList
    .add("custom-iw")
  this.infoWindow.setOptions({ pixelOffset: new google.maps.Size(0, 0) })
}

score -1 · Answer 2 · answered Dec 12 '18 at 14:43

-1

I would use CSS to extend styles for gm-style-iw

.gm-style-iw {
  visibility: hidden;
}

Then for custom-iw

.custom-iw {
  visibility: visible;
}

The custom-iw class will be added, it wil overwrite the visibility from gm-style-iw.

answered Dec 12 '18 at 14:43

rufus1530

765
4
19

I've tried this one, this will only hide the content Is there a way to hide tooltip completely? Also note, that .custom-iw is the parent of .gm-style-iw and I can't set its styles until I add custom class to it – sheff3rd Dec 12 '18 at 14:51

Hide InfoWindow before custom styles are applied

2 Answers2