How to add custom styles for info window with Google Maps API v3 and JavaScript?

Sometimes, we want to add custom styles for info window with Google Maps API v3 and JavaScript.

In this article, we’ll look at how to add custom styles for info window with Google Maps API v3 and JavaScript.

How to add custom styles for info window with Google Maps API v3 and JavaScript?

To add custom styles for info window with Google Maps API v3 and JavaScript, we set the boxStyle property.

For instance, we write

<div class="infobox-wrapper">
  <div id="infobox1">Infobox</div>
</div>

to add divs for the infobox.

Then we write

const infobox = new InfoBox({
  content: document.getElementById("infobox1"),
  disableAutoPan: false,
  maxWidth: 150,
  pixelOffset: new google.maps.Size(-140, 0),
  zIndex: null,
  boxStyle: {
    background:
      "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
    opacity: 0.75,
    width: "280px",
  },
  closeBoxMargin: "12px 4px 2px 2px",
  closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
  infoBoxClearance: new google.maps.Size(1, 1),
});

to create an infobox from the element with the InfoBox constructor.

We set content to the div.

And we set boxStyle to the custom styles.

We also set the margin for the close box with closeBoxMargin and the max width with maxWidth.

Conclusion

To add custom styles for info window with Google Maps API v3 and JavaScript, we set the boxStyle property.