2013-07-14 2 views
1

Похоже позиции карты Infobox Google на PageLoad неправильно, или по крайней мере не так, когда у вас есть высота карта установлена ​​на уровне ниже, чем 400/380px например http://jsfiddle.net/TbDzG/18/Google Maps API v3 InfoWindow на странице загрузки неправильное положение

var startLocation = new google.maps.LatLng(36.151685,-115.152438); 

function initialize() { 
    var mapOptions = { 
     center: startLocation, 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map-canvas"), 
    mapOptions); 

    var marker = new google.maps.Marker({ 
     position: startLocation, 
     map: map, 
     draggable:true, 
     animation: google.maps.Animation.DROP, 
     title:"Hello World!" 
    }); 
    var infowindow = new google.maps.InfoWindow(); 
infowindow.setContent('some content here'); 
infowindow.open(map, marker); 


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

Кто-нибудь знает трюк о том, как переместить его в нужное положение и центрировать инфобокс, а не центрировать маркер?

ответ

5

Вы не можете центрировать инфоиндустрию, поскольку маркер и информация (+ карта) имеют одинаковую позицию.

Попробуйте это, когда карта будет загружена, InfoWindow будет открыт и будет панорамировать карту.

var infowindow = new google.maps.InfoWindow(); 
infowindow.setContent('some content here'); 
google.maps.event.addListenerOnce(map, 'idle', function(){infowindow.open(map, marker); }); 

http://jsfiddle.net/iambnz/jAgcz/

+0

Спасибо большое! – Benn

1

Если открыть InfoWindow на мыши и вызвать щелчок на маркере после того как карта заканчивает рендеринга (в «холостом» событие), карта будет двигаться так InfoWindow отображается полностью.

var startLocation = new google.maps.LatLng(36.151685,-115.152438); 

function initialize() { 
    var mapOptions = { 
     center: startLocation, 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map-canvas"), 
    mapOptions); 

    var infowindow = new google.maps.InfoWindow(); 
    var marker = new google.maps.Marker({ 
     position: startLocation, 
     map: map, 
     draggable:true, 
     animation: google.maps.Animation.DROP, 
     title:"Hello World!" 
    }); 
    google.maps.event.addListener(marker,'click', function(evt) { 
     infowindow.setContent('some content here'); 
     infowindow.open(map, marker); 
    }); 
    google.maps.event.addListenerOnce(map,'idle',function() { 
     google.maps.event.trigger(marker,'click'); 
    }); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 

http://jsfiddle.net/YWbXE/2/

Смежные вопросы