Всем привет други и подруги! В этой заметке мы разберем вопрос установки на сайт wordpress google maps (карту гугла). Практически все без исключения компании на своих корпоративных сайтах или сайтах-визитках имеют (а если нет, то должны иметь) карты от гугл или яндекс.
Это очень важно как с точки продвижения ресурса, так и для информирования клиентов о том, где находится ваша фирма и как к вам можно подъехать.
Если не ошибаюсь, то об этом говорилось в каком-то из давних докладов на конференции Яндекса.
Т. е наличие карты с адресом на сайте можно считать по праву маленьким звеном в системе ранжирования в поисковой выдаче. Можете кидать камнями если думаете иначе:-) Итак, давайте вернемся к вопросу как добавить карту гугл на сайт. Работать мы будем как с помощью плагина, так и без него, т.е чисто функциями и кодом. Делаем вместе со мной шаг за шагом.
Метод 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
Шаг 1. Получить код для установки карты Google на сайте
Итак, чтобы разместить интерактивную карту Google на своем сайте, в первую очередь нужно получить код карты с отметкой Вашей организации. Для этого на GoogleMaps введите адрес или название компании в строку поиска, либо вручную найдите необходимый дом на карте и установите метку кликом мыши.
Когда отметка на карте установлена, нажмите на значок меню рядом со строкой поиска.
В открывшемся списке меню выберите пункт «Ссылка/код».
В открывшемся окошке перейдите во вкладку «Код», выберите размер карты и скопируйте предложенный html-код.
nubex.ru
Вставить Яндекс карты на сайт
Вставить Яндекс карту на свой сайт можно несколькими способами:
- Использование возможностей конструктора;
- При помощи плагинов и модулей;
- 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 страницы.
И в заключение нужно ввести название карты проезда, сохранить ее и получить код, который можно вставить на сайт.
Как видите все очень просто.
Карта метро на сайт
Вставить карту метро на сайт можно двумя способами.
Первый способ вставить статичную карту метро на сайт — просто сделать скриншот, затем в фотошопе сделать необходимые пометки, если таковые имеются и вставить картинку на сайт.
Второй способ вставить интерактивную карту метро на сайт – вывести ее во фрейме с сервиса Яндекс Метро.
Буду признателен, если кто-то подскажет другой способ!
nazyrov.ru
С помощью Google Карт Вы можете размещать карты, маршруты проезда, результаты поиска, а также панорамы из «Просмотра улиц» на своем веб-сайте или в блоге.
Если посетитель Вашей страницы вошел в аккаунт Google, он увидит на ней все сохраненные им места, например, свой дом или офис.
Как получить код:
- Перейдите в Google Карты.
- Откройте карту или панораму из «Просмотра улиц», которую нужно добавить на сайт.
- Нажмите на значок главного меню
в левом верхнем углу экрана. - Выберите «Поделитесь с друзьями или получите код карты».
- В открывшемся окне перейдите на вкладку «Код».
- Укажите размер карты, затем скопируйте код и вставьте его в исходный код своего веб-сайта или блога.
Примечание. В упрощенном режиме получить код карты нельзя.
Обратите внимание, что информация о пробках и некоторые другие данные могут быть не видны на добавленной карте.
В случае если Ваш сайт является копией нашего демонстрационного сайта demo.pixlpark.ru и Вы хотите заменить уже имеющуюся карту, например, на странице контактов, то зайдите в панель управления сайтом, откройте раздел CMS «Страницы сайта», найдите страницу «Контакты» и откройте ее для редактирования, затем перейдите в «Расширенные настройки страницы» (см. скриншот ниже) и в поле «Слайдер» вставьте полученный в сервисе Google Карты код карты вместо текущего.
Как Вы могли заметить, в коде карты есть параметры, отвечающие за размеры окна карты: width (ширина) и height (высота), – они показаны стрелками на скриншоте. Вы можете установить оптимальные для Вашего сайта значения (на Ваше личное усмотрение). Значения данных параметров указаны в пикселях (px). Если Вы желаете растянуть карту на всю ширину сайта, то парамерт width вместе с его значением надо просто удалить из кода. На скриншоте показана выделением часть кода, которую надо удалить для установки ширины карты, равной ширине сайта.
Источник статьи: Google справка — Как добавить карту на сайт или в блог.
pixlpark.ru
От автора: приветствую вас, друзья. Из этой небольшой статьи вы узнаете, как вставить карту Гугл на сайт 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 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
1. Вставка карты Google Maps
Для начала давайте создадим html страницу и вставим на нее карту Google Maps. Делать это мы будем с помощью Google Maps API. То есть пойдем продвинутым путем. Надо заметить что у Google есть хорошая документация и инструкция на русском и английском по использованию Google Maps. Так что программисты могут сразу отправиться туда. Если же вы хотите получить понятный пошаговый урок — то оставайтесь.
Теперь я опишу по очереди действия которые необходимо сделать и после приведу код страницы с комментариями. Сперва создаем HTML страницу. Затем:
- На странице создаем элемент <div id=»map»></div> внутри которого у нас будет отображаться карта Google Maps.
- Необходимо стилизовать этот элемент, задать ему высоту и ширину чтобы он был виден на странице.
- Подключаем библиотеку Google Maps Api, чтобы создать карту и управлять ей. Без этой библиотеки карта не заработает.
- Пишем скрипт который создаст и отобразит карту 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.
2.2 Устанавливаем маркер
Место определили. Осталось показать маркер на карте. Внутри функции initMap() добавляем переменную для маркера:
// Создаем маркер на карте var marker = new google.maps.Marker({ // Определяем позицию маркера position: {lat: 55.760186, lng: 37.618711}, // Указываем на какой карте он должен появится. (На странице ведь может быть больше одной карты) map: map, // Пишем название маркера - появится если навести на него курсор и немного подождать title: 'Наш маркер: Большой театр' });Теперь у нас есть карта с маркером
Как добавить событие по клику на карту или маркер в 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"}]}] });Теперь наша карта выглядит вот так:
4. Информационные окна
Карту можно еще улучшить, добавив информационное окно по клику на наш маркер. Документация по ним лежит здесь. Если вкратце, то чтобы добавить инфо окно необходимо:
- Создать само окно и контент внутри него
- Сделать так чтобы оно появлялось по клику на маркер.
Все это происходит внутри функции 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); });
Теперь карта с инфо-окном выглядит следующим образом:
Также можно убирать стандартные элементы управления с карты, включать/выключать нужные и ненужные, и даже создать свои. Описание всего этого вы найдете в документации.
rightblog.ru
Как поделиться картой или адресом
- Откройте Google Карты на компьютере.
- Откройте маршрут, карту или изображение просмотра улиц, которым хотите поделиться.
- В левом верхнем углу экрана нажмите на значок меню .
- Выберите Ссылка/код. Если этого пункта нет в меню, нажмите Ссылка на карту.
- Вы можете сократить ссылку, установив флажок «Короткий URL».
- Скопируйте ссылку и поделитесь ей.
Как встроить на сайт карту или маршрут
Примечание. На встроенной карте могут быть не видны данные о пробках и другая информация.
- Откройте Google Карты.
- Откройте маршрут, карту или изображение просмотра улиц, которое хотите встроить.
- В левом верхнем углу экрана нажмите на значок меню .
- Выберите Ссылка/код.
- Откройте вкладку Встраивание карт.
- Чтобы выбрать размер карты, нажмите на стрелку вниз слева от поля с кодом.
- Скопируйте текст из поля и вставьте его в HTML-код своего сайта или блога.
support.google.com