Карта отображается на модальном диалоге bootstrap 3.
Пример страницы с картой http://goo.gl/PSNMkX (кликнуть по адресу или кнопке "карта")
ymaps.ready(init);
function init() {
var map = null;
var balloons = [{
"coordLam": "36.0172",
"coordFi": "56.8055",
"balloonContentHeader": "\u0412\u0430\u0436\u043d\u0430\u044f \u043f\u0435\u0440\u0441\u043e\u043d\u0430 - \u0410\u0432\u0442\u043e",
"balloonContentBody": "\u0410\u0432\u0442\u043e
"balloonContentFooter": "\u0433. \u0422\u0432\u0435\u0440\u044c, \u0443\u043b. \u041c\u043e\u0441\u043a\
"hintContent": "\u0410\u0432\u0442\u043e
}];
$("#show-map,.show-map").on("click",
function() {
if (map == null) {
ymaps.modules.require(["Map", "Placemark"]).spread(function(Map, Placemark) {
map = new ymaps.Map("simple-map", {
center: [56.8055, 36.0172],
zoom: 14,
});
for (i = 0; i < balloons.length; i++) {
//alert(balloons[i].hintContent);
var placemark = new Placemark(
[balloons[i].coordFi, balloons[i].coordLam], {
balloonContentHeader: balloons[i].balloonContentHeader,
balloonContentBody: balloons[i].balloonContentBody,
//balloonContentFooter: blloons[i].balloonContentFooter,
hintContent: balloons[i].hintContent,
//balloonContent : balloons[i].hintContent,
}, {
hasBalloon: true,
openEmptyBalloon: true,
openEmptyHint: true,
openHintOnHover: true,
syncOverlayInit: true,
visible: true,
});
map.geoObjects.add(placemark);
}
}, this)
} else {
map.destroy(); // Деструктор карты
map = null;
}
});
$("#modal-map-simple").on("hidden.bs.modal", function(e) {
if (map) {
map.destroy(); // Деструктор карты
map = null;
}
})
}
});