От автора: многие сайты по своей деятельности направлены на непосредственную работу с пользователями, то есть осуществляют сбор их личной информации, а значит, поддерживают регистрацию; отображают на соответствующих страницах полученную информацию по каждому из них, или позволяют выполнять определенные действия. В качестве примера, можно привести сайт социальной сети. Соответственно, к чему я все это. Согласитесь, что в некоторых ситуациях очень полезно вывести на экран карту с нанесенной на нее меткой – адресом проживания определенного пользователя.
Поэтому в данном уроке мы поговорим о том, как отобразить карту на экран браузера, как отцентрировать ее и установить метку, в соответствии с адресом, который был указан пользователем.
Итак, для отображения карты, конечно же, мы воспользуемся довольно известным сервисом под названием Google Maps, который, скорее всего, Вам уже знаком. Но кратко все же скажу, что Google Maps – это бесплатный картографический сервис, который представляет интерактивные карты и спутниковые снимки практически всего земного шара.
Соответственно разработчики могут использовать их и отображать на своем сайте в виде отдельных блоков. При этом если, в Вашем распоряжении карты практически всего мира, то возникает вопрос, как отцентрировать карту на необходимом месте. Собственно сделать это не сложно, если Вы знаете географические координаты интересующего места на карте, но в нашем случае, пользователи при регистрации будут указывать полный адрес и не координаты. Поэтому указанную строку с адресом, нужно перевести в координаты и только потом можно определить центр карты, отображаемой на экране.
Хотел бы отметить, что процесс преобразования адресов в географические координаты называют геокодированием и данный механизм входит в состав библиотек Google maps. А значит, давайте рассмотрим, как работать с ним.
Заметьте, что перед началом использования сервиса от Google, необходимо получить специальный ключ, который будет использоваться в запросах. По сути – это небольшое разрешение для работы с сервисом, которое помимо всего прочего содержит настройки безопасности, то есть параметры, ограничивающие его использование. Для получения ключа, переходим по следующей ссылке.
Далее, кликаем по кнопке “Получить ключ”.
Ключ привязывается к конкретному проекту, который необходимо создать. Проект – это Ваше приложение в системе Google, которое будет взаимодействовать с API. Поэтому нажимаем по кнопке “Продолжить”. Далее указываем имя нового ключа и кликаем по ссылке “Сохранить”, таким образом, создаем новый ключ приложения.
Обратите внимание что, используя радио-кнопки в параметре “Ограничение для ключа” — Вы можете предотвратить несанкционированное использование созданного ключа. То есть Вы указываете, кто именно может использовать созданный ключ – веб-сайт, IP-адрес, приложения и т.д.
После создания ключа, необходимо активировать интересующее Вас API, то есть подключить его к созданному проекту. Для этого в библиотеке доступных сервисов (ссылка “Библиотека”), необходимо выбрать интересующее API от Google (в нашем случае это Google Maps JavaScript API).
Теперь все готово к работе с картами и для начала, хотел бы привести ссылку на страницу официальной документации по геокодированию Google Maps.
В данном уроке мы будем работать с небольшим тестовым сайтом, который отображает на экран информацию о некоторых пользователях, хранящуюся в соответствующей таблице базы данных.
При этом в блоке справа мы с Вами отобразим карту, о которой говорили выше. Поэтому, первым делом необходимо подключить к текущей странице API JavaScript от Google, используя всем известные, теги script.
1 |
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyDIsmDeJkfwTQJb0dZN-rFA1iJenf084aM"></script> |
Формируя значение атрибута src, не забудьте в качестве GET параметра key, указать недавно сгенерированный ключ. Далее, опишем функцию, которая будет вызываться на исполнение, после полной загрузки интересующей страницы.
1 2 3 4 5 |
var map; var geo; function init() { } |
Переменные, объявленные перед функцией – map и geo, необходимы для хранения объектов созданной карты и механизма геокодирования соответственно. В коде созданной функции, для начала, создадим карту сайта, используя следующий код:
1 2 3 4 5 |
var opt = { zoom:15 } map = new google.maps.Map(document.getElementById("map_canvas"),opt); |
Создавая объект, в качестве первого аргумента необходимо указать объект типа Element, в который будет помещена будущая карта и который, можно получить, осуществив выборку необходимого блока в дереве DOM. В качестве второго аргумента – передается в виде объекта, набор параметров – настроек отображения.
При этом мы воспользуемся всего одним параметром, который задает коэффициент масштабирования карты. Правда, пока еще мы никакого результата не увидим, так как не был передан центр карты.
Как было сказано выше, теперь необходимо преобразовать полный адрес пользователя, в соответствующие географические координаты — для отображения карты. И для этого необходимо отправить запрос к API Google по следующему адресу: maps.googleapis.com/maps/api/geocode/output?parameters
GET-параметр output, может принимать одно из двух значений и отвечает за формат возвращаемого ответа от сервиса:
json – определяет вывод данных в формате JOSN строки;
xml – определяет вывод информации в формате XML.
Помимо этого в запросе обязательно необходимо передать полный адрес пользователя, который нужно преобразовать в координаты, в формате, определяемом почтовой службой (полный список доступных передаваемых параметров, приведен в документации).
Хотел бы отметить, что самостоятельно мы с Вами отправлять запрос для геокодирования не будем, так как к тестовому сайту подключено API Google и по большому счету все уже сделано за нас – нужно только обратиться к соответствующему инструменту.
Далее создадим объект геокодера, который далее мы используем для получения географических координат.
1 |
geo = new google.maps.Geocoder(); |
Следующим этапом, мы создадим переменную, в которой будет храниться точный адрес пользователя.
1 |
var address = "<?php echo $user['address'];?>+<?php echo $user['city'];?>,+<?php echo $user['state'];?>,+<?php echo $user['country'];?>"; |
В переменной $user, содержится в виде массива информация, выбранная из базы данных по определенному пользователю. Теперь, давайте, преобразуем адрес в координаты и отобразим карту на экране.
1 2 3 4 5 6 7 8 9 10 11 12 |
geo.geocode({'address' : address}, function (results,status) { if(status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map:map, position:results[0].geometry.location }); } else { alert('Not valid address'); } }); |
Как Вы видите, первым делом мы обращаемся к объекту геокодера и вызываем на исполнение метод geocode(), который выполнит интересующее нас преобразование. В качестве аргументов, передается интересующий адрес, в виде свойства объекта и функция, которая будет вызвана на исполнение после ответа от сервера. Данная функция принимает два параметра – массив с результатами работы results и статус работы механизма геокодирования. При этом если в качестве статуса возвращается строка “OK” (при этом значение “OK”, так же содержится и в свойстве google.maps.GeocoderStatus.OK), значит, процесс геокодирования завершен успешно и были найдены подходящие координаты.
Далее, определяем центр карты, используя метод setCenter(), который в качестве единственного аргумента, в виде объекта принимает координаты широты и долготы. Замете, что данные координаты располагаются в элементе location, многомерного массива results.
После нахождения центра карты, необходимо разместить в нем метку, что бы точно указать интересующее местоположение. Для этого обратимся к объекту Marker и в качестве параметров укажем позицию маркера, которая соответствует центру карты и объект карты, на которую он будет нанесен.
После этого сохраняем изменения и посмотрим, что у нас получилось:
Вот собственно и все о чем я хотел поговорить в данном уроке. При этом мы с Вами рассмотрели только основы использования сервиса Google Maps и непосредственно геокодирования. Поэтому если данная информация Вас заинтересовала, продолжайте самостоятельно изучать данную тему, используя официальную документацию.
На этом данный урок завершен. Всего Вам доброго и удачного кодирования!!!
Комментарии (2)