Using the yandexmaps plugin, I try to display the Yandex map in a modal window.

Like this:

<button class="btn btn-info btn-lg" type="button" data-toggle="modal" data-target="#myModal">Показать всплывающее окно</button> <div id="myModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button class="close" type="button" data-dismiss="modal">×</button> <h4 class="modal-title">Заголовок окна</h4> </div> <div class="modal-body"> [[!yandexMaps? &tvCoords=`coords` &fieldForBalloonContent=`description` &fieldForHint=`pagetitle` &objectsTypesJSON=`[ { "InvestProjects": { "parent":"5", "preset":"islands#violetStretchyIcon", "presetText":"Реализованный", "title":"Инвестиционные проекты" }, "InvestPlaygrounds": { "parent":"6", "icon":"/images/playgrounds_map_icon.png", "title":"Инвестиционные площадки" } } ]` ]] </div> <div class="modal-footer"> <button class="btn btn-default" type="button" data-dismiss="modal">Закрыть</button> </div> </div> </div> </div>

But it does not even fit into the modal window, it is immediately displayed, and when I open the modal, it is empty.

  • Where is the code with the card - L. Vadim
  • oh not inserted, corrected - Aslero

1 answer 1

  <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script> <div id="map" style="width: 600px; height: 400px"></div> <script> ymaps.ready(function () { var myMap = new ymaps.Map('map', { center: [55.751574, 37.573856], zoom: 9 }, { searchControlProvider: 'yandex#search' }), myPlacemark = new ymaps.Placemark(myMap.getCenter(), { hintContent: 'Собственный значок метки', balloonContent: 'Это красивая метка' }); myMap.geoObjects.add(myPlacemark); var myGeocoder = ymaps.geocode("[[#24.adressminsk]]"); myGeocoder.then( function (res) { myPlacemark.geometry.setCoordinates(res.geoObjects.get(0).geometry.getCoordinates()); myMap.setCenter([res.geoObjects.get(0).geometry.getCoordinates()[0], res.geoObjects.get(0).geometry.getCoordinates()[1]], 9, { checkZoomRange: true }); }, function (err) { alert('Ошибка'); } ); }); </script>
  • I bring a snippet - Aslero
  • In the first minutes of the snippet, it was not)) I don’t think that you can activate the map in the modal window with the snippet (you never used snippet yourself), because you need to initialize the map after opening the modal window, it would be right to use the Yandex Yandex API. As far as I remember in Yandex snaps, the map is not displayed, but the link to the map is inserted - Arsen
  • But how can I get all city categories, i.e. there is a category directory and there are 20 resources in it and in each city, and on this map I will need to display 20 addresses - Aslero
  • I would use Yandex Map API, and just put in all coordinates (markers) on one map. Read the documentation, can help tech.yandex.ru/maps/doc/jsapi/2.1/quick-start/tasks/… - Arsen
  • and how to get the coordinates of the city? just when adding a resource, the city is filled, and the coordinates are not - Aslero