2013-02-27 49 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