В блоге уже имел место рассказ об использовании на сайте HTML5 GeoLocation API и Maxmind; а совсем недавно на форуме был рассмотрен простенький пример использования Sypex Geo - мы с вами радушно встретили посетителя сайта, угадав его город и выведя соответствующую строчку приветствия. Пойдем сегодня чуть дальше и в небольшом этом уроке покажем на карте Google уже местоположение нашего визитера, ок? - при этом будем работать, конечно, с базой данных именно Sypex Geo.
Используем тот же самый код, что и в предыдущем примере; только лишь уберем строчку приветствия, которое нам теперь не нужно:
echo "Привет, {$city['city']}!";
, вместо нее добавим
extract($city);
(импорт переменных), все это вместе выглядит следующим образом:
<?php
$ip = $_SERVER['REMOTE_ADDR'];
include("SxGeo.php");
$SxGeo = new SxGeo('SxGeoCity.dat');
$city = $SxGeo->get($ip);
extract($city);
?>
Далее попросту скопируем код, приведенный на страничке JavaScript API Google Карт (версия 3), не забыв разместить в верхней его части приведенные строчки кода... нам с вами осталось сделать, собственно, очень немногое. Взгляните, в окончательном итоге получаем следующее:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<?php
$ip = $_SERVER['REMOTE_ADDR'];
include("SxGeo.php");
$SxGeo = new SxGeo('SxGeoCity.dat');
$city = $SxGeo->get($ip);
extract($city);
?>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=KEY_FOR_YOUR_DOMEN&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng("<? echo "$lat\", \"$lon"; ?>"),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:640px; height:480px"></div>
</body>
</html>
Как видите, мы только и сделали, что в строке
src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
ввели key, полученный для нашего домена (иначе не заработает, Google не позволит), а также вместо статических координат
center: new google.maps.LatLng(-34.397, 150.644),
прописали две переменные, заставив таким образом php и js работать сообща:
center: new google.maps.LatLng("<? echo "$lat\", \"$lon"; ?>"),
Откуда взялись переменные $lat и $lon ? Действительно, так сразу и не сообразишь. Но вы все поймете, если на минутку вернетесь назад и в порядке эксперимента попробуете взглянуть в браузере результат выполнения следующего кода:
<?php
$ip = $_SERVER['REMOTE_ADDR'];
include("SxGeo.php");
$SxGeo = new SxGeo('SxGeoCity.dat');
$city = $SxGeo->get($ip);
print_r ($city);
Увидите что-то вроде
Array ( [regid] => 9737 [cc] => 185 [fips] => 66 [lat] => 60.076238 [lon] => 30.121382 [country] => RU [city] => Санкт-Петербург )
Использование функции extract в данном случае вполне безопасно; но, пожалуй, несколько неоправданно... это сделано здесь, так сказать, сугубо в общеобразовательных целях. Пожалуй, будет лучше, если из окончательного варианта кода мы с вами удалим процитированную ниже строчку:
extract($city);
а строчку
center: new google.maps.LatLng("<? echo "$lat\", \"$lon"; ?>"),
изменим следующим образом, обратившись напрямую к переменным массива:
center: new google.maps.LatLng("<?= $city['lat']?>", "<?= $city['lon'] ?>"),
Впрочем, работает и так и эдак.
Дальнейшие действия: создаем в публичной директории сайта отдельный каталог, содержащий всего три файла: SxGeo.php, SxGeoCity.dat и index.php, последний содержит полученный нами в итоге код без каких-либо изменений, разве что размеры карты подредактируйте в стилях (в случае, если что-либо непонятно - велкам на форум, ссылка вверху сообщения). Теперь, если открыть в браузере index.php - вы увидите на карте собственное местонахождение... только не забудьте, повторюсь, испросить у Google кей для вашего домена. Иначе - не увидите ничего, кроме благожелательного напутственного сообщения от Гугля.
-----
Примечание. В Sypex Geo 2.2 от 16 мая 2014 есть ряд критичных изменений; в частности - изменена структура массива; таким образом, последняя из процитированных строчек кода будет выглядеть у нас c вами теперь следующим образом:
center: new google.maps.LatLng("<?= $city['city']['lat']?>", "<?= $city['city']['lon'] ?>"),
Пробуйте. Все остальное без изменений.
