4

I am currently creating a map with multiple markers using the API V3 of Google Map. a click on the marker triggers the display of an InfoWindow describing details of this latter.

I need to know how to make the corners of my InfoWindow round like in the API V2 of Google Map?

geocodezip
  • 158,664
  • 13
  • 220
  • 245
user1603417
  • 49
  • 1
  • 2
  • check this answer http://stackoverflow.com/questions/3860277/google-maps-how-to-create-a-custom-infowindow – Jorge Aug 16 '12 at 14:31

3 Answers3

1

The infobubble lets you create custom infowindows and configure them (pretty much) how you like.

geocodezip
  • 158,664
  • 13
  • 220
  • 245
  • I tried the solution infoBubble and it worked on FireFox but in IE it doesn't work!! here is a simple example of code on which I based. Thank you for telling me what I need to add in this code – user1603417 Aug 17 '12 at 13:36
  • Was there supposed to be a link? Maybe edit your question to include it. – geocodezip Aug 17 '12 at 13:38
1

You can't customize the css of the existing InfoWindow, but you can replace it with something more customizable. I like InfoBox because it is very similar to the regular InfoWIndow but with more styling options. InfoBox is actually part of the same Google Maps Utility Library that geocodezip linked to. I recommend downloading both and seeing which one fits your needs best.

google-maps-utility-library-v3

xcer
  • 1,697
  • 2
  • 16
  • 18
1

I've used this code as a dirty hack to achieve this:

google.maps.event.addListener(this._w, 'domready', function () {
$('#map .bubbleContent')
    .parent().parent().parent().prev()
    .css('borderRadius', 5);
});

This code uses jQuery (can also be done width plain JS). The selector #map .bubbleContent finds the wrapping div of the HTML-Content I've put into the infoWindow. #map is my map container, just to be sure not to select any div out of the map.

Note! This code may break whenever Google changes the markup of the infowindow.

LeJared
  • 2,032
  • 1
  • 17
  • 28