I have google map infowindow,i want to set border radius to infowindow. so how do it.

and this is my code

  var latlng = new google.maps.LatLng(lat,lng);
  var myOptions = {
   zoom : 8, 
   center : latlng,
   mapTypeId : google.maps.MapTypeId.ROADMAP
   }
 var map = new google.maps.Map(document.getElementById("map_canvass"),
 myOptions);
 var infowindow = new google.maps.InfoWindow();
 infowindow.open(map, marker); 

I have google map infowindow,i want to set border radius to infowindow. so how do it.

and this is my code

  var latlng = new google.maps.LatLng(lat,lng);
  var myOptions = {
   zoom : 8, 
   center : latlng,
   mapTypeId : google.maps.MapTypeId.ROADMAP
   }
 var map = new google.maps.Map(document.getElementById("map_canvass"),
 myOptions);
 var infowindow = new google.maps.InfoWindow();
 infowindow.open(map, marker); 

• javascript
• ajax
• google-maps
• google-maps-api-3

• A very similar question was answered already: Google Maps: How to create a custom InfoWindow?. It specifically discussed setting rounded corner radius. – Jim DeLaHunt Commented Jan 19, 2012 at 15:23

5 Answers 5

You can do it also with CSS. For me works this:

#map_canvass > div > div > div > div > div:not(:first-child) > div > div:nth-child(12) {
   border-radius: 10px 10px 10px 10px;
}

I think you have to create a custom infobox overlay to change anything other than the content, the google maps infoWindow is if I'm not mistaken just a scaled image.

Go custom! Example here: http://google-maps-utility-library-v3.googlecode./svn/trunk/infobubble/examples/example.html

and here: http://gmaps-samples-v3.googlecode./svn/trunk/infowindow_custom/infowindow-custom.html

As I don't like counting to 12, I found the draggable attribute could identify it:

jQuery:

$(document).find('#map_canvas').find( 'div[draggable="false"]' ).css('border-radius', '5px');

CSS:

#map_canvas div[draggable="false"] { border-radius: 5px }

Yeah, seem the link is dead and old code no longer works. try my script

var infoElement = $('.gm-style-iw').prev();
var boxWrapper = infoElement[0].childNodes[1],
    boxContainer = infoElement[0].childNodes[3];

//then set border-radius to wrapper and container via jQuery
$(boxWrapper).css({
    borderRadius: 4
});
$(boxContainer).css({
    border: '2px solid #FFC800', // if you wanna override new border
    borderRadius: 4,
});

preview here

The previous answers seems to be outdated, i succeed doing this with the following css :

.gm-style > div > div + div + div > div > div + div > div > div > div + div {
    border-radius: 10px 10px 10px 10px !important;
}