Google Maps: How to create a custom InfoWindow?

javascript html css google-maps
SarahBeale picture SarahBeale · Oct 5, 2010 · Viewed 245.3k times · Source

The default Google Maps InfoWindow for a map marker is very round. How do I create a custom InfoWindow with square corners?

Answer

Drew Noakes picture Drew Noakes · Oct 5, 2010

EDIT After some hunting around, this seems to be the best option:

https://github.com/googlemaps/js-info-bubble/blob/gh-pages/examples/example.html

You can see a customised version of this InfoBubble that I used on Dive Seven, a website for online scuba dive logging. It looks like this:

There are some more examples here. They definitely don't look as nice as the example in your screenshot, however.

Related questions

Google Maps API v3: InfoWindow not sizing correctly

It appears my InfoWindow, when you click on the home icon on my Google Maps v3, is not properly auto-sizing to the content of the InfoWindow. It gives scrollbars when it should not. The InfoWindow should be properly auto-sizing. Any …

Read More
Remove right and bottom margin on infowindows

I'm playing around with the google InfoWindow. And almost everything is perfect. I'm Just missing something on the windows. I always have a right and bottom white space. I don't mind that much for the bottom one but I'd like …

Read More
Retrieve the position (X,Y) of an HTML element relative to the browser window

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window.

Read More