2013-02-27 1 views
1

У меня есть карта google с одним маркером и одним инфо-банком. При нажатии на маркер появляется информационная строка. Проблема в том, что инфообъектив появляется прямо на маркере, а не над ним. Смотрите скриншоты: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 map -описание при создании infoBubble.

+0

Я уже пробовал, без изменений. – user985409

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