Яндекс карты для сайта html

Яндекс карты для сайта html

Всем привет! Сегодня, я хочу вам рассказать о том, как добавить на свой сайт карту от Яндекса. Конечно, сразу напрашивается вопрос, зачем это надо? Если ответить коротко, то это нужно, чтобы вас нашли. Другой вопрос, кому это нужно? Нужно это многим сайтам, поговорим обо всем этом ниже.

Кому это надо?

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

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

Как вставить Яндекс Карту на сайт.

Одним из крупнейших картографических сервисов в рунете, является – Яндекс Карты. Есть еще и другой, от компании Гугл. Но сегодня, будет разговор именно про Яндекс Карты.

Для установки Яндекс Карты, нужно получить код, а затем, полученный код, вставить в нужное место на сайте. И не важно, на какой платформе ваш сайт. Данная инструкция подойдет и для сайтов на html, и для wordpress и для любых других движков. Достаточно того, чтобы он поддерживал вставку скриптов, что на сегодняшний день, предоставляет практически любой платный хостинг (да и большинство бесплатных).

Для установки, вначале нужно перейти по ссылке — yandex.ru/map-constructor/

Кликните на Создать карту, затем, выберите имя карты, сохранить и продолжить.

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

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

Полученный код карты, нужно вставить на ваш сайт. Если это просто сайт на HTML, то просто вставьте его в нужное место.

Читайте также:  Как переименовать пользователя в windows 10 домашняя

Или же, если к примеру, у вас сайт на популярной CMS WordPress, то вы можете установить его в код либо самой статьи и для этого, вам совсем не нужен какой либо плагин, но вставку нужно делать, в режиме «Текст»

либо, можно вставить в виджет.

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

В этой статье рассмотрим установку Яндекс карт без использования плагина, поэтому это подойдет как для обычного сайта, так и для сайта созданного на движке WordPress. О том как добавить Google карты читайте тут.

Яндекс карты (Yandex maps) – отличный инструмент, который позволит сообщить о местоположении офиса, склада или магазина. Разместив на сайте Яндекс нарту, с подробной схемой проезда, можно быть уверенным, что клиент не заблудиться.

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

В Яндекс картах есть схемы метро и данные о пробках, что позволит избежать ряда неудобств и сэкономит время.

Если представить к сравнению Яндекс и Google карты (добавление Google карт на сайт), то мое предпочтение будет отдано именно сервису Яндекс карт, так как он предлагает для пользователя более широкие возможности. Не говоря уже о том, что Яндекс карты имеют лучшую детализацию, а так же народную карту, которую редактируют по спутниковым снимкам сами пользователи.

Пожалуй, с прелюдией закончим, как говорится: «Лучше один раз увидеть…».

Установка (добавление) Яндекс карты на свой сайт

Перед тем, как установить Яндекс карту на свой сайт, ее необходимо создать. Сделать это можно в конструкторе карт:

При переходе по ссылке вы увидите страницу:

  1. Воспользовавшись поиском найдите интересующий вас город, либо конкретный район/адрес.
  2. Установка точек позволит создать точку с описанием, которое будет появляться при клике по этой точке (маркеру). Можно задать цвет и нумерацию.
  3. Рисование линий – удобно, если нужно проложить маршрут.
  4. Рисование многоугольника.
  5. Можно выбрать 4 варианта отображения карты: схема, спутник, гибрид, народная карта.

Изменение размеров карты перетаскиванием меток. Позволит визуально определить как будет смотреться карта установленная на сайте. В помощь верстальщикам под картой отображается высота и ширина в пикселях.

Читайте также:  Жесткий диск в качестве внешнего

Осталось только ввести название карты, сохранить и получить код Яндекс карты.

Данный код карты легко вставить в WordPress виджет произвольного текста или html-кода:

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

Так же можно вставить код карты в WordPress запись или на страницу. Единственный момент – вставлять нужно в html-редакторе, а не в визуальном.

Результат работы:

Для создания раньше использовался api-ключ. В настоящее время его использование не обязательно. Однако, вам следует прочитать некоторые рекомендации Яндекса:

В api Яндекс картах для разработчиков существует широкий ассортимент функций, которые можно встроить на свой сайт и значительно улучшить функциональность карт:

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

Примеры кода этих и других карт можно посмотреть в песочнице api Яндекса:

Один из примеров (маршрутизация и стоимость) встроил на свой сайт. Выберите 2 точки на карте, затем нажмите на начальную точку, во всплывшем окне будет информация о стоимости доставки.

На сайте организации обычно указывается её адрес. Для удобства потенциальных клиентов, вместе с адресом располагается карта, на которой показано местонахождение организации. Можно сделать скрин карты в подходящем масштабе и создать обычное изображение. Но сайт выглядит гораздо интереснее и солиднее, если добавить на него Яндекс карты или Google maps.

У Яндекс карт есть только один недостаток — они не поддерживаются старыми браузерами. В остальном они лучше Гугла. Они содержат больше деталей, которые помогают лучше ориентироваться на карте. Из-за этого Яндекс карта загружается немного дольше, но это загрузка полезного контента. Кроме того, подключение карты делается проще. Поэтому Яндекс карты намного популярнее.

Добавление Яндекс карты

Разместить карту на своём сайте можно двумя способами: воспользоваться конструктором карт или использовать API Яндекса и написать скрипт самостоятельно. Для входа в конструктор нужен почтовый аккаунт на Яндексе. Карты, созданные в конструкторе, хуже поддерживаются браузерами, поэтому я рекомендую использовать второй способ. Он совсем несложный.

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

Читайте также:  Windows vps с тестовым периодом

Для использования карты нужно подключить API Яндекс карт. Это выполняет следующий код:

Добавьте этот код на созданную страницу.

Используя API Яндекса, пишем скрипт, добавляющий карту:

Поясню этот скрипт: карта создаётся внутри функции initMap() . В 20 строке функцию запускает метод ymaps.ready() . Это нужно, чтобы API загрузился до начала его использования.

Карту создаёт объект класса ymaps.Map . Нужно указать два параметра. В первом параметре указывается id блока, в который загружается карта. Второй параметр — это объект с настройками карты. Настройки такие:

center — координаты центра карты.

zoom — число от 0 до 19. Определяет масштаб карты. Чем меньше число, тем больше масштаб.

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

  1. Открываете карту на сайте Яндекса
  2. Находите нужный объект
  3. Нажимаете на него
  4. Появится окно, в котором будут координаты

Укажите в скрипте координаты нужного Вам объекта, и карта готова. Она должна отображаться на странице.

Добавление метки

Важный объект на карте можно указать при помощи метки. Например, здание, в котором располагается Ваша организация. Это выглядит так:

Чтобы поставить метку, нужно создать переменную для объекта метки. Она должна быть объявлена на глобальном уровне, то есть, до функции initMap() .

Внутри функции initMap() , после создания карты нужно добавить такой код:

Скрипт работает так: создаётся объект класса ymaps.Placemark . Указывается два параметра. В первом указываем координаты метки. Второй параметр — это объект с настройками метки. Можно указать такие настройки:

hintContent — текст, появляющийся при наведении на метку

balloonContent — текст в окне, которое появляется при клике не метке

В 23 строке созданная метка добавляется на карту.У объекта карты есть метод geoObjects.add() , который добавляет на карту объекты. В нашем примере объект карты записан в переменную map . К ней применён этот метод.

Весь код скрипта, добавляющего карту с меткой, выглядит так:

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

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

Ссылка на основную публикацию
Adblock detector