how do set border radius for google map infowindow

Question

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);

A very similar question was answered already: [Google Maps: How to create a custom InfoWindow?](http://stackoverflow.com/questions/3860277/google-maps-how-to-create-a-custom-infowindow). It specifically discussed setting rounded corner radius. — Jim DeLaHunt, Jan 19 '12 at 15:23

Andy R. · Answer 1 · 2013-05-16T08:20:13.147

2

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;
}

edited May 16 '13 at 08:20

answered May 16 '13 at 08:07

Andy R.

21
4

score 1 · Accepted Answer · answered Jan 19 '12 at 15:30

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.com/svn/trunk/infobubble/examples/example.html

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

score 0 · Answer 3 · answered Jul 25 '13 at 05:07

0

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 }

answered Jul 25 '13 at 05:07

Gordon Rouse

301
3
6

score 0 · Answer 4 · answered Sep 24 '16 at 05:50

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

score 0 · Answer 5 · answered Jan 16 '19 at 10:01

0

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;
}

answered Jan 16 '19 at 10:01

lovis91

1,988
2
14
24

how do set border radius for google map infowindow

5 Answers5