Знакомимся с картами Гугл (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». Вот и готово. Смотрим, что получилось.

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

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

Кастомизация infoWindow на картах гугл

Январь 25, 2018 г.

Поп-ап на картах гугл, объект google.maps.InfoWindow, привлекателен возможностью вставки в него собственного HTML контента. Но кастомизация внешнего вида ...

Читать

Отключить на yandex карте изменение масштаба колесом прокрутки мыши

Декабрь 21, 2017 г.

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

Читать

 

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

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



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

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

  1. КФК==:

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