アクセスしてきた場所をグーグルマップ上に表示する
説明
ユーザーがアクセスしてきた場所をグーグルマップ上に表示するには、ユーザーがどこからアクセスしてきたかを調べる必要があります。これは以下のサイトにあるIP Address Geolocation API - JSONを使います。
http://www.nitinh.com/2009/04/ip-address-geolocation-javascript-api-json/
これはアクセスしてきた場所をIPアドレスとして渡すと、その場所を緯度経度などの情報を含めて返すサービスです。以下のサンプルではSSIを使ってIPアドレスをプログラム内に埋め込み、URLパラメータとして渡しています。
jQueryを使えばJSONPを手軽に扱うことができるのでjQueryの命令を使って緯度経度を取得しグーグルマップ上にマーカーを表示します。
サンプルプログラム
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Google Map Sample (グーグルマップサンプル)</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA" type="text/javascript"></script>
<script type="text/javascript"><!--
$(function () {
map = new GMap2(document.getElementById("gmap"));
map.setCenter(new GLatLng(37,136), 9,G_NORMAL_MAP);
map.addControl(new GLargeMapControl());
$.getScript("http://www.nitinh.com/ip_query.php?ip=<!--#echo var="REMOTE_ADDR" -->&callback=setMapPoint");
});
function setMapPoint(data){
var gpObj = new GLatLng(data.Latitude, data.Longitude);
map.addOverlay(new GMarker(gpObj));
map.setCenter(gpObj);
}
// --></script>
</head>
<body>
<h1>グーグルマップ上にアクセスしてきた人の場所を表示する</h1>
<div id="gmap" style="width:800px;height:480px"></div>
</body>
</html>