CODEWITHSUNDEEP
javascriptcssgoogle-mapsgoogle-maps-api-3
Stooge
Stooge

Reputation: 33

Google Maps InfoWindow: How to Move the Close Button to the Right of the Content and remove the empty space which is on top of the Content?

I noticed that in the last few months google maps has changed its API and the info window that shows up when one clicks on a marker is rendered differently now.

https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

There is a weird div that appears during inspection: enter image description here

Would like the info window the margin on top of the text to be removed and to like this (as it was before the recent changes in google maps): enter image description here

Upvotes: 0

Views: 52

Answers (2)

Dawood Awan
Dawood Awan

Reputation: 7338

This is the new info window header content section.

Check the InfoWindow options docs here: Docs

So you have could hide the header content by setting headerDisabled to true. but this would hide the closed button.

  const infowindow = new google.maps.InfoWindow({
    content: contentString,
    ariaLabel: "Uluru",
    headerDisabled: true
  });

enter image description here

Second option is to use the headerContent to render a header.

  var header = document.createElement('h1');
  header.append("Uluru")
  const infowindow = new google.maps.InfoWindow({
    content: contentString,
    ariaLabel: "Uluru",
    //headerDisabled: true
    headerContent: header
  });

enter image description here

Upvotes: 1

Booster2ooo
Booster2ooo

Reputation: 1447

There are probably more than one anwser. This first that came to my mind would be to make .gm-style-iw-chr absolute:

.gm-style-iw-chr {
  position: absolute;
  right: 0;
}

enter image description here

Upvotes: 1

Related Questions