Отмечаем место нахождения посетителя на Яндекс.Карте

24 января, 2009
iploc yandex maps

Эта статья о совместном использовании двух web сервисов: IPLoc и Яндекс.Карты.

Прежде всего, разберемся зачем нужны одновременно два сервиса.

С Яндекс.Картами, все просто. Этот сервис позволяет разместить на странице спутниковую или обычную карту. При этом карта будет интерактивной, т.е. посетитель сможет перемещать её, изменять масштаб, тип, измерять расстояния и т.д.

Сервис IPLoc, в свою очередь, позволяет определить географические координаты указанного IP адреса, т.е. широту и долготу. А это как раз те данные, которые нужны чтобы указать точку на Яндекс.Карте.

Примечание. Вместо Яндекс.Карт можно использовать Google Maps, о которых я уже рассказывал. В этот раз я выбрал Яндекс.Карты потому что они содержат более подробные карты с названиями улиц для городов СНГ.

Таким образом, используя оба сервиса одновременно мы можем определить место нахождения посетителя и показать его на карте.

Принцип работы.

1) С помощью IPLoc определяем где находится посетитель.

2) Размещаем на странице Яндекс.Карту.

3) Центрируем карту в соответствии с полученными координатами.

4) Дополнительно можно разместить на карте сообщение (балун) с каким-нибудь текстом, например, названием города.

Получение данных от IPLoc.

Прежде всего нужно сформировать запрос вида
http://iploc.mwudka.com/iploc/ххх.ххх.ххх.ххх/format

Вместо ххх.ххх.ххх.ххх подставляем нужный IP адрес.

Последний сегмент адреса указывает формат в котором вы хотите получить данные.

С точки зрения обработки PHP скриптом, самым удобным является JSON формам. В этом случае можно преобразовать строку с данными в объект PHP с помощью всего одной функции – json_decode.

Т.е. запрос примет вид
http://iploc.mwudka.com/iploc/ххх.ххх.ххх.ххх/json

Теперь пару слов об использовании Яндекс.Карт.

Прежде всего, вам придется зарегистрироваться на Яндексе и получить API-ключ.

Примечание. В отличие от Google Maps получить ключ для localhost’а нельзя, поэтому чтобы локально потестировать сайт создайте виртуальный хост, например, http://mysite.l и получите ключ для него (главное, чтобы имя состояло хотя бы из двух частей, разделенных точкой).
UPD. Тут я ошибся. См. комментарий Андрея Кармацкого.

Переходим к реализации

Создаем PHP скрипт (index.php) со следующим кодом.

  1. <?php
  2. $visitorIP = $_SERVER['REMOTE_ADDR'];
  3. $location = json_decode(file_get_contents('http://iploc.mwudka.com/iploc/'.$visitorIP.'/json'));
  4. ?>
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  6.  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  7. <html xmlns="http://www.w3.org/1999/xhtml">
  8. <head>
  9.     <meta http-equiv="Content-Type" content="text/html" />
  10.     <meta http-equiv="X-UA-Compatible" content="IE=7"/>
  11.     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  12.     <title>Где я? :-)</title>
  13.     <script src="http://api-maps.yandex.ru/1.0/index.xml?key=your_api_key"
  14. type="text/javascript"></script>
  15.     <script type="text/javascript">
  16.     window.onload = function() {
  17.         var map;
  18.         map = new YMaps.Map(document.getElementById("mymap"));
  19.         map.setCenter(new YMaps.GeoPoint(<?php echo $location->longitude; ?>, <?php echo $location->latitude; ?>), 13,
  20.             YMaps.MapType.HYBRID);
  21.         map.addControl(new YMaps.TypeControl());
  22.         map.addControl(new YMaps.Zoom());
  23.         map.addControl(new YMaps.ScaleLine());
  24.         map.enableRuler();
  25.         var text = "<?php echo $location->city; ?>";
  26.         map.openBalloon(new YMaps.GeoPoint(<?php echo $location->longitude; ?>, <?php echo $location->latitude; ?>), text);
  27.     };
  28.     </script>
  29. </head>
  30.  
  31. <body>
  32.     <div id="mymap" style="height:400px; width:600px;"></div>
  33. </body>
  34. </html>

Разберем по порядку работу скрипта.

Строки 2 и 3 – получаем IP адрес посетителя, формируем и отправляем запрос на IPLoc. Функция json_decode преобразует ответ сервиса в объект PHP.

Для справки привожу структуру этого объекта:

object(stdClass)[1]
public 'country_code' => string 'UA' (length=2)
public 'country_code3' => string 'UKR' (length=3)
public 'country_name' => string 'Ukraine' (length=7)
public 'region' => string '13' (length=2)
public 'city' => string 'Kiev' (length=4)
public 'postal_code' => null
public 'latitude' => float 50.4333
public 'longitude' => float 30.5167
public 'area_code' => null
public 'dma_code' => null

Названия свойств говорят сами за себя, поэтому комментировать я их не буду.

После того, как данные получены, создаем страницу. Тут наибольший интерес представляет подключение и настройка карты.

Прежде всего, мы определяем на странице блок в котором будет находится карта. В данном случае это:

  1. <div id="mymap" style="height:400px; width:600px;"></div>

Для вставки карты нужно добавить два тега скрипт. В первом указываем ключ, а во втором – функцию, которая создает и настраивает карту.

Как видите, для работы с картой используется объект YMaps. Он позволяет изменять любые настройки отображения данной карты.

В данном случае для установки центра карты мы использовали данные от IPLoc (строка 19) метод setCenter. И затем добавили несколько элементов управления (строки 21 – 23). Кроме того, включили функцию измерения расстояний (строка 24). В данном примере она, конечно, не нужна, но возможности карты демонстрирует очень хорошо ;)

И завершающим этапом добавили название города на карту (строки 25, 26).

Как видите, минимум кода и вполне работоспособный результат ;)

Скачать

Хотите поэкспериментировать? Качайте архив с этим примером.

Перед экспериментами не забудьте указать свой API-ключ.

Обо всех вопросах, замечаниях, предложениях и пожеланиях пишите в комментариях, они отрыты :)

До встречи!

Интересно почитать.

Живете в Одессе и хотите создать сайт? Сайты в одессе помогут вам решить эту задачу.
Захист інформації – необхідна умова нормальної роботи будь-якого бізнесу цифровий підпис закон

Понравилась статья? Подписывайтесь на продолжение rss link !

Или на мой твиттер twitter link

]]>

Добавьте эту страницу в google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru

]]>

Опубликовано в HTML, JavaScript, PHP, Web разработка Комментарии (18) »

]]>

Комментарии (18)

Вы можете отслеживать обсуждение записи с помощью RSS 2.0 rss link

Вы также можете оставить комментарий, или трекбек с Вашего сайта.

]]>
  1. telonots
    25 января 2009 в 10:51

    а вот вопросик можно? У вас время после поста указано. Это московское? Заранее спасибо!

    Ответить
  2. Андрей Кармацкий
    25 января 2009 в 17:02

    Примечание. В отличие от Google Maps получить ключ для localhost’а нельзя, поэтому чтобы локально потестировать сайт создайте виртуальный хост, например, http://mysite.l и получите ключ для него (главное, чтобы имя состояло хотя бы из двух частей, разделенных точкой).

    Можно. Получите ключик для сайта, на котором планируете использовать API, он будет работать и для localhost (если никаких других рефереров не формируется)

    Ответить
  3. Видео Мэн
    25 января 2009 в 17:19

    вот так и началась эра тотальной слежки

    Ответить
    • Владимир
      25 января 2009 в 19:18

      Если кто-то за вами будет действительно следить, то постарается сделать это так, чтобы вы об этом не узнали ;)
      К тому же существуют способы скрыть свой IP, например, анонимные прокси сервера.

      Ответить
  4. Дум Кат
    25 января 2009 в 21:08

    Мэшап с Яндексом хорошо, но все же многие наши сервисы используют Google, так как он более удобный по поиску и, тем более, в Яндексе не все города есть. Моего города до сих пор нет :(

    Ответить
  5. Big_Shark
    26 января 2009 в 1:39

    Спасибо за статью только не понимаю зачем тут сделали через PHP обращения к IPLoc .
    Я бы обращался с помощью ajax и библиотеки jQuery.
    пример
    function Load(ip)
    {
    $.getJSON('http://iploc.mwudka.com/iploc/'+ip+'/json',{},onAjaxSuccess);
    function onAjaxSuccess(obj)
    {
    map.setCenter(new YMaps.GeoPoint(obj.longitude,obj.latitude, 13,YMaps.MapType.HYBRID);
    map.openBalloon(new YMaps.GeoPoint(obj.longitude,obj.latitude,obj.text);
    }
    }

    Скрипт не тестировался просто привожу для примера.

    Ответить
    • Владимир
      26 января 2009 в 17:13

      Честно говоря, я тоже сначала хотел так сделать, но не получилось. Дело в защите браузеров от XSS атак.
      Я тестировал только на FF3, так он блокирует не только прямые запросы к другому домену (не тому с которого загружена страница), но и попытки обойти это ограничение с помощью iframe.
      Т.е. я пробовал добавить iframe на страницу и загрузить в него данные от iploc. Эта часть работает. Но любые попытки получить данные из этого iframe с помощью JavaScript приводили к срабатыванию системы безопасности.
      Так что решение с помощью PHP оказалось самым простым ;)

      Ответить
      • Андрей Параничев
        26 января 2009 в 20:28

        Все верно, кросс-доменная передача данных запрещена политикой одного источника для XmlHttpRequest и для фреймов. Только вот у меня пример ваш не работает, точнее IPLoc не работает, возвращает ошибку 403.

        Ответить
        • Владимир
          27 января 2009 в 19:37

          Да, с этим сервисом проблемы. На прошлой неделе вроде все нормально работало, сейчас почему-то не работает. Может временные проблемы?

          В любом случае я не знаю аналогов. Конечно, можно купить базу данных, но за нее придется платить. Правда надежность будет выше ;)

      • Big_Shark
        29 января 2009 в 8:06

        жаль что не получилось.
        Хотя думаю вариант есть но он окажется намного сложнее чем сделали вы через PHP.

        Ответить
        • Владимир
          29 января 2009 в 21:39

          Может быть. Но главное, что разработчики браузеров стараются блокировать XSS, а значит если мы и найдем сейчас решение, то в следующей версии браузера оно может перестать работать ;)

]]>

Оставить комментарий

* - обязательные для заполнения поля

]]>