Как вставить Google карты (Google maps) на сайт. Как вставить карту на сайт html


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

Часто, возникает необходимость обозначить на карте определенную местность и вставить такую карту на свой сайт.И сделать это очень просто всего за 3 шага с инструментом от Yandex или Google.

Карта Yandex на сайт

Переходите по ссылке: http://api.yandex.ru/maps/tools/constructor/И далее три простых шага:Как поставить карту на сайтШаг 1. Создание. Тут необходимо найти и отметить необходимое место на карте. Для этого его нужно сначала найти. Введите нужный адрес в строку поиска, ниже строки появятся варианты адреса, которые есть на карте Яндекс. Или ищите место на карте в ручную. Чтобы отметить нужное место нажмите вверху на значок Yandex_button и введите название места (как Вам нравится, улица с номером дома, или просто любое название метки). Чтобы изменить масштаб карты – используйте бегунок слева. Итак, вы поставили метку. Нажимайте на Шаг 2.Шаг 2. Просмотр. Тут Вы просто просматриваете, как это будет выглядеть у Вас на сайте. Вам все нравится? Переходите на Шаг 3.Шаг 3. Код для вставки. Поставьте галочку что Вы прочитали лицензионное соглашение. Теперь перед Вами код (скрипт) Вашей карты, который Вам нужно скопировать как есть и вставить в режиме HTML на страничку Вашего сайта в желаемом месте.

Карта Google на сайт

Переходите по ссылке: http://maps.google.ru/Шаг 1. Поиск места.google mapВводите в строку поиска нужный Вам адрес (вместе с городом) и ниже Google выдаст Вам имеющиеся в базе адреса. Выбираете подходящий.Нажимаете на значек “Шестеренка” в правом нижнем углу (см. рисунок), и выбираете “Поделиться с друзьями или получить код карты”Шаг 2. HTML код для добавления на веб-сайт. Нажмите вкладку “Код”. Перед Вами откроется окно с картой.google-mapВам осталось выбрать размер карты или задать свой индивидуальный.

Теперь просто вставьте код в режиме HTML в нужное место странички Вашего сайта.

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

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

Закладка.

stepfor.top

Как добавить Google и Яндекс карты на сайт

Любой компании очень полезно будет иметь на своём корпоративном сайте карту проезда. Если заказчику необходимо забрать заказанный товар, то проще зайти на ресурс поставщика и посмотреть схему проезда, вместо того, что бы открывать лишние вкладки в браузере и искать адрес. О том, как добавить карты Яндекса и Google на свой ресурс мы сейчас и поговорим.

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

Что бы вставить карту яндекс на сайт первым делом необходимо зайти в конструктор карт. В появившемся окошке следует ввести нужный нам адрес и кликнуть на кнопку «Найти».

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

Следующий шагом будет определение типа карты. Вы можете создать её статичной или интерактивной. Рекомендуем второй тип. Это будет наиболее удобным для посетителей.

Затем конструктор выдаст нам HTML-код, который и следует вставить на свой ресурс. Всё, вот таким образом яндекс карта вставляется на сайт.

Google Maps

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

Опять же заходим в конструктор карт Google и вбиваем в строчку поиска нужный адрес.

Затем есть два варианта развития событий:

  1. 1. Подтверждаем выбор и получаем HTML код.
  2. 2. Выбираем настройки и соответственно настраиваем.

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

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

Рядом с картой рекомендуется сделать форму обратной связи. Это интуитивно понятно. О ней мы писали здесь.

Также по этой теме:

wpuroki.ru

Как вставить Google карты (Google maps) на сайт

Всем привет!Я думаю, вы не только замечали на сайтах различных компаний и интернет магазинов карту проезда, но и пользовались подобной картой, чтобы установить маршрут и найти, где находится фирма и как туда проехать.В этой статье  я расскажу, как вставить Google карты (Google maps) на сайт. Данный способ вставки карты подойдет как на обычные сайты, так и на WordPress, Joomla и т.д.К слову также скажу, что в базе BlogGood.ru есть еще статья по теме «Как добавить Яндекс карту».

Чтобы вставить Google карты (Google maps) на сайт, зайдите на официальную страничку сервиса Google maps:

https://www.google.com/maps/

Теперь в форму поиска «Искать на Google Картах» введите нужный адрес вашей компании, гостиницы, студии и т.д., например, Житомирская область, город Коростень ул. Грушевского 35:

Как вставить Google карты (Google maps) на сайт

После того, как вы нажмете на лупу «ПОИСК», перед вами откроется карта уже с помеченным указанным местом, со всеми прилегающими улицами, дорогами и соседними адресами:

Как вставить Google карты (Google maps) на сайт

Если вам нужно проложить маршрут, нажмите слева на ссылку «Проложить маршрут»:

Как вставить Google карты (Google maps) на сайт

На скриншоте я показал, где нужно ввести второй адрес (куда будет идти маршрут), например, улица Юрия Гагарина, Коростень, Житомирска область:

Как вставить Google карты (Google maps) на сайт

Теперь нам нужно получить код и установить его на сайт. Для этого перейдите по меню (три горизонтальные полоски):

Как вставить Google карты (Google maps) на сайт

И в меню выберите «Ссылка/код»:

Как вставить Google карты (Google maps) на сайт

Перед вами откроется два способа добавления Google maps на сайт, это «Ссылка» либо «Код»:

Ссылка – при переходе по ссылке, пользователю откроется сайт Google maps с уже настроенной картой и с маршрутом (если вы его указали). Копируйте адрес ссылки и вставляйте на сайт:

Как вставить Google карты (Google maps) на сайт

Вид ссылки в HTM-коде на сайте будет вот таким:

<a href="https://goo.gl/maps/FFE2Fm84tc12"> КАРТА ПРОЕЗДА </a>

Код – при вставке кода на вашем сайте будет отображаться Google maps со всеми ее опциями (масштаб, маршрут и т.д.). В настройках можно выбрать размер карты «Маленькая», «Средняя», «Большая», «Другой размер». Копируйте код и вставляйте на сайт в то место, где хотите, чтобы отображалась Google карта:

Как вставить Google карты (Google maps) на сайт

Обратите внимание, что в коде есть такие параметры как «width» – это ширина. Если у вас адаптивный сайт, то рекомендую поменять на значение в  процентах (%), например, было так:

width="600"

станет так:

width="100%"

Если вы используете WordPress, то этот код можно вставить в саму статью, например, назвать «Карта проезда» или «Контакты» и в текстовом редакторе в режиме «Текст» вставляйте код от Google maps:

Также можно вставить код в сам файл. Этот способ подойдет, если вы, хоть чуточку, разбираетесь в HTML.  Итак, зайдите в админке вордпресс на «Внешний вид» => «Редактор» и в нужном файле вставьте ваш код, например, в подвале сайта (самый низ сайта) «footer.php».

Можно вставить код через виджет.  Перетащите виджет «ТЕКСТ» в нужное место и вставьте в него код:

Как вставить Google карты (Google maps) на сайт

Ничего сложно для тех, кто хоть чуточку знает WordPress.

Вроде все. Вот такая вот карта вышла у меня на блоге.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

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

Метки: wordpress, без плагинов, Вебмастеру, для сайта

bloggood.ru