LINUX.ORG.RU

JS - загрузка api-maps.yandex.ru


0

1

Здоровья всем.

На странце: http://ru.interhospital.com/hospital.pl?country=11&region=54&city=23&clinic=0001 карта яндекса открывается по кнопке.

Загрузка

<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
бывает очень тормозит, а пользователь, возможно, и не будет смотреть карту.

Как грамотно убрать загрузку с api-maps.yandex.ru в сам скрипт, и при его выполнении дождаться конца этой загрузки?

Скрипт


// Нужно вставить 
// <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
// и дождаться конца загрузки

var myMap;
$(document).ready(function()
	  {
//           эта функция для выдвижения меню по событию click
		  $("#menupush p.menuh").click(function()
		  {
			  $(this).next("div.menu_conteiner").slideToggle(300).siblings("div.menu_conteiner").slideUp("slow");
//               $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_conteiner").slideToggle(300).siblings("div.menu_conteiner").slideUp("slow");
		  init();
		  });
	});

		function init () {


				if (!myMap) {
						myMap = new ymaps.Map('map', {
							center: [a, b], 
							zoom: zY
						});
						$("#toggle").attr('value', closeY);



            myMap.controls
                  .add('zoomControl')
                  .add('typeSelector')
                  .add('mapTools');

           myMap.controls
                .add(new ymaps.control.ScaleLine())
                
	   myPlacemark = new ymaps.Placemark([a, b], {
                    
						// Свойства
                    
//                         iconContent: 'Щелкни по мне',
						balloonContentHeader: n,
//                         balloonContentBody: 'Содержимое <em>балуна</em>',
//                         balloonContentFooter: 'Подвал'
						}, {
						
						// Опции
						
			preset: 'twirl#blueStretchyIcon' // иконка растягивается под контент
						});

			myMap.geoObjects.add(myPlacemark);
	
					
			}
			else {
				myMap.destroy();// Деструктор карты
				myMap = null;
				$("#toggle").attr('value', showY);
			}
}

Если используешь jQuery, то так:

$.getScript("http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU", function() {
  // здесь код, который должен быть выполнен после загрузки апи
});

Однако при таком способе загрузки апи вылезают некоторые неприятные баги. Хотя в твоём случае должно сработать.

Apple-ch ★★ ()
Ответ на: комментарий от Apple-ch

Я плохо спросил :)

Да, так работает

$.getScript("http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU", function() {
  // здесь код, который должен быть выполнен после загрузки апи
});
но апи грузится при загрузке страницы.

Я хотел сказать после клика по кнопке

var myMap;
$(document).ready(function()
	  {

//           эта функция для выдвижения меню по событию click
		  $("#menupush p.menuh").click(function()
		  {
// Нужно вставить 
// <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
// и дождаться конца загрузки


			  $(this).next("div.menu_conteiner").slideToggle(300).siblings("div.menu_conteiner").slideUp("slow");
//               $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_conteiner").slideToggle(300).siblings("div.menu_conteiner").slideUp("slow");
		  init();
		  });
	});

medexpert ()
Ответ на: комментарий от medexpert

Там еще много потом будет проблем с тем что объект будет еще не загружен, а ты попытаешься с ним работать, допустим полигон посторить или точку выставить

spiritkhl ()
Ответ на: комментарий от spiritkhl

Да, так не прошло

$(document).ready(function() {

		// эта функция для выдвижения меню по событию click
		 $("#menupush p.menuh").click(function() {
		  
			  
			$(this).next("div.menu_conteiner").slideToggle(300).siblings("div.menu_conteiner").slideUp("slow");
				
				$.getScript("http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU", function() {
				// здесь код, который должен быть выполнен после загрузки апи
			  
					init();
				});

		});



});

medexpert ()
Ответ на: комментарий от medexpert
		$.getScript('http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU',function(){ 
			YMaps.load(function(){
// тут весь код, можно каллбаки навесить
                         });
                });

Попробуй так, это работало с прошлой версией апи, не знаю как со второй будет пахать

spiritkhl ()
Ответ на: комментарий от spiritkhl

В новой версии — ymaps.ready(). Впрочем, в новой версии пространство имён можно переназвать как угодно.

Резюме:

$.getScript('http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU', function() {
  // к этому моменту апи загрузился
  ymaps.ready(function() {
    // к этому моменту апи проинициализировался
  });
});
Apple-ch ★★ ()
Ответ на: комментарий от Apple-ch

Да в новой версии много че переделали к лучшему, скоро буду заниматься портированием системы своей на эту новую версию

Самое приятное что в новой версии без костылей можно привязать тайлы OSM и гуглокарт и чего угодно

spiritkhl ()
Ответ на: комментарий от medexpert

Второе отделение :) Как я и думал, в гугле не получилось

var map;
$(document).ready(function() {
		// эта функция для выдвижения меню по событию click
		$("#menupush p.menuh").click(function() {

			$(this).next("div.menu_conteiner").slideToggle(300).siblings("div.menu_conteiner").slideUp("slow");
			
			$.getScript("https://maps.googleapis.com/maps/api/js?sensor=false", function() {
//                 google.maps.Ready(function() { // Firebug - google.maps.Ready is not a function
				google.maps.Load(function() {	 // Firebug - google.maps.LatLng is not a constructor
					if (!map) {
						initialize()
					}
					else {
						map = null;
						$("#goggle").attr('value', showG);
					}
				});
			});
		});
});

			function initialize() {

					var myLatlng = new google.maps.LatLng(a, b);
    
					var myOptions = {
						zoom: 15,
						center: myLatlng,
						mapTypeId: google.maps.MapTypeId.ROADMAP
					};

					map = new google.maps.Map(document.getElementById("map"), myOptions);
					$("#goggle").attr('value', closeG);
					
					var marker = new google.maps.Marker({
						position: myLatlng,
				//     title: n
					});

				// To add the marker to the map, call setMap();
						marker.setMap(map);
			}

medexpert ()
Ответ на: комментарий от medexpert

А зачем гугл отдельно инициализируешь? Есть такая штука, позволит тебе много карт держать в одном апи, а так задолбаешься работать с 2-мя апи

						<script type="text/javascript">
						window.onload=function(){
						ym.ready(function() {
						    var layerOSM = function() {
							 return new ym.Layer("http://otile%d.mqcdn.com/tiles/1.0.0/osm/%z/%x/%y.png", {
							     projection: ym.projection.sphericalMercator
							 });
						    };
						    var osMap = new ym.MapType("OSMap", [layerOSM]);
						    ym.mapType.storage.add("openstreet#map", osMap);

						    var layerGoogle = function() {
							 return new ym.Layer("http://mt0.google.com/vt/lyrs=m@176000000&hl=ru&%c", {
							     projection: ym.projection.sphericalMercator
							 });
						    };
						    var googleMap = new ym.MapType("GoogleMap", [layerGoogle]);
						    ym.mapType.storage.add("google#map", googleMap);

						    var layerMail = function() {
							 return new ym.Layer("http://t0maps.mail.ru/tiles/scheme/%z/%y/%x.png", {
							     projection: ym.projection.sphericalMercator
							 });
						    };
						    var mailMap = new ym.MapType("MailMap", [layerMail]);
						    ym.mapType.storage.add("mail#map", mailMap);

						    var map = new ym.Map("map", {
							 center: [55.734219,37.441719],
							 zoom: 16,
						        behaviors: ["default", "scrollZoom"]
						    }, {});


	

						    var yandexSelectorItem = new ym.control.ListBoxItem({
							 data: {
							     content: "Яндекс.Схема"
							 }
						    });
						    yandexSelectorItem.events.add("click", function(e) {
							 this.setType("yandex#map");
						    }, map);

						    var osmSelectorItem = new ym.control.ListBoxItem({
							 data: {
							     content: "Open Street Map"
							 }
						    });
						    osmSelectorItem.events.add("click", function(e) {
							 this.setType("openstreet#map");
						    }, map);

						    var googleSelectorItem = new ym.control.ListBoxItem({
							 data: {
							     content: "Google.Схема"
							 }
						    });
						    googleSelectorItem.events.add("click", function(e) {
							 this.setType("google#map");
						    }, map);

						    var mailSelectorItem = new ym.control.ListBoxItem({
							 data: {
							     content: "Mail.Схема"
							 }
						    });
						    mailSelectorItem.events.add("click", function(e) {
							 this.setType("mail#map");
						    }, map);

						    var typeSelector = new ym.control.ListBox({
							 data: {
							     title: "Выбрать карту"
							 },
							 items: [yandexSelectorItem, osmSelectorItem, googleSelectorItem, mailSelectorItem]
						    });

						    map.controls.add(typeSelector, {
							 right: 5,
							 top: 5
						    });
						    map.controls.add("zoomControl", {
							 left: 5,
							 top: 5
						    });
						})
						}

						</script>
						<script src="http://api-maps.yandex.ru/2.0.7/?ns=ym&load=package.full&lang=ru-RU"></script>

spiritkhl ()
Ответ на: комментарий от spiritkhl

Ой!... Спасибо, буду разбираться :)

Для гугла держу свой, т.к. пользователь на странице

http://en.interhospital.com/hospital.pl?country=19&region=32&city=02&clinic=0031

ждет увидить гугл, и только гугл (или бинг). А яндекс может вызвать нежелательное замешательство :)

+ гугл дает многоязыковой интерфейс, в зависимости от настроек браузера

medexpert ()
Ответ на: комментарий от medexpert

Вот:

var map;

$(document).ready(function() {
		// эта функция для выдвижения меню по событию click
		$("#menupush p.menuh").click(function() {

			$(this).next("div.menu_conteiner").slideToggle(300).siblings("div.menu_conteiner").slideUp("slow");
			
			$.getScript("https://maps.googleapis.com/maps/api/js?sensor=false&callback=maps_n", function() {
					
			});
		});
});

				function maps_n() {
					if (!map) {
						initialize()
					}
					else {
						map = null;
						$("#goggle").attr('value', showG);
					}
				};

	function initialize() {

		var myLatlng = new google.maps.LatLng(a, b);
    
		var myOptions = {
			zoom: 15,
			center: myLatlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};

		map = new google.maps.Map(document.getElementById("map"), myOptions);
			$("#goggle").attr('value', closeG);
					
			var marker = new google.maps.Marker({
			position: myLatlng,
			//     title: n
		        });

			// To add the marker to the map, call setMap();
			marker.setMap(map);
	}
    

medexpert ()

var loaded_scripts = {};
function load_script( url, onload, onload_params )	{
	if( typeof(loaded_scripts[url]) != 'undefined' ) return;
	
	if( typeof(onload_params) == 'undefined' ) var onload_params = {};
	if( typeof(onload) == 'undefined' ) var onload = function(){};
	
	
	var script = document.createElement( "script" );
	script . src = url;
	script . type = "text/javascript";
	
	var triggered = 0;
	script.onreadystatechange= function () {
		if( !triggered && (this.readyState == 'complete' || this.readyState == 'loaded') )
		{
			onload( onload_params );
			triggered = 1;
		}
	}
	script.onload = function(){ onload(onload_params); };
	
	document.getElementsByTagName( "head" )[ 0 ] . appendChild( script );
	
	loaded_scripts[ url ] = 1;
}

	
load_script(
	"http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU",
	function(){
		ymaps.ready(function(){

			var myMap = new ymaps.Map( "my_map",
				{
					center: [57.513314, 41.23869],
					zoom: 11
				},
				{
					balloonMaxWidth: 200
				}
			);
			// ...etc code
		});
	}
);
todk ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.