Yandex карта на сайт


Конструктор карт – простой в использовании веб-инструмент, позволяющий создавать различные схемы проезда и отмечать нужные объекты на карте. Данную карту затем можно разместить на своем сайте или в блоге.

Для размещения карты на странице достаточно вставить сформированную конструктором строку кода на ту страницу, где необходимо отобразить карту.

Примечание. Один и тот же код может быть вставлен на одну страницу неограниченное число раз.

С помощью конструктора можно вставить два типа карт: интерактивную и статическую.

Для интерактивной карты конструктор формирует элемент script, который подгружает на страницу JavaScript-код для создания карты.

Как получить код:

  1. Перейдите в Конструктор Яндекс-карт.
  2. Введите адрес Вашего офиса или магазина в соответствующее поле и нажмите кнопку «Найти».
  3. Настройте карту по Вашему усмотрению и нажмите кнопку «Получить код».
  4. Скопируйте полученный код из соответствующего поля и вставьте его в разметку сайта.

Как добавить на сайт яндекс карту Как добавить на сайт яндекс карту

Если Ваш сайт является копией нашего демонстрационного сайта demo.pixlpark.ru и Вы хотите заменить уже имеющуюся карту, например, на странице контактов, то зайдите в панель управления сайтом, откройте раздел CMS «Страницы сайта», найдите страницу «Контакты» и откройте ее для редактирования, затем перейдите в «Расширенные настройки страницы» (см. скриншот ниже) и в поле «Слайдер» вставьте полученный в конструкторе Яндекс-карт код вместо текущего.

Как установить карту на сайт Как установить карту на сайт

Как Вы могли заметить, в коде карты есть параметры, отвечающие за размеры окна карты: width (ширина) и height (высота), – они показаны стрелками на скриншоте. Вы можете установить оптимальные для Вашего сайта значения (на Ваше личное усмотрение). Значения данных параметров указаны в пикселях (px). Если Вы желаете растянуть карту на всю ширину сайта, то парамерт width вместе с его значением надо просто удалить из кода. На скриншоте показана выделением часть кода, которую надо удалить для установки ширины карты, равной ширине сайта.


Яндекс-документация: Как добавить карту на сайт или в блог.

pixlpark.ru

Бром
Блина ну кото так делает. Вы же рассказываете как сделать!!! Под рукой должен быть ваш примерник, а все ссылки без таржет бланк ((
NMitra
"Под рукой должен быть ваш примерник" — вы про API Яндекс.Карт? Каких именно примеров не хватает?
"все ссылки без таржет бланк" — это не всегда удобно в первую очередь для посетителя.
Штиф Васлер
А как сделать кнопку раскрытия карты на всю страницу? Как на озоне, например
http://www.ozon.ru/context/map/?areaId=2
(в верхнем правом у.

m/profile/07029198919803841512'> А Вы не знаете?
Штиф Васлер
о, нашел
https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/map.Container-docpage/#enterFullscreen
только как использовать не понял еще
NMitra
Я не читала, не было необходимости

shpargalkablog.ru

Здравствуйте, эту статью хотелось бы начать с небольшой заметки.

Те, кто увлекается не только разработкой, но и продвижением сайтов знают, что требования к площадкам растут с каждым годом, поисковики стараются отсеивать мусорные страницы и оставлять максимально релевантные.


к просматривая последние конференции по продвижению коммерческих сайтов, заметил один похожий во всех случаях факт – это оформление страницы контактов. Прошли те времена, когда эта страница содержала только несколько телефонов и форму обратной связи. Сейчас нужно максимально информативно предоставлять контактные данный. В этом случае вам просто не обойтись без динамической карты расположения вашего офиса. Она стала неотъемлемой частью любой контактной страницы коммерческого сайта.

Яндекс предоставил разработчика собственное решение в этом направлении – а именно «Конструктор Яндекс карт», который позволяет вебмастерам без проблем добавить любую карту на свой сайт.

Итак, теперь перейдем непосредственно к действиям.

1.) Для начала переходим в сам конструктор карт — http://api.yandex.ru/maps/tools/constructor/.

Перед вами появиться карта и поле, где вы можете указать нужный вам адрес.

ycart1

Вы можете создать карту проезда, даже без авторизации в Яндекс.

2.) Вводите нужный вам адрес, после чего вам высветлится подсказка с полным названием улицы, города и номера дома.

3.) После выбора адреса вы можете указать описание метки, а также выбрать ее цвет.  Осле настроек нажимаем кнопку «Ok». И спускаемся вниз страницы.


ycart2

4.) Нажимаем кнопку «Получить код без авторизации», если вы зарегистрированы, то сможете сразу увидеть поле кода.

ycart3

5.) Копируем предоставленный код и вставляем в нужное нам место на сайте.

ycart4

Несколько заметок

— данный метод вставки карты Яндекс на сайт подойдет для любых CMS: Joomla, Opencart, WordPress и прочих.

— часто, визуальный редактор, например в joomla, режет код. Так что работать со страницей контактов желательно без редактора. Либо вставлять карту проезда на сайт после всех визуальных правок.

Скопируйте код созданной карты в текстовый файл, и при правке страницы контактов, при искажении кода, вы всегда сможете его восстановить.

На этом сегодня все, в следующих статьях я продолжу выкладывать шпаргалки по технической работе с сайтами.

webprovincia.com


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>  <title>Магазины М.Видео на карте - API Яндекс.Карт версии 2.х</title>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://yandex.st/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script> <style> #shopconteyner{ width: 100%; }   #shops{ float:left; width: 30%; }   #YMapsID{ margin-left: 40%; width: 60%; height: 600px; } </style>    <script type="text/javascript">	 	var map;   	var collection;   	ymaps.ready(function () {  map = new ymaps.Map('YMapsID', {  center: [56.326944, 44.0075],  zoom: 15,  type: 'yandex#map',  behaviors: ['default', 'scrollZoom']  });   	//Добавляем элементы управления 	 map.controls   .add('zoomControl')   .add('typeSelector')   .add('mapTools');.  

res+'<p><strong>Найдено объектов: '+json.length+'</strong></p>';   collection.events.add('boundschange', function (e) { map.setBounds(e.get('bounds')); });   for (i = 0; i < json.length; i++) { var sch = i+1; var placemark = new ymaps.Placemark([json[i].lon,json[i].lat], { iconContent: sch, balloonContentHeader: '<div style="color:#ff0303;font-weight:bold">'+json[i].address+'</div>', balloonContentBody: '<div style="font-size:13px;"><div><strong>Адрес:</strong> '+json[i].address+'<br>'+'<strong>Режим работы:</strong> '+json[i].rrab+'<br></div></div>' }, { // Опции preset: 'twirl#nightStretchyIcon' // иконка растягивается под контент }); collection.add(placemark); src_res=src_res+'<p>'+sch+'. '+'<a href="#" onClick="return go_to('+json[i].lat+', '+json[i].lon+",'"+json[i].address+"');"+'">'+json[i].address+'</a></p>'; } map.geoObjects.add(collection); // Set center and zoom using collection bounds.

p.setBounds(collection.getBounds());   $('#shops').html(src_res); }); }); }   function go_to(lat,lon,address){ map.setCenter([lon, lat], 16);   collection.each(function (item) { if (item.properties.get('balloonContentHeader') == '<div style="color:#ff0303;font-weight:bold">'+address+'</div>') { item.balloon.open(); } }); return false; }     </script>   </head> <body> <div id="searchform"> <select id="selecttown"> <option value="Екатеринбург">Екатеринбург</option> <option value="Казань">Казань</option> <option value="Нижний Новгород">Нижний Новгород</option> <option value="Пермь">Пермь</option> <option value="Самара">Самара</option> <option value="Санкт-Петербург">Санкт-Петербург</option> </select> </div>   <div id="shopconteyner"> <div id="shops"></div> <div id="YMapsID"></div> </div> </body> </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:/.


t;style> #shopconteyner{ width: 100%; } #shops{ float:left; width: 30%; } #YMapsID{ margin-left: 40%; width: 60%; height: 600px; } </style> <script type="text/javascript"> var map; var collection; ymaps.ready(function () { map = new ymaps.Map(‘YMapsID’, { center: [56.326944, 44.0075], zoom: 15, type: ‘yandex#map’, behaviors: [‘default’, ‘scrollZoom’] }); //Добавляем элементы управления map.controls .add(‘zoomControl’) .add(‘typeSelector’) .add(‘mapTools’); $("select").change(function () { var town = $("#selecttown :selected").val(); do_search(town); }) .change(); }) function do_search(town){ $(‘#shops’).html(»); $.getJSON("searcheshop.php", {town: town}, function(json){ var src_res="<p><strong>результаты поиска: </strong></p>"; $.getScript(‘.

;color:#ff0303;font-weight:bold">’+json[i].address+'</div>’, balloonContentBody: ‘<div style="font-size:13px;"><div><strong>Адрес:</strong> ‘+json[i].address+'<br>’+'<strong>Режим работы:</strong> ‘+json[i].rrab+'<br></div></div>’ }, { // Опции preset: ‘twirl#nightStretchyIcon’ // иконка растягивается под контент }); collection.add(placemark); src_res=src_res+'<p>’+sch+’. ‘+'<a href="#" onClick="return go_to(‘+json[i].lat+’, ‘+json[i].lon+",’"+json[i].address+"’);"+’">’+json[i].address+'</a></p>’; } map.geoObjects.add(collection); // Set center and zoom using collection bounds. map.setBounds(collection.getBounds()); $(‘#shops’).html(src_res); }); }); } function go_to(lat,lon,address){ map.setCenter([lon, lat], 16); collection.each(function (item) { if (item.properties.get(‘balloonContentHeader’) == ‘<div style="color:#ff0303;font-weight:bold">’+address+'</div>’) { item.balloon.open(); } }); return false; } </script> </head> <body> <div id="searchform"> <select id="selecttown"> <option value="Екатеринбург">Екатеринбург</option> <option value="Казань">Казань</option> <option value="Нижний Новгород">Нижний Новгород</option> <option value="Пермь">Пермь</option> <option value="Самара">Самара</option> <option value="Санкт-Петербург">Санкт-Петербург</option> </select> </div> <div id="shopconteyner"> <div id="shops"></div> <div id="YMapsID"></div> </div> </body> </html>

webmap-blog.ru

1. Регистрируемся на Яндексе и получаем ключ

Вставка карты Яндекс на сайт производится при условии обязательной регистрации на их сервисе и получении специального ключа. Для того, чтобы пройти регистрацию, необходимо зайти на http://api.yandex.ru/maps/ и залогиниться под своей учетной записью на Яндексе (если вы никогда не регистрировались на Яндексе — тогда будет нужно предварительно зарегистрироваться — процесс занимает не более одной минуты).

После этого нужно кликнуть на ссылку «Получить API-ключ» в разделе «Разработчикам»:

вставка карты яндекс на сайт

На следующей странице Вам будет предложено ввести адрес вашего проекта и принять пользовательское соглашение — заполняем и нажимаем кнопку «Получить API-ключ».

Следующая страница выдает желанный результат: указан Ваш ключ (который служит в качестве уникального идентификатора) и заботливый Яндекс даже сразу предлагает Вам пример html-кода, который нужно вставить на страничку для того, чтобы карта начала показываться:

Ключ:

  BB21NWVEBAAAAPwvKTAIA0hsUOvbe4BCoxOUzvhVFRTmlOmsAAAAAAAAAAADPY7DBQ78niNkhgt2sLHhTZL2pVQ==  

Пример кода, предложенный Яндексом:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>   <title>Примеры. Знакомство с JavaScript API. Простой вызов карты.</title>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <script src="http://api-maps.yandex.ru/1.1/index.xml?key=BB2NWVEBAAAAPwvKTAIA0hsUOvbe4BCoxOUzvhVFRTmlOmsAAAAAAAAAAADPY7DBQ78niNkhgt2sLHhTZL2pVQ=="  	type="text/javascript"></script>   <script type="text/javascript">   window.onload = function () {   var map = new YMaps.Map(document.getElementById("YMapsID"));   map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10);   }   </script>  </head>  <body>   <div id="YMapsID" style="width:600px;height:400px"></div>  </body>  </html>  

2. Создаем собственную карту

Предложенный выше код будет добавлять на ваш проект обычную карту Яндекса. Теперь давайте разберемся, как вставить карту на сайт, отвечающую именно вашим потребностям — например, показывающую расположение вашего магазина или офиса. Для этого перейдем в раздел «Конструктор карт»:

как вставить карту на сайт

Открывается достаточно понятный и простой интерфейс:

конструктор карт яндекс

Предположим, наш офис находится по адресу Ленинградский пр., дом 10. Укажем этот адрес в поле «Найти место на карте» и нажмем кнопку найти:

офис на карте яндекса

Нажимаем кнопку «ОК», выбираем нужный нам масштаб и вид карты («Интерактивная» — пользователи смогут ее масштабировать и перемещаться по ней или «Статическая» — будет неподвижной) и нажимаем кнопку «Получить код».

В качестве результата получаем следующее:

  <script type="text/javascript" charset="utf-8" src="//api-maps.yandex.ru/services/constructor/1.0/js/?sid=7UXGfpfzOI0mK6VKESxAMdk08M4kyvtr&width=600&height=450"></script>  

Копируем этот код, вставляем на страницу своего сайта и радуемся жизни!

Кстати говоря, сам конструктор обладает и другими дополнительными функциями — можно нарисовать схему проезда, выделить какую-то область прямоугольником, разместить на карте не один, а несколько объектов, изменить размер карты — все достаточно просто делается с помощью кнопок в том же самом интерфейсе.

3. Решение для WordPress

Добавить добавить карту на сайт, выполненный на движке WordPress (речь идет о географическом инструменте, карта сайта для WordPress со ссылками на страницы — это совсем из другой области) , можно также с помощью специального плагина, который называется Yandex Maps for WordPress и доступен для скачивания на официальном сайте WP.

Этот плагин не имеет большого смысла, если вам нужно только один раз добавить карту, так как для него все равно требуется получать API-ключ от Яндекса, а если вы получили ключ, то Вам не сложно тогда и сконструировать нужную Вам карту без установки ради этого плагина — так как каждый плагин хоть немного, но замедляет работу вашего ресурса.

Тем не менее, если вам потребуется производить такую вставку на каждой странице (например, у вас на сайте имеется каталог фирм и вы хотели бы наглядно показать расположение каждой из них), то тогда данное решение имеет смысл: плагин добавляет в админку в раздел с созданием записи новую панель, прямо в которой вы можете заполнить все нужные вам параметры — это значительно сэкономит вам время.

www.runcms.org

Вставить Яндекс карты на сайт

Вставить Яндекс карту на свой сайт можно несколькими способами:

  • Использование возможностей конструктора;
  • При помощи плагинов и модулей;
  • API от Яндекс;

Использование возможностей конструктора.

Если ваш сайт создан при помощи какого-то конструктора, вроде uCoz или WIX. Проверьте, поддерживает ли конструктор эту возможность. На многих конструкторах эта идея продумана и порой достаточно вставить виджет в необходимое место, и можно любоваться картой от Яндекс на сайте.

Карта при помощи плагинов и модулей.

Для большинства CMS разработаны различные плагины и модули. Если у вас сайт на WordPress и вы не умеете или не любите возиться с кодами, вставить Яндекс карту на сайт можно при помощи плагина Oi Yandex.Maps for WordPress.

Установка и настройка плагина стандартная. После того, как вы активируете плагин, в визуальном редакторе появится кнопка «Яндекс карта», нажав на которую вы сможете вписать населенный путь, и плагин при помощи шорткода выведет карту. Эта карта ничем не будет отличаться от той, к которой вы привыкли, просматривая пробки в Яндекс. Карту можно передвигать, менять масштаб, переключаться на вид со спутника и прочие фишки, которые есть в стандартных Яндекс картах.

Выглядит такая карта вот так:

карта яндекс плагин

Благодаря плагину, на карте можно сделать отметку любого адреса, вставить всплывающий текст (описание местоположения – «кабак у дяди Васи»).

Плагин Oi Yandex.Maps for WordPress очень легок и прост, но не без минусов. Если вам необходимо указать какой-то мелкий, никому не известный населенный пункт, придется сначала узнать его координаты, иначе Он может быть просто не найден, или найден «тезка» вашего городишки. Но в целом оценка 5 баллов!

Нашел еще несколько аналогичных плагинов, принцип работы схож, поэтому смысла не вижу их описывать.

API от Яндекс.

Третий способ вставить Яндекс карту на сайт, это использование API (Интерфейс Программирования приложений) от Яндекс. Не пугайтесь умных словечек, вам не нужно быть программистом, чтобы добавить Яндекс карту на сайт при помощи API. Делается это в два счета.

Просто переходим по ссылке — https://tech.yandex.ru/maps/tools/constructor . На этой странице можно сконструировать карту Яндекса любого размера, при этом проложив маршрут и сделав пометку об объекте. Затем нужно скопировать предоставленный код и вставить на свой сайт.

Процесс конструирования Яндекс карты опишу чуть ниже. Да и на странице конструктора карт тоже имеются все необходимые подсказки.

Результат будет примерно такой:

конструктор карт Яндекс

Как вставить карту гугл на сайт

Не знаю, пользуетесь ли вы картами от гугл. Лично я ими перестал пользоваться после одного не совсем приятного случая, который произошел со мной около полугода назад.

Поехали мы с ребятами в Москву по делам на своей машине, и чтобы не заблудиться, скачали навигатор (уже не помню какой) на планшет. Навигатор использовал технологии Google Maps, предупреждал о камерах на дороге и прочие навороты. Как оказалось, Москва строится семимильными шагами, и в гугл картах это не учитывалось. Карты просто устарели, в одном месте построили новую развязку, в другом идет стройка новой высотки и переулок перекрыли, отправляя машины в объезд.

Результат работы навигатора нас не порадовал. Дали мы километров 12 круга по утренней Москве, а могли просто свернуть в небольшой переулок, который появился недавно. Бывало едешь в каком-нибудь тоннеле, навигатор говорит: «Поверните направо», а поворачивать некуда, справа стена ?

Но у гугл карт есть и большие плюсы. В отличие от Яндекса, который ориентирован в основном на Россию и ближнее зарубежье, Google Maps может показать самые отдаленные уголки нашей планеты.

Вставить карту от гугл (Google Maps) на сайт можно так же как в предыдущем способе.

  • С использованием виджета конструктора, если таковой поддерживает ваш конструктор сайта;
  • При помощи плагина;
  • С использованием API;

Использование виджета конструктора для вставки гугл карты (Google Maps) на сайт.

Я не любитель конструкторов. Поддерживает ли ваш конструктор эту технологию, можно узнать у тех поддержки. На uCoz такой виджет присутствует, это знаю точно.

Вставка карты Гугл на сайт WordPress при помощи плагина.

Вывести карту от гугл (Google Maps) на сайт WordPress можно при помощи плагина MapPress Easy Google Maps. После установки и активации плагина, на экране добавления новой статьи, появиться раздел «MapPress».

Для создания новой карты, нужно кликнуть по кнопке «New Map».

new map

И в появившемся окне заполнить информацию – название карты, размер и маркер. К тому же есть возможность вставки своей картинки, которая будет появляться при клике по маркеру.

Вот пример, как будет выглядеть карта от гугл, выводимая плагином MapPress Easy Google Maps:

карта гугл плагин

Добавление карты Гугл на сайт при помощи Google Maps.

Это еще один способ добавить карту Гугл на сайт. Для этого находим в Гугл картах необходимый населенный пункт, затем нажимаем на значок шестеренки в правом нижнем углу, и во всплывшем окне выберете раздел «Поделитесь с друзьями или получите код карты».
Затем необходимо скопировать код и вставить на сайт.

Выглядеть такая карта будет вот так:

Google Maps

Как установить карту проезда на сайт?

Для реализации этой цели, больше всего мне понравился конструктор Яндекс Карты. Как я уже упомянул выше, на странице конструктора есть инструкция по созданию и добавлению карты проезда на сайт. Но все же давайте вкратце опишу сам процесс.

Страница конструктора карт от Яндекс доступна по ссылке — https://tech.yandex.ru/maps/tools/constructor.

Для создания карты проезда, введите в поисковую строку название населенного пункта. Конструктор сам найдет нужное место. Наша задача только немного отредактировать карту и задать схему проезда.

При необходимости сразу измените масштаб карты.

новая карта

Теперь воспользуемся панелью инструментов. Можно отметить несколько точек (маркеров), изменить их цвет и задать описание.

расстановка маркеров

При помощи инструмента «рисование линий», нужно нарисовать маршрут проезда к объекту.

маршрут на карте

Инструмент «Рисование многоугольников» позволит отметить какую-то область на карте.

отметка отдельной площади

При помощи инструмента «Изменение размеров карты» можно подогнать ее под размер вашей web страницы.

И в заключение нужно ввести название карты проезда, сохранить ее и получить код, который можно вставить на сайт.

код карты Яндекс

Как видите все очень просто.

Карта метро на сайт

Вставить карту метро на сайт можно двумя способами.

Первый способ вставить статичную карту метро на сайт — просто сделать скриншот, затем в фотошопе сделать необходимые пометки, если таковые имеются и вставить картинку на сайт.

Второй способ вставить интерактивную карту метро на сайт – вывести ее во фрейме с сервиса Яндекс Метро.

Буду признателен, если кто-то подскажет другой способ!

nazyrov.ru

В данной статье я хочу начать цикл статей по работе с API Яндекс.Карт. Документация Яндекс.Карт достаточно полна, но степень разрозненности информации в ней высокая, при первом заходе в документацию без пол-литры не разобраться, и для решения какой-то проблемы можно потратить много времени на поиск по документации и в поисковике. Этот цикл статей будет рассказывать о практических решениях наиболее частых случаев использования API Яндекс.Карт последней, на момент написания статьи, версии 2.1.

При вёрстке сайта в контактной информации часто бывает необходимость вставки карты, на которой будет отмечено местоположение организации, для которой разрабатывается сайт. В самых простых случаях это может быть просто скриншот c онлайн-карт (или не онлайн):

Yandex карта на сайт

Для вставки интерактивной карты может использоваться конструктор карт
https://tech.yandex.ru/maps/tools/constructor/:

В случае, если нам нужно более продвинутое использование карт (свои метки, программное перемещение карт и т.п.), то для этого надо использовать API Яндекс.Карт: https://tech.yandex.ru/maps/jsapi/. В качестве примера использования карт в статье будет рассмотрено создание карты с простым добавлением пользовательских метки и балуна.

Для начала подключим компоненты API:
<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>

Если разрабатывается какое-то большое приложение с использованием карт, то лучше подключать компоненты API определённой версии, чтобы при обновлении API на стороне Яндекса у нас ничего не сломалось на продакшине:
<script src="http://api-maps.yandex.ru/2.1.17/?lang=ru_RU" type="text/javascript"></script>

Посмотреть актуальные версии API можно тут:
https://tech.yandex.ru/maps/doc/jsapi/2.1/versions/concepts/index-docpage/

Карту необходимо будет расположить в каком-нибудь блоке, например в div#map. Далее карту необходимо создать в данном блоке (после срабатывания события готовности карты и DOM):

Здесь мы указываем:

  1. идентификатор блока «map», где у нас будет создана карта;
  2. center — центр карты с указанием ширины и долготы;
  3. zoom — коэффициент масштаба карты.

По умолчанию Яндекс.Карты создают много лишних элементов, которые в большинстве случаев не нужны на сайтах. В основном к элементам управления и к поведению карты достаточно применить 2 условия:

  1. из элементов карты присутствует только ползунок изменения масштаба;
  2. карта не должна менять масштаб скроллом мыши.

Для выполнения этих требований дополняем код:

Здесь мы отключили «scrollZoom» и добавили «zoomControl» с позиционированием от левого верхнего угла.

Теперь нужно добавить на карту метку, для статьи скачаём её картинку с http://medialoot.com/item/free-vector-map-location-pins/ и расположим в коде следующим образом:

Здесь мы объявляем переменную myPlacemark, в которой запишем маркер, в первом параметре ymaps.Placemark указываем координаты метки, а в третьем параметре:

  1. указываем в iconLayout, что будет использоваться пользовательское изображение метки;
  2. iconImageHref — путь к изображению;
  3. iconImageSize — указываем размеры изображения;
  4. iconImageOffset — указываем сдвиг от левого верхнего угла картинке к точке изображения, которая показываем на нужный нам объет. Нужно это чтобы при масштабировании карты положение метки не сбивалось. Почему смещение указывается в отрицательных значениях — одному Богу создателю API известно.

И через myMap.geoObjects.add() добавляем метку на карту.

А теперь сделаем баллун, который у нас будет показываться при клике на метку карты, макет баллуна и его содержимое возьмём с http://designdeck.co.uk/a/1241

Здесь мы:

  1. в balloonContent указываем контент, который будет отображаться при открытии балуна;
  2. balloonLayout — указываем, что в качестве макета баллуна будет использоваться пользовательское изображение;
  3. balloonContentSize и balloonImageSize — размеры контента и изображения соответственно;
  4. balloonImageHref — путь к изображению;
  5. balloonImageOffset — смещение относительно левого верхнего угла;
  6. balloonShadow — отключение тени у балуна (с пользовательскими изображениями ни на что не влияет).

Демо можно посмотреть тут.

blog.karmanov.ws

Вставка карты с помощью Яндекс Карт

1. На данный момент (начало 2013 года) конструктор карт от Яндекс доступен в версии 2.0, очень удобный и логически понятный. Для создания карты даже не требуется быть авторизованным пользователем. Первым делом необходимо создать саму карту с адресом. Для этого переходим по ссылке  и в нижнем поле ввода прописываем адрес компании. После нажатия кнопки "найти" система выдаст варианты найденных адресов.

Конструктор Яндекс Карт

 

2. Ставим точку по нужному адресу и в поле описание указываем название организации. Цвет точки лучше выбрать исходя из стиля сайта, на котором будет расположена карта. Конструктор также позволяет пометить другие ориентиры на карте, например, крупные известные объекты, растянуть карту до нужного размера, провести маршрут от остановки транспорта с помощью инструмента рисования линий, редактировать масштаб.

Настройка карты

 

3. Далее переходим на вкладку просмотр. Здесь можно выбрать, статической будет ваша карта или интерактивной. Лучше выбирать второй вариант, так пользователь сможет сам просмотреть близлежащий район и сориентироваться. 

Интерактивность карты

 

4. Вкладка "Код для вставки" предлагает прочесть пользовательское соглашение. После его подтверждения вам откроется код для вставки. Его можно немного отредактировать, например, убрать ссылку на Яндекс, подогнать по размерам точнее, однако существенных изменений лучше не делать.

Код схемы проезда

 

5. Копируем данный код и вставляем на страницу контактов через HTML-редактор после текста. 

Вставка кода

 

6. Сохраняем внесенные изменения и проверяем полученный результат на странице сайта.

Вид карт на сайте

Вставка карты с помощью Google Maps

1. Алгоритм действий схож с описанным выше. Переходим по ссылке   и вводим в строке поиска адрес организации. Можно также посмотреть, как это выглядит со спутника. Далее для получения кода нажимаем на знак ссылки слева. Можно скопировать имеющийся код, а можно нажать ссылку "настройка и предварительный просмотр встроенной карты".

Вставка карты Google

 

2. При выборе редактирования откроется дополнительное окно, где можно скорректировать ее размеры. 

Настройка карты Google

 

3. Копируем полученный код и вставляем его через html-редактор на страницу сайта. Выглядеть она будет абсолютно так же, как при предварительном просмотре. В отличие от карт Яндекса, карты Google всегда только интерактивные, здесь меньше возможностей редактировать саму карту, однако можно посмотреть на местность со спутника, рельеф с названиями объектов и 3D карту.

Вернуться назад

www.kasper.by


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.