<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.
