Элементы сайта
Как подключить Яндекс Карту
Пример 1. Яндекс Карта
Документацию по созданию Яндекс Карты можно посмотреть по ссылке https://tech.yandex.ru/maps/doc/jsapi/1.x/dg/tasks/quick-start-docpage
Ниже приведен пример Яндекс Карты и коды для ее создания.
1. Создайте два файла placemark.html и placemark.js (коды приведены ниже).
2. Цифры в квадратных скобках (в коде placemark.js) означают географические координаты объекта. Введите вместо этих данных координаты своих объектов.
Строка center: [56.84, 60.63] означает геометрический центр карты в географических координатах.
Строка zoom: 12.2 означает коэффициент приближения карты, методом перебора параметра необходимо подогнать под свою карту.
Как определить географические координаты объекта?
Открываем Яндекс Карту, в строке поиска вводим адрес и справа видим информацию об объекте, включая географические координаты.
Файл placemark.html
<!DOCTYPE html>
<html>
<head>
<title>Примеры. Метка</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Если вы используете API локально, то в URL ресурса необходимо указывать протокол в стандартном виде (http://...)-->
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script src="placemark.js" type="text/javascript"></script>
<style>
html, body, #map {
width: 100%; height: 100%; padding: 0; margin: 0;
}
</style>
</head>
<body>
<div id="map" style="width:750px; height:350px"></div>
</body>
</html>
Файл placemark.js
ymaps.ready(init);
function init () {
var myMap = new ymaps.Map("map", {
center: [56.84, 60.63],
zoom: 12.2
}, {
searchControlProvider: 'yandex#search'
}),
// Создаем геообъект с типом геометрии "Точка".
myGeoObject = new ymaps.GeoObject({
}
);
myMap.geoObjects
.add(myGeoObject)
.add(new ymaps.Placemark([56.862657, 60.635051], {
iconCaption: 'Пионерский, Чекистов 7'
}, {
preset: 'islands#greenDotIconWithCaption'
}))
.add(new ymaps.Placemark([56.840138, 60.610671], {
iconCaption: 'Центр, Карла Либкнехта 23'
}, {
preset: 'islands#redDotIconWithCaption'
}))
.add(new ymaps.Placemark([56.849403, 60.633955], {
iconCaption: 'Пионерский, Флотская 41'
}, {
preset: 'islands#blueDotIconWithCaption'
}))
.add(new ymaps.Placemark([56.818341, 60.546073], {
iconCaption: 'Виз Ухтомская 41'
}, {
preset: 'islands#darkblueDotIconWithCaption'
}))
.add(new ymaps.Placemark([56.83224, 60.661695], {
iconCaption: 'ВТУЗ, ЖБИ Библиотечная 45'
}, {
preset: 'islands#orangeDotIconWithCaption'
}));
}
Скачать этот пример с Яндекс Картой.
Пример 2. Яндекс Карта в модальном окне Fancybox
Скачать этот пример Яндекс Карты в модальном окне Fancybox.
Еще один пример с исходниками можно посмотреть по ссылке http://webmap-blog.ru/yandex-maps/fancybox-vyvodim-kartu-v-modalnom-okne-api-yandeks-kart-2-x. Скачать исходник.