Вставить гугл карту на сайт

Привет, друзьям блога 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».

new map

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

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

карта гугл плагин

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

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

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

Google Maps

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

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

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

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

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

новая карта

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

расстановка маркеров

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

маршрут на карте

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

отметка отдельной площади

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

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

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

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

Карта метро на сайт

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

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

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

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

nazyrov.ru

1. Вставка карты Google Maps

Для начала давайте создадим html страницу и вставим на нее карту Google Maps. Делать это мы будем с помощью Google Maps API. То есть пойдем продвинутым путем. Надо заметить что у Google есть хорошая документация и инструкция на русском и английском по использованию Google Maps. Так что программисты могут сразу отправиться туда. Если же вы хотите получить понятный пошаговый урок — то оставайтесь.

Теперь я опишу по очереди действия которые необходимо сделать и после приведу код страницы с комментариями. Сперва создаем HTML страницу. Затем:

  1. На странице создаем элемент <div id=»map»></div> внутри которого у нас будет отображаться карта Google Maps.
  2. Необходимо стилизовать этот элемент, задать ему высоту и ширину чтобы он был виден на странице.
  3. Подключаем библиотеку Google Maps Api, чтобы создать карту и управлять ей. Без этой библиотеки карта не заработает.
  4. Пишем скрипт который создаст и отобразит карту Google Maps на странице.

Вот код страницы который у нас получился. Обратите внимание на комментарии внутри, я описал что и где происходит.

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>01 - My Google Map</title>          <!-- 2. Необходимо стилизовать этот элемент, задать ему высоту и ширину чтобы он был виден на странице -->     <style>         #map {             width: 100%;             height: 500px;         }     </style> </head> <body>          <!-- 1. Создаем элемент внутри которого у нас будет отображаться карта Google Maps -->     <div id="map"></div>      <!-- 4. Пишем скрипт который создаст и отобразит карту Google Maps на странице. -->     <script type="text/javascript">          // Определяем переменную map         var map;          // Функция initMap которая отрисует карту на странице         function initMap() {              // В переменной map создаем объект карты GoogleMaps и вешаем эту переменную на <div id="map"></div>             map = new google.maps.Map(document.getElementById('map'), {                 // При создании объекта карты необходимо указать его свойства                 // center - определяем точку на которой карта будет центрироваться                 center: {lat: -34.397, lng: 150.644},                 // zoom - определяет масштаб. 0 - видно всю платнеу. 18 - видно дома и улицы города.                 zoom: 8             });         }     </script>      <!-- 3. Подключаем библиотеку Google Maps Api, чтобы создать карту -->     <!-- Атрибуты async и defer - позволяют загружать этот скрипт асинхронно, вместе с загрузкой всей страницы  -->     <!-- В подключении библиотеки Google Maps Api в конце указан параметр callback, после  подключения и загрузки этого Api сработает функция initMap для отрисовки карты,  которую мы описали выше -->     <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>      </body> </html>

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

 

2. Карта Google Maps Api — определяем место и устанавливаем маркер

2.1 Определяем место центрирования карты

Давайте покажем на карте расположение Большого Театра. В параметре center мы определяли координаты центрирования карты:

center: {lat: -34.397, lng: 150.644},

Нам необходимо получить такие координаты для нашего места. Для этого идем в обычную версию Google Maps и правой клавишей кликаем на интересующем нас месте. Нажимаем «Что здесь» и получаем координаты места. (55.760186, 37.618711). Заодно и изменю масштаб, установив его на 18: zoom: 18.

Определение координат места для маркера на карте Google Maps

Вставить гугл карту на сайт

 

2.2 Устанавливаем маркер

Место определили. Осталось показать маркер на карте. Внутри функции initMap() добавляем переменную для маркера:

// Создаем маркер на карте var marker = new google.maps.Marker({   // Определяем позицию маркера  position: {lat: 55.760186, lng: 37.618711},   // Указываем на какой карте он должен появится. (На странице ведь может быть больше одной карты)  map: map,   // Пишем название маркера - появится если навести на него курсор и немного подождать  title: 'Наш маркер: Большой театр' });

Теперь у нас есть карта с маркером

Установка маркера на карте Google Maps

Как добавить событие по клику на карту или маркер в Google Maps

Также на клик по маркеру можно добавить свое событие. В итоговом коде страницы мы это делать не будем. Но делается это вот так:

google.maps.event.addListener(marker, 'click', function() {  document.location='http://google.com'; });

Первый параметр метода addListener — это объект, для которого добавляется событие, в нашем случае marker. Объектом может выступать не только маркер но и сама карта. Второй параметр click определяет тип события, в данном случае один щелчок. Третий — функция обработчик, которая сработает.

Более подробно про маркер и возможности работы с ним рекомендую посмотреть в документации.

2.3 Установка собственной иконки для маркера в Google Maps

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

В описание переменной с маркером, добавлю иконку.

// Создаем маркер на карте var marker = new google.maps.Marker({                  // Определяем позицию маркера                 position: {lat: 55.760186, lng: 37.618711},                  // Указываем на какой карте он должен появится. (На странице ведь может быть больше одной карты)                 map: map,                  // Пишем название маркера - появится если навести на него курсор и немного подождать                 title: 'Наш маркер: Большой театр',                  // Укажем свою иконку для маркера                 icon: 'theatre_icon.png' });

Про более сложные значки — можно посмотреть в документации.

 

3. Задаем свои стили оформления для карты Google Maps

Пришло время раскрасить нашу карту. Придать ей особый и неповторимый вид. Делать мы это будем с помощью сервиса Snazzy Maps который имеет большое количество скинов для Google карт. И позволяет делать вот такие крутые карты:

Вставить гугл карту на сайт

Я выбрал стиль карты который называется Blue water. На странице данного стиля можно найти код для оформления и скачать файл с примером — применения такого стилевого оформления к карте Google Maps.

Стили для оформления карты добавляем в свойство styles которое мы указываем для переменной map — когда создаем в ней объект с картой.

Привожу весь фрагмент кода:

// В переменной map создаем объект карты GoogleMaps map = new google.maps.Map(document.getElementById('map'), {                 // При создании объекта карты необходимо указать его свойства                   // center - определяем точку на которой карта будет центрироваться                 center: {lat: 55.760186, lng: 37.618711},                   // zoom - определяет масштаб. 0 - видно всю платнеу. 18 - видно дома и улицы города.                 zoom: 18,                  // Добавляем свои стили для отображения карты                 styles: [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#46bcec"},{"visibility":"on"}]}] });

Теперь наша карта выглядит вот так:

Вставка стилизованной карты Google Maps. Свое оформление для карт Google Maps.

 

4. Информационные окна

Карту можно еще улучшить, добавив информационное окно по клику на наш маркер. Документация по ним лежит здесь. Если вкратце, то чтобы добавить инфо окно необходимо:

  1. Создать само окно и контент внутри него
  2. Сделать так чтобы оно появлялось по клику на маркер.

Все это происходит внутри функции initMap()

4.1 Опишем контент инфо-окна:

// Создаем наполнение для информационного окна var contentString = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h1 id="firstHeading" class="firstHeading">Большой театр</h1>'+ '<div id="bodyContent">'+ '<p>Госуда́рственный академи́ческий Большо́й теа́тр Росси́и, или просто Большой театр — один из крупнейших' + 'в России и один из самых значительных в мире театров оперы и балета.</p>'+ '<p><b>Веб-сайт:</b> <a href="http://www.bolshoi.ru/" target="_blank">bolshoi.ru</a>'+ '</p>'+ '</div>'+ '</div>';

4.2 Создадим инфо-окно

// Создаем информационное окно var infowindow = new google.maps.InfoWindow({  content: contentString,  maxWidth: 400 });

4.3 Делаем так чтобы по клику на маркер — появлялось инфо-окно

// Создаем прослушивание, по клику на маркер - открыть инфо-окно infowindow marker.addListener('click', function() {  infowindow.open(map, marker); });

Теперь карта с инфо-окном выглядит следующим образом:

Добавляем инфо окно и описание к маркеру на карту Google Maps.

Также можно убирать стандартные элементы управления с карты, включать/выключать нужные и ненужные, и даже создать свои. Описание всего этого вы найдете в документации.

rightblog.ru

Метод 1 из 3: Стандартное добавление карты на сайт

Это самый популярный способ из предложенных. Мы переходим на главную страницу поисковика и входим в раздел Карты.

Переходим в сервис Гугл карт

Потом у нас появляется поле куда нам нужно ввести адрес (город, улицу, дом конечной точки). Берем произвольно: г. Калининград, Советский пр-кт, 1 (место, где я учился когда-то :-))

Вводим адрес организации с городом

Затем в правом нижнем углу вы увидите значок шестеренки. Нажимаете на него и выбираете «Поделитесь с друзьями или получите код карты»

Поделиться с друзьями или получить код карты

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

Код гугл карты в отдельном окне

Вот сам код:

Теперь переходим на сайт WordPress и заходим на страницу «Контакты», и переключаемся на текстовый режим и вставляем полученный выше код в нужное нам место.

переходим в тестовый режим и вставляем код

Теперь обновляем страницу и смотрим результат:

Гугл карта отображается на странице

Здорово! Получилось. Теперь я расскажу про другой вариант добавления карты. Он подойдет, скорее лучше, для верстальщиков и веб мастеров, чем для новичков.

Метод 2 из 3: Добавление WordPress Google Maps через произвольные поля

Этот способ предполагает, что вы уже владеете хорошим уровнем HTML и CSS и хорошо разбираетесь в программировании, знаете функции и немного php с javascript. Нет, программировать с нуля мы здесь не будем и нам не зачем это. Просто покажу небольшой трюк.

Заходите в свою админку WordPress и выбираете шаблон page.php. Внутрь него вставляете вот этот код:

Вставьте на страницу вот таким образом (кликабельная картинка):

Добавление Гугл карт через произвольные поля

Если вы уже разбираетесь в вордпрессе, то можете задать вопрос «Зачем добавлять этот код? Ведь он будет выводится на всех страницах без исключения». Нет, отвечу почему. Дело в том, что добавлять карты гугл таким образом мы будем через произвольные поля. Если мы ничего не укажем, то ничего выводиться не будет и об этом можете не беспокоиться. Итак, в шаблон страницы код карты мы вставили, теперь давайте выведем его на любой странице без добавления скрипта. Для этого я снова перехожу в раздел «Контакты» и удаляю уже имеющийся там код.

Важный момент в строчке $address = get_post_meta($post->ID, ‘_post_meta_address_key’, true);

Вместо   ‘_post_meta_address_key’  нужно вставить любое произвольное имя. Например ‘Адрес_вашей_организации’

Включаем поддержку произвольных полей

Спускаюсь в самый низ страницы и добавляю новое.

Добавляем новое поле

Называю я его так, как и в строчке кода выше — «Адрес_вашей_организации», а в качестве значения указываю следующее – «г. Калининград, Советский проспект, 1» и потом жмем «Добавить»

Указываем адрес в поле

Потом обновляем страницу и смотрим результат в браузере:

Результат в браузере

Тоже работает! Будьте внимательны, когда будете вставлять код. Потому что он содержит php запрос. Ни в коем случае не вставляйте его вложенным в другой php код цикла – получите ошибку и белый экран «смерти». В этом примере вы можете задать размеры карты. Длина  width  указана 100%. Вы же можете задать свое значение. Вот этот участок (нажмите для увеличения):

Меняете значение длины карты на свое

Я указал длину в 400. Пиксели можете не писать, система и так поймет.

smarticle.ru

Как вставить карту Гугл на сайт WordPress

От автора: приветствую вас, друзья. Из этой небольшой статьи вы узнаете, как вставить карту Гугл на сайт WordPress. Google карта это очень удобная штука, поскольку позволяет визуализировать, например, на странице контактов ваш адрес или просто показать какое-либо место на карте.

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

Итак, давайте приступим к установке и настройке Google Sitemap, то бишь Гугл карты. Здесь мы рассмотрим два способа добавления карты: попроще и чуточку посложнее. Начнем с простейшего варианта, по результатам которого мы получим карту в виде статической картинки. Для его реализации нам даже не потребуется обращаться к сервису Google Maps (Google Карты), достаточно лишь узнать и запомнить технику добавления карты.

Итак, для добавления карты нам необходим тег img с примерно таким кодом:

Как видим, картинка берется с сервиса Google Maps и к ней добавляются несколько параметров, в частности такие:

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

Вставить гугл карту на сайт

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

Вставить гугл карту на сайт

Также убедимся в том, что Google карта появилась и на сайте WordPress.

Вставить гугл карту на сайт

Отлично! Теперь мы научились добавлять и производить необходимую настройку карты Google на сайте. Заметьте, нам не пришлось при этом устанавливать никакого плагина, все можно сделать и без плагина в течение буквально одной минуты.

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

Перейдем по ссылке maps.google.com и найдем на карте нужное нам место.

Вставить гугл карту на сайт

Теперь нам осталось получить код карты. Для этого жмем ссылку ПОДЕЛИТЬСЯ, в открывшемся окне выбираем вкладку Код и копируем полученный код Гугл карты.

Вставить гугл карту на сайт

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

Вставить гугл карту на сайт

Сохраним изменения и проверим, появилась ли Гугл карта на сайте WordPress.

Вставить гугл карту на сайт

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

Повторюсь, для использования Google Maps нам даже не пришлось искать плагин WordPress. К слову, если вы хотите научиться писать плагины, позволяющие легко добавлять на ваш сайт любую Google карту, тогда познакомьтесь с нашим курсом по API WordPress.

На этом у меня все. Удачи!

Вставить гугл карту на сайт

webformyself.com

Код для вставки Google Map, чтобы повысить ценность вашего сайта

Если вы добавите расположение на ваш веб-сайт, то посетителям будет легче запомнить место и найти к нему дорогу. Если вы добавите карту на свой сайт, то посетители определенно лучше запомнят ваше местоположение и смогут легче до вас доберутся. Многие владельцы сайтов интересуются, как вставить Google Maps в Joomla, вот краткое руководство, которое поможет вам добавить карту Google на сайт.

Ниже перечислены шаги, которые помогут вам сделать это очень просто, и успешно добавить карты Google на сайт с нашим генератором Google Maps:

  • Выберите адрес, по которому вы хотите, чтобы посетители вас нашли, и добавьте карту расположения на сайт.
  • Выберите тип карты: спутниковый, гибрид или местность. Посмотрите внимательно, какой тип лучше подходит именно вам.
  • Укажите ширину и высоту, чтобы сделать ее подходящей для вашего сайта.
  • После того, как вы закончили с этими настройками, нажмите на кнопку “Сгенерировать мой код” под нашим инструментом. Кроме того, вы можете выбрать полный код, нажав “>> Нажмите здесь – Нажмите Ctrl + C <<“
  • И, наконец, вставьте HTML-код в исходный код вашего веб-сайта. Пожалуйста, обратите внимание, что вы можете вставлять карты Google в разных частях вашего сайта, таких как статьи, информация/страницы контактов или виджеты.

Преимущества внедрения карты Google на веб-сайт

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

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

embedgooglemaps.com

Как поделиться картой или адресом

  1. Откройте Google Карты на компьютере.
  2. Откройте маршрут, карту или изображение просмотра улиц, которым хотите поделиться.
  3. В левом верхнем углу экрана нажмите на значок меню Меню.
  4. Выберите Ссылка/код. Если этого пункта нет в меню, нажмите Ссылка на карту.
    • Вы можете сократить ссылку, установив флажок «Короткий URL».
  5. Скопируйте ссылку и поделитесь ей.

Как встроить на сайт карту или маршрут

Примечание. На встроенной карте могут быть не видны данные о пробках и другая информация.

  1. Откройте Google Карты.
  2. Откройте маршрут, карту или изображение просмотра улиц, которое хотите встроить.
  3. В левом верхнем углу экрана нажмите на значок меню Меню.
  4. Выберите Ссылка/код.
  5. Откройте вкладку Встраивание карт.
  6. Чтобы выбрать размер карты, нажмите на стрелку вниз Стрелка вниз слева от поля с кодом.
  7. Скопируйте текст из поля и вставьте его в HTML-код своего сайта или блога.

support.google.com

Шаг 1. Получить код для установки карты Google на сайте

Итак, чтобы разместить интерактивную карту Google на своем сайте, в первую очередь нужно получить код карты с отметкой Вашей организации. Для этого на GoogleMaps введите адрес или название компании в строку поиска, либо вручную найдите необходимый дом на карте и установите метку кликом мыши.

Найдите вашу организацию на карте

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

Нажмите на значок меню рядом со строкой поиска

В открывшемся списке меню выберите пункт «Ссылка/код».

Выберите пункт Ссылка/код в списке меню

В открывшемся окошке перейдите во вкладку «Код», выберите размер карты и скопируйте предложенный html-код.

Скопируйте код карты в буфер обмена

nubex.ru

Google Maps API v3 позволяет легко и просто добавить карту на любую страницу вашего сайта, даже если вы не особо владеете языком JavaScript.

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

Первый урок мы посвятим теме «Как установить Google Maps на сайт?»

Для этого нам нужно сделать 4 простых шага.

Шаг 1 — подключаем Google Maps API

Подключаем к странице JavaScript файл, который загрузит все компоненты карты. Также обратите внимание, что в указанном пути нужно написать ваш ключ API для грамотной работы Google Maps (как получить ключ описано ниже).

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

<!DOCTYPE html>
<html lang="ru">
<head>
...
<script src="https://maps.googleapis.com/maps/api/js?key=ВАШ_API_КЛЮЧ"></script>
...
</head>
<body>

Как получить ключ Google Maps API?

1. Вы должны войти в свой аккаунт на Google. Если у вас его нет, то просто зарегистрируйтесь там.

2. Перейдите на страницу Google Developers Console

3. Выберите «Создать новый проект» или если вы уже создавали проекты ранее, то выберите существующий. Затем нажмите «Продолжить».

Вставить гугл карту на сайт

4. Укажите произвольное название для ключа. По желанию, вы можете еще указать домен сайта на котором и будет использоваться данный ключ, но это необязательно.

Затем нажмите кнопку «Создать».

Вставить гугл карту на сайт

5. Вот тот самый ключ, который и нужно указывать при подключении Google Maps API

Вставить гугл карту на сайт

Шаг 2 — размещаем карту на странице сайта

В том месте, где требуется вывести карту, мы вставляем тег (подойдет любой блочный элемент), которому задаем уникальный ID и также желательно указать class.

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

<body>
...
<div id="map" class="map"></div>
...
</body>

Шаг 3 — задаем размеры карты

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

Размеры можно задавать в любых единицах доступных в CSS.

.map { width: 100%; height: 400px; } 

Шаг 4 — инициализируем карту

После подключения Google Maps API (шаг 1), нам необходимо вызвать функцию инициализации карты, указанную ниже.

// initMap() - функция инициализации карты function initMap() { // Координаты центра на карте. Широта: 56.2928515, Долгота: 43.7866641 var centerLatLng = new google.maps.LatLng(56.2928515, 43.7866641); // Обязательные опции с которыми будет проинициализированна карта var mapOptions = { center: centerLatLng, // Координаты центра мы берем из переменной centerLatLng zoom: 8 // Зум по умолчанию. Возможные значения от 0 до 21 }; // Создаем карту внутри элемента #map var map = new google.maps.Map(document.getElementById("map"), mapOptions); } // Ждем полной загрузки страницы, после этого запускаем initMap() google.maps.event.addDomListener(window, "load", initMap); 

Ну и напоследок, откуда брать значения широты и долготы?

1. Заходим на сайт Google Map

2. Находим на карте требуемый объект

3. Кликаем по нему правой кнопкой мыши и выбираем «Что здесь?»

4. На карте появится окошко в котором будет прописана широта и долгота. Эти значения нам и нужно использовать при работе с Google Maps API

Вставить гугл карту на сайт

В следующей статье мы узнаем, как добавить маркер на нашу карту.

webcareer.ru

You May Also Like

About the Author: admind

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.