このサンプルは、Google Maps v3にクライアント(訪問者)が住んでいる場所をデフォルトで表示します。サンプルが表示されるとGoogle Maps上に、あなたが住んでいる場所(ipアドレスから取得)にマーカーを表示します。マーカーをクリックすると情報ウィンドウに「住所」、「緯度/経度」、「IPアドレス」を表示します。
$.getJSON('http://jsonip.appspot.com?callback=?', function (data) {
var ip = data.ip;
var url = 'http://ipinfodb.com/ip_query.php?ip={ip}&output=json&callback=?';
url = url.replace('{ip}', ip);
$.getJSON(url, function (data) {
var ip = data.Ip; // 180.2.18.153
var city = data.City; // Kawaguchi
var regionName = data.RegionName; // Saitama
var contryName = data.CountryName; // Japan
var lat = data.Latitude;
var lng = data.Longitude;
var timeZone = data.Timezone;
var latlng = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));
var options = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($("#canvas")[0], options);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'Your Default Location!'
});
var content = city + ' ' + regionName + ' ' + contryName + '<br />'
+ lat + ', ' + lng + '<br />'
+ ip;
var infowindow = new google.maps.InfoWindow({
content: content,
size: new google.maps.Size(50, 50)
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
}); // end of $.getJSON
}); // end of $.getJSON