<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Пример добавления метки с собстенным значком - JavaScript API Яндекс.Карт 2.0</title> <!-- Подключаем API карт 2.x --> <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script> <script type="text/javascript"> // Как только будет загружен API и готов DOM, выполняем инициализацию ymaps.ready(init); function init () { // Создание экземпляра карты и его привязка к контейнеру с // заданным id ("map") var myMap = new ymaps.Map('map', { // При инициализаци.
|
aps.Placemark( // Координаты метки [56.315695,44.017063] , { // Свойства // Текст метки hintContent: ‘Оперный театр’ }, { iconImageHref: ‘http://webmap-blog.ru/files/gmap/gicon/mm_20_red.png’, // картинка иконки iconImageSize: [12, 20], // размеры картинки iconImageOffset: [-6, -10] // смещение картинки }); // Добавление метки на карту myMap.geoObjects.add(myPlacemark); } </script> </head> <body> <div id="map" style="width:600px; height:400px"></div> </body> </html>
webmap-blog.ru
В одной из прошлых статей мы разбирались как работает API яндекс карт на примере создания компонента для НэтКэта, но все это дело относилось к старому API версии 1.0. В этой статье мы будем делать тоже самое для Яндекс карты с API 2.0, а именно: добавим несколько меток, сделаем свои иконки вместо стандартных меток, полностью изменим стиль всплывалок (балунов) и все такое.
Берем код и создаем карту
В версии API 2.Х не надо получать никаких ключей просто втыкаем код и привязываем карту к нужному диву и все.
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script> <script type="text/javascript"> ymaps.ready(init); // карта соберется после загрузки скрипта и элементов var myMap; // заглобалим переменную карты чтобы можно было ею вертеть из любого места function init () { // функция - собиралка карты и фигни myMap = new ymaps.Map("map", { // создаем и присваиваем глобальной переменной карту и суем её в див с id="map" center: [55.76, 37.64], // ну тут центр behaviors: ['default', 'scrollZoom'], // скроллинг колесом zoom: 10 // тут масштаб }); myMap.controls // добавим всяких кнопок, в скобках их позиции в блоке .add('zoomControl', { left: 5, top: 5 }) //Масштаб .add('typeSelector') //Список типов карты .add('mapTools', { left: 35, top: 5 }) // Стандартный набор кнопок .add('searchControl'); // Строка с поиском } </script>
Добавляем и стилизуем метки
Тут создаем метку с нужными координатами и всякими настройками.
В случае создания компонентов или модулей зацикливать нужно именно эту часть.
myPlacemark0 = new ymaps.Placemark([55.752577,37.632134], { // Создаем метку с такими координатами и суем в переменную balloonContent: '
Заголовок метки 1
Немного инфы о том, о сем. Лорем ипсум чото там.
' // сдесь содержимое балуна в формате html, все стили в css }, { iconImageHref: 'img/icon1.png', // картинка иконки iconImageSize: [64, 64], // размер иконки iconImageOffset: [-32, -64], // позиция иконки balloonContentSize: [270, 99], // размер нашего кастомного балуна в пикселях balloonLayout: "default#imageWithContent", // указываем что содержимое балуна кастомная херь balloonImageHref: 'img/ballon1.png', // Картинка заднего фона балуна balloonImageOffset: [-65, -89], // смещание балуна, надо подогнать под стрелочку balloonImageSize: [260, 89], // размер картинки-бэкграунда балуна balloonShadow: false }); /* Добавляем метки на карту */ myMap.geoObjects .add(myPlacemark0); Каждый такой кусок отвечает за одну кастомную метку, поэтому чтобы добавить несколько меток — повторяем этот кусок сколько нужно раз, естественно меняя название переменной myPlacemark0 на что-то другое.
dontforget.pro
Подключаем скрипт api карт яндекса
Для начала, как и в прошлой статье, подключаем скрипт api карт яндекса в хедере, там это подробно описано.
<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
Создаем контейнер карты
Далее вставляем в любом месте страницы, где нужно отобразить карту следующий код:
<div id="map"></div>
Вставляем готовый код с кластеризацией
Для примера я указал код для 3 разных точек
<script type="text/javascript"> ymaps.ready(function () { var myMap = new ymaps.Map('map', { center: [55.751574, 37.573856], zoom: 8, behaviors: ['default', 'scrollZoom'] }), clusterer = new ymaps.Clusterer({ preset: 'islands#invertedDarkBlueClusterIcons', groupByCoordinates: false, clusterDisableClickZoom: true, clusterHideIconOnBalloonOpen: false, geoObjectHideIconOnBalloonOpen: false }), getPointData = [ {balloonContentBody: "<div class='ballon-point'>Адрес: Московская обл., г.
оицк, Академическая пл., д. 4<br> Ближайшее метро: м. Бунинская аллея<br>08:00 — 23:00 без выходных", clusterCaption: "<br>08:00 — 23:00 без выходных"}, {balloonContentBody: "<div class='ballon-point'>Адрес: Московская обл., г. Наро-Фоминск, ул. Московская, 26а<br> Ближайшее метро: Нет<br>08:00 — 23:00 без выходных", clusterCaption: "<br>08:00 — 23:00 без выходных"}, {balloonContentBody: "<div class='ballon-point'>Адрес: г. Москва, ул. Южнобутовская, д. 2<br> Ближайшее метро: м. Бульвар Адмирала Ушакова<br>8:00 — 23:00 без выходных", clusterCaption: "<br>8:00 — 23:00 без выходных"}, ], getPointOptions = function () { return { preset: 'islands#redDotIcon' }; }, points = [ [55.485654,37.308209],[55.377407,36.759633],[55.545278,37.544288],], geoObjects = []; for(var i = 0, len = points.length; i < len; i++) { geoObjects[i] = new ymaps.Placemark(points[i], getPointData[i], getPointOptions()); } clusterer.options.set({ gridSize: 80, clusterDisableClickZoom: true }); clusterer.add(geoObjects); myMap.geoObjects.add(clusterer); myMap.setBounds(clusterer.getBounds(), { checkZoomRange: true }); myMap.behaviors.disable('scrollZoom'); }); </script>
Разберем важные параметры нашей карты
center: — Указываем координаты центра карты
zoom: — масштаб приближения карты
getPointData = — создаем наполнения блоков меток карты, которые появляются по клику
clusterCaption: — Краткое описание метки, когда они собраны в кластер, то внутри блока у кластера показывается сразу несколько меток
points = — Перечисляем координаты всех нужных нам точек, их количество должно равняться getPointDat
myMap.behaviors.disable(‘scrollZoom’); — отключаем скроллинг мышью по области карты
Данный код можно выгодно автоматизировать. Создать новый тип записей, например «филиалы» и заполнить в дополнительных полях координаты и адреса, описания. Потом с помощью php кода получить список всех точек и перебором вывести их все на одну карту. Если интересно могу скинуть готовый код для wordpress.
Также рекомендую к ознакомлению
superlen.ru
Создаём свою метку
Подключаем скрипт API Яндекс Карт 2.1 и выводим наш скрипт.
<div id="map" style="width: 100%; height: 400px"></div> <script src="htt.
38646,37.61400201562497],{ balloonContentBody: 'Текст в балуне', },{ iconLayout: 'default#image', // Путь до нашей картинки iconImageHref: 'assets/img/address.png', // Размер по ширине и высоте iconImageSize: [70, 70], // Смещение левого верхнего угла иконки относительно // её «ножки» (точки привязки). iconImageOffset: [-35, -35] }); var clusterer = new ymaps.Clusterer({ clusterDisableClickZoom: false, clusterOpenBalloonOnClick: false, }); clusterer.add(myGeoObjects); myMap.geoObjects.add(clusterer); // Отлючаем возможность изменения масштаба myMap.behaviors.disable('scrollZoom'); } </script> Добавление нескольких меток
Тут все почти аналогично, рассмотрите на примере:
<div id="map" style="width: 100%; height: 400px"></div> <script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script> <script type="text/javascript"> ymaps.ready(init);.
cemark([56.800151390638646,38.61400201562497],{ balloonContentBody: 'Текст в балуне', },{ iconLayout: 'default#image', iconImageHref: 'assets/img/address.png', iconImageSize: [70, 70], iconImageOffset: [-35, -35] }); var clusterer = new ymaps.Clusterer({ clusterDisableClickZoom: false, clusterOpenBalloonOnClick: false, }); clusterer.add(myGeoObjects); myMap.geoObjects.add(clusterer); myMap.behaviors.disable('scrollZoom'); } </script> Тут всё просто, пример работает на ура. Если есть вопросы, задавайте.
Широту и долготу можно посмотреть на официальном сайте Яндекса, перейти .
daruse.ru
Найдем в БД объекты которые находятся рядом в радиусе одного километра.
В системе координат один градус равен 111 км, значит 1 км = 1 / 111 = 0,009009009009009°.
Напишем SQL запрос который найдет все объекты у которых координаты входят в требуюмыю область.
// Запись с `id` = 1 $sth = $dbh->prepare("SELECT * FROM `objects` WHERE `id` = 1"); $sth->execute(); $object = $sth->fetch(PDO::FETCH_ASSOC); // Объекты рядом $area = 1 / 111; $cord = explode(',', $object['point']); $sth = $dbh->prepare(" SELECT * FROM `objects` WHERE `id` <> {$object['id']} AND SUBSTRING_INDEX(`point`, ',', 1) BETWEEN {$cord[0]} - {$area} AND {$cord[0]} + {$area} AND SUBSTRING_INDEX(`point`, ',', -1) BETWEEN {$cord[1]} - {$area} AND {$cord[1]} + {$area} ORDER BY `name` "); $sth->execute(); $list = $sth->fetchAll(PDO::FETCH_ASSOC);
Выведем найденные метки синим цветом:
<div id="map" style="width: 100%; height:500px"></div> <script src="http://api-maps.yandex.ru/2.1/?lang=ru-RU" type="text/javascript"></script> <script type="text/javascript"> ymaps.ready(init); function init() { var myMap = new ymaps.Map("map", { center: [<?php echo $object['point']; ?>], zoom: 16 }, { searchControlProvider: 'yandex#search' }); var myCollection = new ymaps.GeoObjectCollection(); // Добавим метку красного цвета. var myPlacemark = new ymaps.Placemark([ <?php echo $object['point']; ?> ], { balloonContent: '<?php echo $object['name']; ?>' }, { preset: 'islands#icon', iconColor: '#ff0000' }); myCollection.add(myPlacemark); // Добавим найденные метки. <?php foreach ($list as $row): ?> var myPlacemark = new ymaps.Placemark([ <?php echo $row['point']; ?> ], { balloonContent: '<?php echo $row['name']; ?>' }, { preset: 'islands#icon', iconColor: '#0000ff' }); myCollection.add(myPlacemark); <?php endforeach; ?> myMap.geoObjects.add(myCollection); // Сделаем у карты авто масштаб чтобы были видны все метки. myMap.setBounds(myCollection.getBounds(),{checkZoomRange:true, zoomMargin:9}); } </script>Результат:
snipp.ru
Что такое карты?
Не важно, Google или Яндекс карты – смысл один. Это карты населенных пунктов с отметками расположения компаний и различных организаций. Отличия карт Яндекса от карт Google кроются только в некоторых дополнительных возможностях и интерфейсе.
Вот, например, как выглядит наш офис на Яндекс.Картах:
Если компания есть на карте, то это дает огромный плюс в доверии пользователей, а также ценную дополнительную информацию: режим работы, адрес, где находится, как добраться, отзывы и т.д. Компания на карте – доверие, которое не стоит никаких денег.
Плюсы Google и Яндекс карт
- Повышает доверие к вашей компании;
- Удобный поиск вашего адреса и схемы проезда помогает вашим клиентам быстро вас найти;
- Увеличивается приток посетителей на сайт;
- Общение с потенциальными клиентами с помощью Hangouts (Google).
Как добавить компанию на Яндекс.Карты?
Перейдите на страницу Яндекс.Справочника, в разделе «Мои организации» нажмите на «Добавить организацию». Не забудьте зарегистрироваться в Яндекс почте. Компания может уже существовать на картах. Введите название компании в проверочную форму.
В случае отрицательного результата, нажмите «Добавить новую организацию» и перейдите к заполнению информации.
Яндекс.Карты предлагают два варианта размещения
Стандартное, оно же бесплатное:
И платное (приоритетное), когда ваша компания выделяется на карте специальной отметкой:
1. Платное размещение выделяется специальной меткой, занимает первые позиции в поиске по тематическим запросам и привлекает больше внимания пользователей.
2. Бесплатное размещение проще разместить. После заполнения информации о компании, она появится на Яндекс.Картах в течение трех дней, а на странице поисковой выдачи в течение недели.
Платное размещение необходимо заказывать. Необходимо указать дату начала показов, длительность размещения. Ввести контактные данные, отправить заполненную информацию на рассмотрение. Рекламное объявление проходит модерацию и должно соответствовать Правилам размещения рекламы на Яндексе. Оплата счета-оферты означает ваше согласие с Условиями размещения. Приоритетные показы начнутся после поступления средств на счет Яндекса и модерации рекламного объявления, но не ранее указанной вами даты начала показов.
Как добавить компанию на Google.Maps?
Google Мой Бизнес это аналог Яндекс.Справочника. Перейдите на сайт Google Мой Бизнес и нажмите «Добавить данные о компании в Google». Компанию может уже существовать на картах. Введите название компании в проверочную форму. Если она существует, остальная информация подтянется автоматически.
В случае отрицательного результат, создайте новый аккаунт вашей компании. Детально заполните информацию. Google требует подтверждения прав на созданную компанию. Сделать это можно двумя способами – по телефону или по почте. После подтверждения, вы сможете редактировать данные и видеть статистику посещений аккаунта вашей компании.
В поиске это будет выглядеть так:
Интересные фишки
1. «Управление фотографиями»
Фотографии организации показываются в Яндекс.Картах. Чтобы увидеть фото, найдите организацию на карте и перейдите на ее карточку или страницу.
2. «Отзывы»
В Яндекс.Справочнике, можно следить за отзывами своих клиентов и быстро на них реагировать. Положительные отзывы благоприятно влияют на репутацию фирмы. Тем самым клиенты будут больше вам доверять.
3. Hangsout
Это приложение для мгновенного обмена сообщениями. Hangsout связан с аккаунтом Google, который вы зарегистрировали в Google картах. Клиенты смогут писать вам в чат. Это очень удобно, когда надо ответить незамедлительно.
Подводные камни
Если неправильно настроить «карты», то у вас могут возникнуть проблемы:
1. «Левая» точка на карте. Иногда случается так, что из-за неправильных настроек на карте отображается ложная информация. Точка может совсем отсутствовать, находится не в том здании или не на той улице.
Совет: внимательно заполняйте информацию о компании. Дважды проверьте указанный адрес.
2. В Google картах, подтверждение адреса на карте – большая заморочка. Они утверждают, что подтвердить легко: звонком или письмом. На самом деле это не так. Звонок совершенно не поможет, только нервы «вымотает». А подтверждение письмом – это как ждать у моря погоды. Письма часто не доходят до адресата.
Совет: если письмо не дошло или вам долго отвечают, напишите в поддержку Google. В письме опишите свою проблему. В поддержке отвечают намного быстрее и шансы решить проблему увеличиваются.
3. В Яндекс.Картах, подтверждение происходит через звонок. Через телефонный разговор, тяжело донести нужную информацию до оператора. Оператор может ошибиться в цифре или букве. Как итог, вы не подтвердили свою компанию и опять все сначала.
Совет: в процессе общения с оператором несколько раз проверьте информацию о компании. Так меньше шанс, что оператор допустит ошибку.
Это достаточно простой в освоении инструмент поможет вам привлечь новых покупателей и еще немного продвинуться в развитии своего проекта. Главное не бойтесь осваивать новое.
www.obrazstroy.ru
Используя сервис «Яндекс.Карты» Вы можете создать интерактивную карту для своего сайта и установить на ней множество меток с индивидуальной информацией в каждой метке.
Видео: установка меток на Яндекс.Карте
Для работы с конструктором карт от Яндекс у вас должен быть предварительно создан аккаунт на Yandex.ru, который позволит добавлять и хранить карты в профиле для дальнейшей корректировки.
Создание новой карты
Авторизуйтесь в сервисе «Яндекс» и перейдите в конструктор карт по адресу:
https://tech.yandex.ru/maps/tools/constructor/
Во всплывающем окне, вам будет предложено создание новой карты. Нажмите — «Создать карту».
Далее, в строке поиска, введите адрес местоположения вашей компании, и нажмите кнопку — «Найти».
Используйте встроенные инструменты для подготовки карты:
- измените масштаб карты
- в форме описания, добавьте название, адрес и контактную информацию компании
- измените цвет и тип маркера при необходимости
После внесения изменений, нажмите кнопку «Готово»
Установка нескольких меток на карте
После внесения информации в описание, при необходимости, вы можете установить несколько маркеров на интерактивной карте. Для этого, перейдите во вкладку «Метки», и приступайте к установке маркеров в необходимых областях карты, путём нажатия левой клавиши мыши.
Примечание: в каждой метке можно указать описание, цвет и тип для их различия.
По завершению всех меток, нажмите «Сохранить и продолжить».
Настройка размера карты
На данном этапе, вам необходимо указать размер интерактивной карты, которая будет отображаться в разделе с контактной информацией.
Вы можете указать любую ширину карты в пикселях или процентах, для того, чтобы карта выводилась в аккуратном виде, по всей ширине содержимого раздела, следует установить галочку «Растянуть по ширине», а высоту при этом рекомендуем указать в пределах 300-350 пикселях.
Примечание: мы приводим лишь пример подготовки карты для размещения на сайте, вы можете самостоятельно указать все настройки по своему усмотрению, при необходимости.
Размещение карты на странице сайта
После окончания создания и редактирования карты, получите её код для дальнейшего размещения на сайте.
Для этого, нажмите на кнопку «Получить код карты».
Скопируйте код из всплывающего окна, и разместите его в форме редактирования страницы вашего сайта. Перейдите в редактирование содержимого раздела, где вы хотите разместить интерактивную карту.
Откройте HTML код страницы, кликнув по соответствующей иконке на панели инструментов.
Во всплывающем окне, необходимо разместить код интерактивной карты.
Вставьте код карты в конец содержимого (место размещения карты указано для примера — вы можете выбрать любое подходящее место в структуре страницы). Нажмите кнопку «Обновить».
После проделанных действий, нажмите кнопку «Сохранить», и проверьте вывод карты на сайте.
uralcms.ru
В данной статье я хочу начать цикл статей по работе с API Яндекс.Карт. Документация Яндекс.Карт достаточно полна, но степень разрозненности информации в ней высокая, при первом заходе в документацию без пол-литры не разобраться, и для решения какой-то проблемы можно потратить много времени на поиск по документации и в поисковике. Этот цикл статей будет рассказывать о практических решениях наиболее частых случаев использования API Яндекс.Карт последней, на момент написания статьи, версии 2.1.
При вёрстке сайта в контактной информации часто бывает необходимость вставки карты, на которой будет отмечено местоположение организации, для которой разрабатывается сайт. В самых простых случаях это может быть просто скриншот c онлайн-карт (или не онлайн):
Для вставки интерактивной карты может использоваться конструктор карт
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):
Здесь мы указываем:
- идентификатор блока «map», где у нас будет создана карта;
- center — центр карты с указанием ширины и долготы;
- zoom — коэффициент масштаба карты.
По умолчанию Яндекс.Карты создают много лишних элементов, которые в большинстве случаев не нужны на сайтах. В основном к элементам управления и к поведению карты достаточно применить 2 условия:
- из элементов карты присутствует только ползунок изменения масштаба;
- карта не должна менять масштаб скроллом мыши.
Для выполнения этих требований дополняем код:
Здесь мы отключили «scrollZoom» и добавили «zoomControl» с позиционированием от левого верхнего угла.
Теперь нужно добавить на карту метку, для статьи скачаём её картинку с http://medialoot.com/item/free-vector-map-location-pins/ и расположим в коде следующим образом:
Здесь мы объявляем переменную myPlacemark, в которой запишем маркер, в первом параметре ymaps.Placemark указываем координаты метки, а в третьем параметре:
- указываем в iconLayout, что будет использоваться пользовательское изображение метки;
- iconImageHref — путь к изображению;
- iconImageSize — указываем размеры изображения;
- iconImageOffset — указываем сдвиг от левого верхнего угла картинке к точке изображения, которая показываем на нужный нам объет. Нужно это чтобы при масштабировании карты положение метки не сбивалось. Почему смещение указывается в отрицательных значениях — одному
Богусоздателю API известно.
И через myMap.geoObjects.add() добавляем метку на карту.
А теперь сделаем баллун, который у нас будет показываться при клике на метку карты, макет баллуна и его содержимое возьмём с http://designdeck.co.uk/a/1241
Здесь мы:
- в balloonContent указываем контент, который будет отображаться при открытии балуна;
- balloonLayout — указываем, что в качестве макета баллуна будет использоваться пользовательское изображение;
- balloonContentSize и balloonImageSize — размеры контента и изображения соответственно;
- balloonImageHref — путь к изображению;
- balloonImageOffset — смещение относительно левого верхнего угла;
- balloonShadow — отключение тени у балуна (с пользовательскими изображениями ни на что не влияет).
Демо можно посмотреть тут.
blog.karmanov.ws