Скрипт карты гугл на сайт

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

Обзор урока

o Google Maps API
o Получаем координаты
o Встраиваем карту в ваш сайт
o Добавляем маркеры
o Настройка маркеров
o Добавляем информационные блоки

Google Maps API

Google Maps API позволяет встраивать карты прямо в страницы вашего сайта. Для чего вам потребуется немного JavaScript, а для создания красивого оформления — немного CSS. Только что выпущена Google Maps API версия 3 и мы именно ее возьмем за основу. Вы можете ознакомиться со всей документацией на Google Labs, и пока будете просматривать информацию обязательно получите ключ к API Карт.

Получаем координаты

Полагаю, что вы, врядли, знаете точные координаты расположения вашей фирмы, поэтому объясню вам очень простой способ для их получения, который предлагает Google. Зная точный адрес вы можете вписать его в URL-адрес следующим образом:

Вписав его подобным образом в адресную строку, вы получите следующие данные:

Это координаты Центрального управления компании Apple в Купертино

Первое число – это константа, и 200 означает, что операция прошла успешно. Второе число указывает на сколько точно указывается адрес, в данном случае 8 говорит о довольно высокой точности. Два последних значения – это широта и долгота, именно они нам и нужны.

Встраиваем карту в ваш сайт

Теперь давайте, наконец, добавим карту на сайт! Откройте любимый HTML -редактор и создайте стандартный HTML-файл с кодировкой UTF-8. Сперва создадим центр проекции (точку фотографирования) и укажем в нашем HTML-файле путь на JavaScript, находящийся на сайте Google Code. Заключите следующие строчки между тегами и :

В коде после ссылки идет свойство sensor=false. Так как нам не нужны сенсоры, GPS и нет необходимости определять чье-либо местонахождение.

Под кодом, который мы только что вставили, введите следующее:

и закрываем функцию, перейдем к созданию тела страницы:

Таким образом мы заставляем наш сайт при загрузке активизировать функцию initialize() и задаем в теге

Добавляем маркеры

Пора добавить некоторую разметку. Давайте начнем с создания стандартного маркера:

Итак, разберемся с кодом.

Сначала мы задали переменную companyPos, с помощью которой устанавливают расположение маркера. Далее, мы создали сам маркер посредством переменной companyMarker. Вы можете конечно вписать еще ряд параметров, а с теми, которые мы уже указали, я думаю все ясно.

Хотя того, что мы уже сделали, вполне достаточно и ваш клиент легко вас найдет, мы можем нашу карту слегка приукрасить. Создайте в Photoshop изображение размером 100×50 пикселей подобное этому:

Далее создадим у нашего изображения тень

Теперь заменяем стандартный маркер этими изображениями, соответственно изменяем и код:

Данный код тоже довольно простой. Переменная companyLogo указывает на название нашего логотипа, задает его размер, путь к нему и координаты расположения кончика логотипа (то есть то место, в котором наш логотип касается карты). Затем те же самые параметры настраиваем и для изображения тени с помощью переменной companyShadow. И наконец посредством переменной companyMarker мы выводим изображение и его тень на карту.

Читайте также  Программа передач для спутникового телевидения

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

Если вам нужно расположить несколько маркеров очень близко друг к другу, воспользуйтесь z-индексом. Маркер с самым высоким значением z-индекса будут всегда сверху:

Параметр z-index позволяет вам выбрать какой маркер будет поверх всех

Добавляем информационные блоки

Вы можете ввести описание компании с помощью информационного блока, появляющегося при нажатии на логотип. Благодаря Google Maps API это сделать проще простого.

Щелчок на логотип вашей компании будет активизировать информационный блок.

Вставьте данный код сразу под переменной map:

И этот код тоже необыкновенно прост. Вот здесь есть простор для ваших идей, так как в информационном блоке можно расположить не только название и пару тройку параграфов, но и изображения. А чтобы описание появлялось по щелчку на логотип, впишите этот код сразу после закрывающей >функции initialize():

Приукрасьте немного ваш блок, добавив стилей в ваш stylesheet-файл:

Вот и все! Теперь вы сможете встроить Google карту в любой проект.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.stiern.com
Перевел: Максим Шкурупий
Урок создан: 28 Октября 2009
Просмотров: 98085
Правила перепечатки

5 последних уроков рубрики "Разное"

Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг – это будущее Ваших сайтов

Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

Разработка веб-сайтов с помощью онлайн платформы Wrike

Создание вебсайта – процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.

20 ресурсов для прототипирования

Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.

Топ 10 бесплатных хостингов

Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.

Быстрая заметка: массовый UPDATE в MySQL

Ни для кого не секрет как в MySQL реализовать массовый INSERT, а вот с UPDATE-ом могут возникнуть сложности. Чтобы не прибегать к манипуляциям события ON_DUPLICATE можно воспользоваться специальной конструкцией CASE … WHEN … THEN.

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

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

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

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

Читайте также  Почему не пингуется внешний ip

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

    На странице создаем элемент

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читайте также  Разделить на слоги слово потом

Готовая карта

Готовую получившуюся карту и код можно посмотреть ниже или на codepen.

See the Pen Google Map by Yurij (@rightblog) on CodePen.18493

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

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

Работа с API гугл карт.

Карта гугл на сайт

Вставить гугл карту на сайт по сложности так же как и вставить счётчик для сайта.

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

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

Да, Google Maps работают на языке JavaScript. Но чтобы вставить простую карту на сайт не нужно знать JavaScript, но нужно хоть немного понимать разметку HTML.

Я не буду ставить куски простых примеров кода для вставки карты. Вы их можете найти в документации Google Maps, где есть множество решений и примеров простейшего кода с объяснениями.

Вот хочу поставить обучающее видео по работе с API гугл карт.

В видео очень хорошо показано как работать с API гугл карт и реализован пример как создать гугл-карту для группы адресов (меток).

Я надеюсь что вы поймёте и оцените видео.

Ссылки на сервисы и документацию из видео:

Данный код – это готовый рабочий исходник для карты с несколькими метками. Остаётся только включить API, заменить для markers координаты и содержимое всплывающей инфо-подсказки, если нужно – по шаблону добавить новых, а так же прописать свой ключ в самом низу кода вместо YOUR_API_KEY

Параметры в картах

Масштаб для zoom:

  • 1 – мир
  • 5 – континент
  • 10 – Город
  • 15 – Улицы
  • 20 – Здания

Панорама улицы

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

Панорама создаётся для карты с одной координатой. Для панорам нужно включить API с названием – Google Street View Image API

Демо и код панорамы можно увидеть чуть ниже в "гибридной" карте.

Соединяем карту и панораму – гибрид

Мой любимый приём – это гибридная карта состоящая из трёх слоёв:

  1. карта с меткой;
  2. панорама;
  3. кнопка переключения между картой и панорамой.

Подходит он только для одинарной метки. Конечно это только если для координат есть панорама.

Смысл гибрида в том, что всё это всунуто в один див и через CSS свойство z-index распределено по слоям. Кнопка переключатель через JavaScript переключает с карты на панораму и обратно.

Внешне выглядит это так:

Для удобства код я разделил на составные части.

JavaScript – части кода отмечены комментариями

Статическое изображение карты

Чтобы использовать статические изображения карты, нужно включить API с названием Google Static Maps API

Чтобы вставить карту в формате статического изображения, нужно в HTML вставить как обычно вставить тег img, в котором прописать путь с атрибутами для карты:

В коде нужно вставить API-ключ и заменить название и координаты.

Так же можно установить размеры изображения и цвет маркера.

Обратите внимание, что в названиях городов состоящих из двух и более слов вместо пробелов используется знак +

Ссылка на основную публикацию
Adblock detector