Google Maps в каталоге

Опубликовано Опубликовано в рубрике Google Maps API v.3, JavaScript, PHP, Общее

Сегодня мы рассмотрим применение API Google Maps в каталогах адресов, городов и стран, научим карты Google показывать на странице вывода нужный результат без «ручной» вставки жёсткой ссылки на карту. Иными словами, само подключение происходит в шаблоне, а параметры позиционирования точки передаются при загрузке страницы.

Эпопея началась с того, что мне подвернулась ссылка на Google Map в виде подключаемого IFRAME. Несложно было заметить, что в виде GET-параметров там передавались широта и долгота точки. Они находятся в GET-переменных с именами ll и перечисляются через запятую:,. Соответственно, сюда и нужно подать переменные при загрузке страницы. И не стоит забывать про убирание ненужных параметров из ссылки (типа имени города, от которого взята карта с сайта).

Поиграв с этими настройками, я решил копнуть глубже и наткнулся на Google Maps API, которые выпустили в свет свою третью версию. Огромным её плюсом явилось отсутствие объявления API-ключа (читайте — привязки к URL). Её-то я и использовал в реализации своего проекта.

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

Попробуем подключить API на страницу. В том же Drupal это делается прямо при создании новой ноды.

Создадим контейнер, в который будут грузиться карты

Карты будут появляться там при помощи JavaScript.

Дальше пишем скрипт со стороны движка.

Соответственно, вместоинужно поставить имеющиеся широту и долготу. Параметры zoom, center и mapTypeId — это масштаб, координаты условного центра и тип карты соответственно. Переменная karta — это имя карты, которая сгенерируется в итоге.

Также API поддерживает метки, которые вызываются также в js-коде

var metka = new google.maps.Marker({
  position: myLatlng,
  map: karta,
  title:"Здесь живу я!"
});

В параметрах задаются (по порядку): координаты метки, имя карты, на которой метка будет расположена (в моём примере — это та же карта, что и была сгенерирована в вышеуказанном коде) и собственно текст метки, который будет появляться при наведении манипулятора типа «мышь» на метку.

Обязательно добавьте к тегу атрибут onload=»intialize». Иначе карты не будут грузиться!

У карт есть обширная документация, которою я не стану здесь переписывать. С ней можно ознакомиться на официальном сайте карт Google. А полученных знаний хватит для базового подключения красивой «плюшки» для сайта!

Безошибочного кода Вам!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *