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

Владимир | | HTML, JavaScript, PHP, Web разработка.

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) со следующим кодом.

<?php
$visitorIP = $_SERVER['REMOTE_ADDR'];
$location = json_decode(file_get_contents('http://iploc.mwudka.com/iploc/'.$visitorIP.'/json'));
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html" />
	<meta http-equiv="X-UA-Compatible" content="IE=7"/>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<title>Где я? :-)</title>
	<script src="http://api-maps.yandex.ru/1.0/index.xml?key=your_api_key" 
type="text/javascript"></script>
	<script type="text/javascript">
	window.onload = function() {
		var map;
		map = new YMaps.Map(document.getElementById("mymap"));
		map.setCenter(new YMaps.GeoPoint(<?php echo $location->longitude; ?>, <?php echo $location->latitude; ?>), 13, 
			YMaps.MapType.HYBRID);
		map.addControl(new YMaps.TypeControl());
		map.addControl(new YMaps.Zoom());
		map.addControl(new YMaps.ScaleLine());
		map.enableRuler();
		var text = "<?php echo $location->city; ?>";
		map.openBalloon(new YMaps.GeoPoint(<?php echo $location->longitude; ?>, <?php echo $location->latitude; ?>), text);
	};
    </script>
</head>
 
<body>
    <div id="mymap" style="height:400px; width:600px;"></div>
</body>
</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

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

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

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

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

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

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

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

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

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

Скачать

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

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

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

До встречи!

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

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

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

    • Нет, время не московское, а Киевское. Минус 1 час.

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

    • Нет, время не московское, а Киевское. Минус 1 час.

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

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

    • Точно! Действительно работает.
      Но, честно говоря, догадаться довольно сложно. В справке я об этой возможности ничего не нашел. Хотя сама возможность действительно очень удобная.

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

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

    • Точно! Действительно работает.
      Но, честно говоря, догадаться довольно сложно. В справке я об этой возможности ничего не нашел. Хотя сама возможность действительно очень удобная.

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

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

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

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

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

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

  • Big_Shark

    Спасибо за статью только не понимаю зачем тут сделали через 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);
    }
    }

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

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

      • Андрей Параничев

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

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

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

      • Big_Shark

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

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

  • Big_Shark

    Спасибо за статью только не понимаю зачем тут сделали через 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);
    }
    }

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

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

      • Андрей Параничев

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

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

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

      • Big_Shark

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

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

  • Asdasdasda

    «>alert()

  • Cipa

    Тест. Без обид. Учиться-то надо.

  • Cipa

    ggg