Hello.

I connect Yandex maps API. Like this

<script src="//api-maps.yandex.ru/2.0/?load=package.standard&lang=ru-RU" type="text/javascript"></script>

I show the map by clicking on the link (the block unfolds).

 $('#map-[[+id]]-link').on("click", function(){ if(!$(this).hasClass('visible')){ ymaps.ready(init); function init(){ var myMap = new ymaps.Map ("map-[[+id]]", { center: [[[+tv.coord]]], zoom: 15, }); var myPlacemark1 = new ymaps.Placemark([[[+tv.coord]]]); myMap.geoObjects.add(myPlacemark1); } $(this).addClass('visible'); } return false; });

[[+ tv.coord]] etc. - placeholders, which are replaced in html with specific values. Works in all browsers except Firefox. The latter gives this error

ReferenceError: init is not defined ymaps.ready (init);

Although I check in the console: the ymaps object exists.

What could be the problem?

Thank you.

    2 answers 2

    In general, I solved the problem myself.

    The function needed to be described before the call.

     if(!$(this).hasClass('visible')){ function init(){ var myMap = new ymaps.Map ("map-[[+id]]", { center: [[[+tv.coord]]], zoom: 15, }); var myPlacemark1 = new ymaps.Placemark([[[+tv.coord]]]); myMap.geoObjects.add(myPlacemark1); } ymaps.ready(init); $(this).addClass('visible'); }

    I would be very grateful if someone could explain why. Something about scope and local context floats into memory, but why does it work in other browsers?

      There is a very simple solution from Yandex itself:

       // Формируем div-контейнер карты <div id="YMapsID" style="width: 450px; height: 350px;"></div> <script type="text/javascript"> var myMap; function init (ymaps) { myMap = new ymaps.Map("YMapsID", { center: [55.87, 37.66], zoom: 10 }); ... } </script> // Сразу после загрузки API будет вызвана функция init. // На момент ее исполнения div-контейнер карты уже будет готов. <script src="https://...?load=package.full&lang=ru_RU&onload=init">