JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"></script>
<button onclick="clk()">открыть</button>
<div id="map" style="width:800px; height:600px"></div>
<div id="map1" style="width:800px; height:600px"><button onclick="clk1()">открыть</button></div>
JavaScript
var myMap, myPlacemark, coords, test=null;
// Дождёмся загрузки API и готовности DOM.
function init () {
var searchControl = new ymaps.control.SearchControl({noPlacemark: true});
myMap = new ymaps.Map('map', {
// При инициализации карты обязательно нужно указать
// её центр и коэффициент масштабирования.
center:[55.76, 37.64], // Москва
zoom:11,
behaviors: ['default', 'scrollZoom']
});
myMap.controls
.add(searchControl, {right: 0, top: 0})
.add('zoomControl');
myPlacemark = new ymaps.Placemark([55.76, 37.64],{}, {preset: "twirl#redStretchyIcon", draggable: true});
myMap.geoObjects.add(myPlacemark);
myPlacemark.events.add("dragend", function (e) {
coords = this.geometry.getCoordinates();
savecoordinats();
}, myPlacemark);
searchControl.events.add("resultselect", function (e) {
coords = searchControl.getResultsArray()[0].geometry.getCoordinates();
savecoordinats();
});
myMap.events.add('click', function (e) {
coords = e.get('coordPosition');
savecoordinats();
});
};
function clk()
{
$("#map1").dialog("open");
};
function clk1()
{
$("#map").dialog("open");
};
$( document ).ready( function() {
$("#map").dialog({
height: 600,
width: 800,
modal: true,
autoOpen: false,
//draggable: false,
resizable: false,
title: "Выберите местоположения подразделения",
open: function( event, ui ) {},
buttons: {
"Ок": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
$("#map1").dialog({
height: "auto",
width: "auto",
modal: true,
autoOpen: false,
//draggable: false,
resizable: false,
title: "подокно",
open: function( event, ui ) {},
buttons: {
"Ок": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close"...