How can I style google maps v3 InfoWindow to achieve the same style as on maps.google.com?
Asked
Active
Viewed 7,793 times
6
-
After short investigation using chrome's developer tools it is clear that google is not just styling its rectangular infowindow with different css rules, but it has completely different structure. Just compare those two screenshots: [maps.google.com](https://img.skitch.com/20110706-c8b5tr6f3a7c5n36q6rr41i2gm.png) [classic official api](https://img.skitch.com/20110706-p5m63aiyjr7efk8ym34upwsaky.png) – Lambder Jul 06 '11 at 09:55
5 Answers
7
Rectangular InfoWindows are now the default style since Maps API 3.7 (current nightly version).
Chris Broadfoot
- 5,082
- 1
- 29
- 37
-
-
-
@refhat - InfoBubble (http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html) – Tony May 21 '12 at 08:59
2
The API does not provide for robust styling of the InfoWindow objects (or, if it does, it is not documented). You can see what options are available at http://code.google.com/apis/maps/documentation/javascript/reference.html#InfoWindowOptions. As you can see, right now, there's nothing for things like rounded corners vs. not-rounded corners, etc.
So, sorry to say, it would seem like you are stuck messing with stylesheets, at least at the current time.
Trott
- 66,479
- 23
- 173
- 212
1
U can go deep in Css then select responsible rectangle for infoWindow and set styles;
#map_canvas div div div div div div div:nth-of-type(12) {
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px; }
deweweb
- 41
- 4
1
Actually thats the first time i'm seeing this. Im sure with google's new design update they are sure to update the Api windows. For the meantime I would use: Google Maps: How to create a custom InfoWindow?
