如何设置谷歌地图infowindow的边界半径

时间:2012-01-19 08:29:11

标签: javascript ajax google-maps google-maps-api-3

我有谷歌地图infowindow,我想设置边界半径到infowindow。  怎么做呢。

这是我的代码

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

5 个答案:

答案 0 :(得分:2)

您也可以使用CSS。对我来说,这是:

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

答案 1 :(得分:1)

我认为你必须创建一个自定义的信息框叠加来更改除内容以外的任何内容,谷歌地图infoWindow是我没有错误只是一个缩放的图像。

去定制!这里的例子: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html

在这里: http://gmaps-samples-v3.googlecode.com/svn/trunk/infowindow_custom/infowindow-custom.html

答案 2 :(得分:0)

由于我不喜欢数到12,我发现draggable属性可以识别它:

jQuery的:

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

CSS:

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

答案 3 :(得分:0)

是的,似乎链接已经死了,旧代码不再有效。试试我的剧本

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

答案 4 :(得分:0)

以前的答案似乎已经过时,我通过以下CSS成功完成了此任务:

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