Перевести адрес в координаты
Геокодирование, используя Google Maps
Дата публикации: 2017-02-22
От автора: многие сайты по своей деятельности направлены на непосредственную работу с пользователями, то есть осуществляют сбор их личной информации, а значит, поддерживают регистрацию; отображают на соответствующих страницах полученную информацию по каждому из них, или позволяют выполнять определенные действия. В качестве примера, можно привести сайт социальной сети. Соответственно, к чему я все это. Согласитесь, что в некоторых ситуациях очень полезно вывести на экран карту с нанесенной на нее меткой – адресом проживания определенного пользователя.
Поэтому в данном уроке мы поговорим о том, как отобразить карту на экран браузера, как отцентрировать ее и установить метку, в соответствии с адресом, который был указан пользователем.
Итак, для отображения карты, конечно же, мы воспользуемся довольно известным сервисом под названием Google Maps , который, скорее всего, Вам уже знаком. Но кратко все же скажу, что Google Maps – это бесплатный картографический сервис, который представляет интерактивные карты и спутниковые снимки практически всего земного шара.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Соответственно разработчики могут использовать их и отображать на своем сайте в виде отдельных блоков. При этом если, в Вашем распоряжении карты практически всего мира, то возникает вопрос, как отцентрировать карту на необходимом месте. Собственно сделать это не сложно, если Вы знаете географические координаты интересующего места на карте, но в нашем случае, пользователи при регистрации будут указывать полный адрес и не координаты. Поэтому указанную строку с адресом, нужно перевести в координаты и только потом можно определить центр карты, отображаемой на экране.
Хотел бы отметить, что процесс преобразования адресов в географические координаты называют геокодированием и данный механизм входит в состав библиотек Google maps. А значит, давайте рассмотрим, как работать с ним.
Заметьте, что перед началом использования сервиса от Google, необходимо получить специальный ключ, который будет использоваться в запросах. По сути – это небольшое разрешение для работы с сервисом, которое помимо всего прочего содержит настройки безопасности, то есть параметры, ограничивающие его использование. Для получения ключа, переходим по следующей ссылке .
Далее, кликаем по кнопке “Получить ключ”.
Ключ привязывается к конкретному проекту, который необходимо создать. Проект – это Ваше приложение в системе Google, которое будет взаимодействовать с API. Поэтому нажимаем по кнопке “Продолжить”. Далее указываем имя нового ключа и кликаем по ссылке “Сохранить”, таким образом, создаем новый ключ приложения.
Обратите внимание что, используя радио-кнопки в параметре “Ограничение для ключа” — Вы можете предотвратить несанкционированное использование созданного ключа. То есть Вы указываете, кто именно может использовать созданный ключ – веб-сайт, IP-адрес, приложения и т.д.
После создания ключа, необходимо активировать интересующее Вас API, то есть подключить его к созданному проекту. Для этого в библиотеке доступных сервисов (ссылка “Библиотека”), необходимо выбрать интересующее API от Google (в нашем случае это Google Maps JavaScript API).
Теперь все готово к работе с картами и для начала, хотел бы привести ссылку на страницу официальной документации по геокодированию Google Maps.
В данном уроке мы будем работать с небольшим тестовым сайтом, который отображает на экран информацию о некоторых пользователях, хранящуюся в соответствующей таблице базы данных.
При этом в блоке справа мы с Вами отобразим карту, о которой говорили выше. Поэтому, первым делом необходимо подключить к текущей странице API JavaScript от Google, используя всем известные, теги script.
