google-maps-api-3 - infoBubble 错误定位在标记上

Question

我有一个带有单个标记和单个 infoBubble 的谷歌地图。单击标记时会出现信息气泡。问题是信息气泡出现在标记上，而不是在它上面。见截图：

infoBubble 已关闭： infoBubble 已打开： 这是代码，我正在使用地理编码器，因为我只有指定的地址：

geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var myOptions = {
                zoom: 14,
                center: results[0].geometry.location,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });

            //i am using simple InfoBubble initialization
            var infoBubble = new InfoBubble(
                {
                    map: map,
                    content: "<h2>"+name+"</h2><div>"+street+"</div><div>"+city+", "+zip+"</div>"
                });


            google.maps.event.addListener(marker, 'click', function(e) {
                infoBubble.open(map,marker);
            });

        }
    });

任何线索为什么会这样？

Answer 1

创建infoBubblemap时省略 -option。

Answer 2

我发现这个例子非常方便 [http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html][1]，试试下面的代码片段。

var map, infoBubble;
      function init() {
        var mapCenter = new google.maps.LatLng(-35.397, 150.644);
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: mapCenter,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var marker = new google.maps.Marker({
          map: map,
          position: new google.maps.LatLng(-35, 150),
          draggable: true
        });

        infoBubble = new InfoBubble({
          maxWidth: 300
        });

        infoBubble.open(map, marker);

        infoBubble.setContent('This is a sample content') //Please set your content here.

        google.maps.event.addListener(marker, 'click', function() {
          if (!infoBubble.isOpen()) {
            infoBubble.open(map, marker);
          }
          });

      }
      google.maps.event.addDomListener(window, 'load', init);
}


  [1]: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html