Знакомимся с картами Гугл (google maps)

Сегодня google предлагает такое количество api и инструментов для разработчиков, что уже наверное сами затрудняются придумать что то новое. А моё знакомство с google начиналось с google maps api, азы и вéди которого, я вам сегодня собираюсь преподать.

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

Во-первых, нам потребуется ключ API google maps. Получается он очень просто — на специальной странице регистрации ключа. Я понял так, что ключ просто генерируется для определенного доменного имени и больше ни от чего не зависит. Я их генерирую даже для доменов сайтов, запущенных локально под Denver. Возможно, вам потребуется зарегистрироваться на самом google, что тоже не занимает много времени.

Для домена shra.ru я получил вот такой ключик:

Во-вторых, надо придумать какую то задачу, чтобы было интереснее изучать вопрос. Возьмем задачу из практики. Часто у разработчиков возникает задача вставки карты на сайт компании и добавление логотипа компании на эту карту как маркер.

Итак задача: у нас есть контейнер DIV, где мы хотим видеть карту с логотипом нашей компании. Пусть это будет штаб-квартира Microsoft. Размеры карты — 500 x 400. Офисов у ребят не мало, выберем их офис в Вашингтоне. На сайте майкрософт находим адрес — Civica Office Building 205 108th Ave. NE, Suite 400 Bellevue, WA 98004. Вводим его на сайте https://www.google.ru/maps. Оказывается сидят они вот в этом небольшом уютном домике с улетным названием — Starbucks (см. фото). Пусть при нажатии на логотип компании показывается ещё и эта фотография.

Основным объектом API google, вокруг которого все вертится, является GMap2. Объявим его.

Мы видим, что вся работа с объектами google.maps производится после проверки браузера на совместимость (GBrowserIsCompatible()), а так же нам нужны следующие данные для инициализации объекта map — контейнер, где отображается карта и размеры карты (mapX, mapY). Далее выполняем позиционирование карты и её настройки.

Установим центр карты с нужными координатами (широта, долгота) и выберем масштаб. Где брать значения для широты и долготы? — можно попробовать скататься на место событий — и подсмотреть в GPS навигаторе. Но мы поступим дешевле. Когда вы нашли офис на карте maps.google.ru, то могли обратить внимание на ярлычок над картой в виде звеньев цепи. Этот инструмент позволяет вставить карту на свой сайт (почти то, что нам по идее нужно, но не совсем) — а в коде вставки мы видим кучу параметров, среди которых «ll=47.613353,-122.196529» — это позиция центра отображаемой карты. Воспользуемся этими координатами. Параметр масштаба варьируется от 0 (вид из космоса)  до 19 (видны даже автомобили на дорогах). На самом деле пределы масштаба зависят от выбранного участка и типа карты.

Теперь добавим нужный нам маркер. Для логотипа нужно создать объект GIcon.

Осталось только показывать окошечко с описанием и фотографией, для этого сделаем зацепку на событие onclick маркера (т.е. когда по нему будут кликать — будет показываться окошечко с информацией).

Внутри вызываемого обработчика наш маркер является this. Открываем информационное окошко с комментарием и фоткой.

Рабочий код у нас написан. Осталось все правильно инициализировать и запустить. В итоге у нас должно получиться два файла — map.html и map.js. Полный текст скрипта выглядит так:

В в html включим такие строки:

Контейнер DIV, где отображается карта имеет ID=«map». Вот и готово. Смотрим, что получилось.

Написать комментарий

Мало букафф? Читайте есчо !

Создание кастомного элемента управления на гугл карте

Ноябрь 14, 2018 г.

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

Читать

Геолокация с ipinfo.io

Апрель 11, 2016 г.

Обнаружил ещё один качественный сервис по геолокации. В отличии от базы IPGEOBASE, где собраны российские и украинские ip адреса, данная база определяет ...

Читать

 

Комментарии к «Знакомимся с картами Гугл (google maps)»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий:

Много комментариев в “Знакомимся с картами Гугл (google maps)”

  1. КФК==:

    Спасибо за урок!:)