Общее·количество·просмотров·страницы

Java Dev Notes - разработка на Java (а также на JavaScript/Python/Flex и др), факты, события из АйТи

воскресенье, 30 мая 2010 г.

Google Maps V3 - метод Map.getBounds() возвращает undefined

Сегодня столкнулся с тем, что в Google Maps V3 getBounds() у объекта карты возвращает undefined. Пример кода:

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
 
function initialize() {
var latlng = new google.maps.LatLng(60, 60);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
var bounds = map.getBounds();
console.debug(bounds);
if (!bounds) {
alert('Не могу определить границы карты сразу после ее создания!');
}
 
var loc= new google.maps.LatLng(60.0, 60.0);
var marker = new google.maps.Marker({
position: loc,
map: map
});
 
bounds = map.getBounds();
console.debug(bounds);
if (!bounds) {
alert('Не могу определить границы карты даже после добавления маркера!');
}
}
 
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>


Оказывается, дело в том, что сразу после создания карта еще не инициализировалась. Поэтому ее границы не определены, и поэтому метод getBounds() возвращает undefned

Поэтому границы карты следует получать, после того, как карта инициализировалась. Для этого нужно ставить обработчик события idle. Вот как это делается:

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
 
function initialize() {
var latlng = new google.maps.LatLng(60, 60);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
var marker = new google.maps.Marker({
position: new google.maps.LatLng(60.0, 60.0);,
map: map
});
 
google.maps.event.addListenerOnce(map, 'idle', function(){
console.log('IDLE EVENT CallBack');
console.debug(map.getBounds());
});
}
 
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>


Также проблема обсуждается Stack Overflow: Google Maps Api v3 - getBounds is undefined, а также есть issue на Google Code: Issue 1692: Map bounds not available on first load of the map.

Комментариев нет:

Отправить комментарий

Постоянные читатели