Как сделать google maps api

Как сделать google maps api
Как сделать google maps api
Как сделать google maps api
Как сделать google maps api

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

Яндекс карты

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

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

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

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

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

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

http://api.yandex.ru/maps/tools/constructor/

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

Установка яндекс карт на WordPress

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

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

изменение размера карты

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

название карты

Копируем код:

скопировать код

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

виджет с кодом карты

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

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

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


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

http://api.yandex.ru/maps/form.xml

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

Маршрутизация - https://tech.yandex.ru/maps/jsbox/2.1/multiroute_driving

Пробки - https://tech.yandex.ru/maps/jsbox/2.1/traffic_control/?from=mapsfeatures

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

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

http://api.yandex.ru/maps/jsbox/2.1/deliveryCalculator

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

19.05.201422.04.2015 Юрий Белоусов Создание сайтов

Как сделать google maps api Как сделать google maps api Как сделать google maps api Как сделать google maps api Как сделать google maps api Как сделать google maps api Как сделать google maps api Как сделать google maps api Как сделать google maps api Как сделать google maps api Как сделать google maps api Как сделать google maps api Как сделать google maps api Как сделать google maps api

Статьи по теме:



Схема взаимодействия с общественными организациями

Поздравление от учеников учителям на выпускной6

Поздравления с байрамом на татарском

Подарок на буквы алфавита

Стол на металлических опорах своими руками