【JavaScript】IPアドレスを基に地図上の位置を表示【ソース公開】

var YourIPAddress = "";

function SendGetIPAddressCmd() { //【確実にIPアドレスを得るために２か所のサービスを呼ぶ】
   SendGetCmd("http://jsonip.com/",         "GetIPAddressData"); //【JSON形式】{"ip":"xxx.xxx.xxx.xxx","about":"/about"}
   SendGetCmd("http://jsonip.appspot.com/", "GetIPAddressData"); //【JSON形式】{"ip": "xxx.xxx.xxx.xxx", "address":"xxx.xxx.xxx.xxx"}

   function SendGetCmd(url, cb) {
      var number = new Date().getTime();      //【イメージ・リフレッシュ用】
      var IPTag = document.createElement("script");
      IPTag.charset = "utf-8";
      IPTag.type = "text/javascript";
      IPTag.src = url + "?dummy=" + number + "&callback=" + cb;
      document.body.appendChild(IPTag);
   }
}

function GetIPAddressData(data) {
   if(YourIPAddress == "") {   //【上記２つのIPアドレスのうち先着の方のIPアドレスで国や地理座標を参照】
      YourIPAddress = data.ip; //【先着のipアドレスを保存】
      document.getElementById("UserInfo").innerHTML = "<font face='Times New Roman' color='red' size='3'>"
                                                    + "【JavaScriptパラサイト型クラウドの実験】あなたのIPアドレスは" + data.ip + "です。"
                                                    + "あなたの概略位置が左下の世界地図上に表示されます。</font><br>";
      SendIPinfoDB(data.ip);          //【iPinfoDB】⇒【Google Map】
      CreateGeoMapLocation(data.ip);  //【Geo Map Location】
   }
}

function CreateGeoMapLocation(ip) {
   var MapURL = "http://geomaplookup.net/?ip=" + ip;
   //【IPアドレスに基づいて世界地図上の位置を求め表示する】
   //【divのstyleのmargin, overflowとともに設定して地図の表示位置を調整】
   var base = document.getElementById("GeoMap");
   base.innerHTML = "";
   var obj=document.createElement("iframe");
   obj.setAttribute("border", "0");
   obj.setAttribute("frameborder", "0");
   obj.setAttribute("border", "0");
   obj.width = "655px";  // "437px";
   obj.height = "700px"; // "400px";
   obj.style.margin = "-250px 0px 0px -200px";
   obj.style.overflow = "hidden";
   obj.src = MapURL;
   base.appendChild(obj);
}

function SendIPinfoDB(ip) {
   var APIkey = "0fba88ae781cde9accb23781c6f49259afcc618ff62017f395ab97c8faa75fc1"; //【iPinfoDBのAPI Key】neo-tech-lab.co.uk
   var number = new Date().getTime();      //【イメージ・リフレッシュ用】
   var URL = "http://api.ipinfodb.com/v3/ip-city/?key=" + APIkey + "&ip=" + ip + "&format=json";
   var IPTag = document.createElement("script");
   IPTag.charset = "utf-8";
   IPTag.type = "text/javascript";
   IPTag.src = URL + "&callback=" + "loadGoogleMap" + "&dummy=" + number;
   document.body.appendChild(IPTag);
}

// Google Map Viewer JavaScript
function loadGoogleMap(location) {
   var msg = "<font size='2'>IP Address :<b>" + location.ipAddress + "</b><br>"
           + "Latitude : " + location.latitude + ", "
           + "Longitude : " + location.longitude + "<br>"
           + "City : " + location.cityName + "<br>"
           + "Region : " + location.regionName + "<br>"
           + "Country : " + location.countryName +"</font>";
   var myLatlng = new google.maps.LatLng(location.latitude, location.longitude);
   var mapOptions = {
      zoom: 6,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.HYBRID
   }
   var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
   var marker = new google.maps.Marker({
       position: myLatlng,
       map: map,
       title: 'MyAddress'
   });
   var infowindow = new google.maps.InfoWindow({
              map: map,
              position: myLatlng,
              content: msg
            });
   map.setCenter(myLatlng);
}