spinastr, вашим кодом не предусмотрено предупреждений про время на загрузку (желательно)... запустить код , пауза 5 сек, нажать кнопку и ждать результат ... смотрите что у вас не так и делайте макеты полностью иначе к телепатам
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#map{
display: none;
width: 500px;
height: 500px;
}
#map.active{
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
var mapsScript = document.createElement('script');
mapsScript.onload = function() {
ymaps.ready(init);
}
mapsScript.src = 'http://api-maps.yandex.ru/2.1/?lang=ru_RU';
document.querySelector('head').appendChild(mapsScript);
function init () {
var myMap;
$('#toggle').bind({
click: function () {
$('#map').addClass('active');
if (!myMap) {
myMap = new ymaps.Map('map', {
center: [55.753994, 37.622093],
zoom: 9
}, {
searchControlProvider: 'yandex#search'
});
ymaps.geocode('город, улица', {
results: 1
}).then(function (res) {
var firstGeoObject = res.geoObjects.get(0),
coords = firstGeoObject.geometry.getCoordinates(),
bounds = firstGeoObject.properties.get('boundedBy');
myMap.geoObjects.add(firstGeoObject);
myMap.setBounds(bounds, {
checkZoomRange: true
});
console.log('Все данные геообъекта: ', firstGeoObject.properties.getAll());
console.log('Метаданные ответа геокодера: ', res.metaData);
console.log('Метаданные геокодера: ', firstGeoObject.properties.get('metaDataProperty.GeocoderMetaData'));
console.log('precision', firstGeoObject.properties.get('metaDataProperty.GeocoderMetaData.precision'));
console.log('Тип геообъекта: %s', firstGeoObject.properties.get('metaDataProperty.GeocoderMetaData.kind'));
console.log('Название объекта: %s', firstGeoObject.properties.get('name'));
console.log('Описание объекта: %s', firstGeoObject.properties.get('description'));
console.log('Полное описание объекта: %s', firstGeoObject.properties.get('text'));
});
$("#toggle").attr('value', 'Скрыть карту');
}
else {
myMap.destroy('active');// Деструктор карты
myMap = null;
$('#map').removeClass('active');
$("#toggle").attr('value', 'Показать карту снова');
}
}
});
}
</script>
<script>
$(function() {
});
</script>
</head>
<body>
<input id="toggle" name="" type="button" value="Показать карту">
<div id="map"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ergo illi intellegunt quid Epicurus dicat, ego non intellego? Sic enim censent, oportunitatis esse beate vivere. Duo Reges: constructio interrete. Quae si potest singula consolando levare, universa quo modo sustinebit? Virtutibus igitur rectissime mihi videris et ad consuetudinem nostrae orationis vitia posuisse contraria. Atqui reperies, inquit, in hoc quidem pertinacem; <mark>Non potes, nisi retexueris illa.</mark> At multis se probavit. An vero, inquit, quisquam potest probare, quod perceptfum, quod. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Illa tamen simplicia, vestra versuta. </p>
</body>
</html>