Javascript-форум - Отображение меток на карте

Javascript-форум (https://javascript.ru/forum/)

- Javascript под браузер (https://javascript.ru/forum/css-html/)

- - Отображение меток на карте (https://javascript.ru/forum/css-html/57258-otobrazhenie-metok-na-karte.html)

Отображение меток на карте

Доброго времени суток! Работая с api google в какой-то момент столкнулся со странной проблемой. Если удаляю alert(совершенно бесполезный) метки перестают отображаться. Чего-то я не понимаю,подскажите, пожалуйста в чем тут дело.

<!DOCTYPE html>
<html>
<head>	
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
var latitude=0;
var longitude=0;
var places = [];

$.getJSON("http://freegeoip.net/json/198.11.179.103", function(json) {
	latitude = json.latitude;
	longitude = json.longitude;
	places.unshift([,35.333332,25.133333]);
	places.unshift([,39.704445,21.626944]);
	places.unshift([,latitude,longitude]);
});
		
  function initialize() {
    var latlng = new google.maps.LatLng(56.323678, 44.0);
    var myOptions = {
      zoom: 15,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
		
		setMarkers(map, places);
  };  
	
	
    function setMarkers(map, locations) {
		//Определяем область показа маркеров
		var latlngbounds = new google.maps.LatLngBounds();	 
         
         for (var i = 0; i < places.length; i++) {
            var myLatLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
			//Добавляем координаты маркера в область
			latlngbounds.extend(myLatLng);
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,   
                title: locations[i][0],
            }); 
         }
	//Центрируем и масштабируем карту
	map.setCenter( latlngbounds.getCenter(), map.fitBounds(latlngbounds));	 
    };
alert("");
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:800px; height:600px"></div>
</body>
</html>

rogaz,
то есть вы думаите что строка 12 сработает мгновенно и незатупит строку 38 ?

Цитата:

Сообщение от рони (Сообщение 381688)

rogaz,
то есть вы думаите что строка 12 сработает мгновенно и незатупит строку 38 ?

не знаю, но раз работает видимо она ей не мешает. а как бы вы изменили код?

Цитата:

Сообщение от rogaz

но раз работает

как раз неработает -- нет у вас places на момент запуска setMarkers - за счёт алерта ответ с сервера успевает приходить

вариант 1 самый простой - по готовности html идёт запрос на сервер - пришёл ответ запускаем инициализацию

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
var latitude=0;
var longitude=0;
var places = [];
 $(function(){
$.getJSON("http://freegeoip.net/json/198.11.179.103", function(json) {
	latitude = json.latitude;
	longitude = json.longitude;
	places.unshift([,35.333332,25.133333]);
	places.unshift([,39.704445,21.626944]);
	places.unshift([,latitude,longitude]);
    initialize()
});
});
  function initialize() {
    var latlng = new google.maps.LatLng(56.323678, 44.0);
    var myOptions = {
      zoom: 15,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

		setMarkers(map, places);
  };


    function setMarkers(map, locations) {
		//Определяем область показа маркеров
		var latlngbounds = new google.maps.LatLngBounds();

         for (var i = 0; i < places.length; i++) {
            var myLatLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
			//Добавляем координаты маркера в область
			latlngbounds.extend(myLatLng);
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                title: locations[i][0],
            });
         }
	//Центрируем и масштабируем карту
	map.setCenter( latlngbounds.getCenter(), map.fitBounds(latlngbounds));
    };

</script>
</head>
<body >
  <div id="map_canvas" style="width:800px; height:600px"></div>
</body>
</html>

тоже самое чуть иначе

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
var latitude=0;
var longitude=0;
var places = [];
 $(function(){
$.getJSON("http://freegeoip.net/json/198.11.179.103", function(json) {
	latitude = json.latitude;
	longitude = json.longitude;
	places.unshift([,35.333332,25.133333]);
	places.unshift([,39.704445,21.626944]);
	places.unshift([,latitude,longitude]);
}).done(initialize);
});
  function initialize() {
    var latlng = new google.maps.LatLng(56.323678, 44.0);
    var myOptions = {
      zoom: 15,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

		setMarkers(map, places);
  };


    function setMarkers(map, locations) {
		//Определяем область показа маркеров
		var latlngbounds = new google.maps.LatLngBounds();

         for (var i = 0; i < places.length; i++) {
            var myLatLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
			//Добавляем координаты маркера в область
			latlngbounds.extend(myLatLng);
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                title: locations[i][0],
            });
         }
	//Центрируем и масштабируем карту
	map.setCenter( latlngbounds.getCenter(), map.fitBounds(latlngbounds));
    };

</script>
</head>
<body >
  <div id="map_canvas" style="width:800px; height:600px"></div>
</body>
</html>