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


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

Шаг 1. Регистрация в Яндексе.

Для использования картографического сервиса Яндекса в первую очередь нам потребуется зарегистрироваться и получить адрес электронной почты @yandex.ru. Если у вас уже есть электронная почта на Яндексе, то можно воспользоваться своим логином и паролем для входа и пропустить этот шаг.

Если почтового ящика на Яндексе ещё нет, его необходимо получить. Для этого открываем адрес http://passport.yandex.ru/ и нажимаем на странице ссылку «Зарегистрироваться».

Заполняем предложенную регистрационную форму — вводим имя, фамилию, выбираем логин и нажимаем кнопку «Дальше».

Также заполняем следующую форму — придумываем пароль и секретный вопрос, вводим символы с картинки и нажимаем кнопку «Зарегистрировать».

 

Шаг 2. Создание карты с помощью конструктора.

После того как мы зарегистрировались и осуществили вход в систему Яндекса, открываем конструктор схем проезда по адресу http://api.yandex.ru/maps/tools/constructor/

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

Во всплывающем окошке вводи описание, например «Офис компании», выбираем стиль оформления метки и нажимаем кнопку «ОК». Кроме своего офиса с помощью установки дополнительных меток на карте можно также отметить и другие объекты, которые могут помочь в ориентировании. Кроме этого окошко с картой можно уменьшать и увеличивать в размерах, потянув его за зелёный треугольник в правом нижнем углу.

Когда редактирование закончено кликаем мышкой на серый блок «2 Просмотр», где можно увидеть, как карта будет выглядеть на сайте. Если всё устраивает, то переходим к блоку «3 Код для вставки».

Здесь вводим текущий адрес сайта, на котором будет использоваться карта, читаем и принимаем пользовательское соглашение, после чего нажимаем на большую зелёную кнопку «Получить код карты». Полученный код выделяем и копируем (нажимаем на клавиатуре Ctrl + C).

 

Шаг 3 . Вставка карты на сайт.

Заходим в систему управления сайтом. Если используется KasperCMS 5, то выбираем в верхнем меню Обратная связь > Карта проезда

В открывшемся окне вставляем полученный код в поле «HTML-код» и нажимаем кнопку «Сохранить». Теперь заходим на страницу обратной связи своего сайта и смотрим на результат.

Если используется другая система управления сайтом (не KasperCMS 5) или нужно вставить карту на произвольную страницу, то это также можно осуществить. В режиме редактирования страницы следует открыть её исходный код и вставить полученный от Яндекса код в то место страницы, куда нужно поместить карту.

Если нужно изменить размер карты на сайте, то можно отредактировать следующую строку в коде (она находится почти в самом низу кода):

 

 

 

Значение после параметра «width:» указывает ширину карты, а после параметра «height:» - высоту карты. Значение можно установить в процентах или пикселях.

Например, если проставить значение width:100%, то карта будет растягиваться на всю ширину страницы (на все 100%). Если проставить значение height:350px, то карта будет иметь высоту в 350 пикселей.

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

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

www.kasper.by

Как вставить Google карту на страницу сайта WordPress

Здравствуйте друзья! В этом уроке мы разберем с вами как добавить гугл карту на страницу или запись вашего сайта на WordPress.

Как вставить Google-карту на страницу сайта

Для начала нам нужно зайти по ссылке google.ru/maps и найти страну/город или необходимый адрес на карте. Найти необходимое место можно просто листая карту, или ввести адрес в поле для поиска, для примера давайте добавим карту на сайт с Австралией.

Для этого нам нужно:

1) Ввести в поле для поиска «Австралия» (или любую другую страну, город, или точный адрес с улицей которая вам нужна).

Как вставить Google карту на страницу сайта WordPress

Поиск Австралии на гугл карте

2) После того как Вы нашли нужное место, нажмите в левом верхнем углу на значок меню.

Как вставить Google карту на страницу сайта WordPress

3) Теперь нажмите «Поделиться с друзьями или получите код карты«.

Как вставить Google карту на страницу сайта WordPress

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

kak-vstavit-google-kartu-na-stranitsu-sayta-wordpress-5

Переходим на вкладку Код

5) В вкладке Код, скопируйте всю строчку кода (фрейм).

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

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d14633025.482991382!2d133.28132295!3d-26.4390917!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2b2bfd076787c5df%3A0x538267a1955b1352!2z0JDQstGB0YLRgNCw0LvQuNGP!5e0!3m2!1sru!2sru!4v1419453063815" frameborder="0"></iframe> Как вставить Google карту на страницу сайта WordPress

Копируем всю строчку кода

6) После этого откройте страницу сайта на которую вы хотите вставить карту и перейдите на вкладку редактора «Текст». Теперь вставьте скопированный код с гугл карт.

После этого можно сохранять страницу, и карта уже готова.

Как вставить Google карту на страницу сайта WordPress

Для вставки карты нужно перейти на вкладку Текст

Важно! Если вы хотите изменить высоту или ширину карты, измените значения width (ширина) и height (высота) в коде карты, в вкладке редактора Текст. К примеру, если вы хотите вставить карту на сайт размером 500px в ширину и 800px в высоту, значения должны быть width=’500′ height=’800′.

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

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

Результат вставки гугл карты, по примеру с урока:

Здравствуйте друзья! В этом уроке мы разберем с вами как добавить гугл карту на страницу или запись вашего сайта на WordPress. Как вставить Google-карту на страницу сайта Для начала нам нужно зайти по ссылке google.ru/maps и найти страну/город или необходимый адрес на карте. Найти необходимое место можно просто листая карту, или ввести адрес в поле для поиска, для примера давайте добавим карту на сайт с Австралией. Для этого нам нужно: 1) Ввести в поле для поиска "Австралия" (или любую другую страну, город, или точный адрес с улицей которая вам нужна). 2) После&hellip;

Проголосуйте за урок

100

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.7 ( 14 голосов ) 100

wp-lessons.com

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

Привет, друзьям блога nazyrov.ru!

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

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

Я расскажу, как вставить обычную графическую карту, или карту проезда, можно назвать как угодно. Такую карту можно позаимствовать с Яндекс карты или Google maps. Зачем же ее нужно ставить на сайт, спросите вы. Это интересное дополнение сайта и улучшение удобства пользования. На тревел блогах, благодаря таким картам, можно указывать маршрут и отмечать какие-то интересные места. Для сайтов визиток, это указание как до них добраться. Идей применения такой карты предостаточно, стоит только включить фантазию.

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

  • Использование возможностей конструктора;
  • При помощи плагинов и модулей;
  • 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».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

kardinalno.ru