2013-02-27 77 views
1

我有一个单一标记和单个infoBubble的谷歌地图。单击标记时出现infobubble。问题在于信息泡沫直接出现在标记上,而不是结束。查看截图:infoBubble错误定位在标记上

infoBubble关闭: infoBubble is closed infoBubble是开放的: infoBubble is open 这是代码,我使用的地理编码器,因为我有只名叫地址:

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

     } 
    }); 

任何线索,这是为什么发生了什么?

回答

2

ommit the map -option when creating infoBubble。

+0

我已经试过了,结果没变。 – user985409 2013-02-27 12:22:39

0

我觉得这个例子非常方便[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