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

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

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

Инициализация карты google после изменения размеров контейнера карты

Февраль 2, 2018 г.

Столкнулся с данной проблемой в своей работе. Опишу более подробно. Объект Гугл карты, при изменении размеров контейнера, в котором рендерится карта, не актуализирует внутренние размеры поля, от которых зависит центровка. К примеру, при уменьшении ...

Читать

Конструктор схемы проезда на Яндекс

Август 31, 2012 г.

Типовые задачи решаются все проще и проще. Когда то  я рассказывал как вставить карту со схемой проезда, используя api google.maps. С тех пор прошло довольно много времени. Теперь я расскажу как сделать примерно тоже самое только проще и с помощью конструктора ...

Читать

 

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

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



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

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

  1. КФК==:

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