aminamid · December 10, 2014 10:21
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0px; padding: 0px }
      #map { height: 100% }
    </style>

    <script src="http://maps.google.com/maps/api/js?v=3&sensor=false"
        type="text/javascript" charset="UTF-8"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"
        type="text/javascript" charset="UTF-8"></script>

    <script type="text/javascript">
    function init() {

    // gps に対応しているかチェック
    if (! navigator.geolocation) {
        $('#map').text('GPSに対応したブラウザでお試しください');
        return false;
    }

    $('#map').text('GPSデータを取得します...');

    navigator.geolocation.getCurrentPosition(function(pos) {
        // 現在位置にピンをたてる
        var currentPos = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
        var currentMarker = new google.maps.Marker({
            position: currentPos
        });

      var opts = {
        zoom: 17,
        mapTypeId: "GsiMaps", // 地理院地図の英語表記は「GIS Maps」
        center: currentPos
      };
      var map = new google.maps.Map(document.getElementById("map"), opts);

      map.setOptions({
        mapTypeControl: false // 右上の地図タイプ選択を消す
      });

      // 地理院タイルを Overlay する
      // via http://portal.cyberjapan.jp/help/development.html
      map.mapTypes.set("GsiMaps", {
        name:"地理院地図(GSI Maps)",
        tileSize:new google.maps.Size(256,256),
        minZoom:5,
        maxZoom:18,
        getTile:function(tileCoord, zoom, ownerDocument) {
          var img = ownerDocument.createElement("img");
          img.style.width = "256px";
          img.style.height = "256px";
          var x = (tileCoord.x % Math.pow(2, zoom)).toString();
          var y = tileCoord.y.toString();
          img.src = "http://cyberjapandata.gsi.go.jp/xyz/std/" + zoom +  "/" + x + "/" + y + ".png";
          return img;
        }


      });
        currentMarker.setMap(map);

        // 誤差を円で描く
        new google.maps.Circle({
            map: map,
            center: currentPos,
            radius: pos.coords.accuracy, // 単位はメートル
            strokeColor: '#0088ff',
            strokeOpacity: 0.8,
            strokeWeight: 1,
            fillColor: '#0088ff',
            fillOpacity: 0.2
        });


    }, function() {
        // gps 取得失敗
        $('#map').text('GPSデータを取得できませんでした');
        return false;
    });



      console.log("init-maptypes.set");






       // 左下に電子国土ロゴを表示(TODO: 地理院地図の正式なロゴが公開されたら置き換える)
      var logo = document.createElement('DIV');
      logo.style.padding = '3px';
      map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(logo);
      logo.innerHTML = '<a href="http://portal.cyberjapan.jp/portalsite/kiyaku/index.html" target="_blank"><img style="width:32px, height:32px" src="http://cyberjapan.jp/images/icon01.gif" alt="電子国土" /></a>';    }

    </script>
  </head>

  <body onload="init()">
    <div id="map"></div>
  </body>

 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<style type="text/css">
	html { height: 100% }
	body { height: 100%; margin: 0px; padding: 0px }
	#map { height: 100% }
	</style>

	<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"
	type="text/javascript" charset="UTF-8"></script>
	<script src="http://code.jquery.com/jquery-1.11.1.min.js"
	type="text/javascript" charset="UTF-8"></script>

	<script type="text/javascript">
	function init() {

	// gps に対応しているかチェック
	if (! navigator.geolocation) {
	$('#map').text('GPSに対応したブラウザでお試しください');
	return false;
	}

	$('#map').text('GPSデータを取得します...');

	navigator.geolocation.getCurrentPosition(function(pos) {
	// 現在位置にピンをたてる
	var currentPos = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
	var currentMarker = new google.maps.Marker({
	position: currentPos
	});

	var opts = {
	zoom: 17,
	mapTypeId: "GsiMaps", // 地理院地図の英語表記は「GIS Maps」
	center: currentPos
	};
	var map = new google.maps.Map(document.getElementById("map"), opts);

	map.setOptions({
	mapTypeControl: false // 右上の地図タイプ選択を消す
	});

	// 地理院タイルを Overlay する
	// via http://portal.cyberjapan.jp/help/development.html
	map.mapTypes.set("GsiMaps", {
	name:"地理院地図(GSI Maps)",
	tileSize:new google.maps.Size(256,256),
	minZoom:5,
	maxZoom:18,
	getTile:function(tileCoord, zoom, ownerDocument) {
	var img = ownerDocument.createElement("img");
	img.style.width = "256px";
	img.style.height = "256px";
	var x = (tileCoord.x % Math.pow(2, zoom)).toString();
	var y = tileCoord.y.toString();
	img.src = "http://cyberjapandata.gsi.go.jp/xyz/std/" + zoom + "/" + x + "/" + y + ".png";
	return img;
	}


	});
	currentMarker.setMap(map);

	// 誤差を円で描く
	new google.maps.Circle({
	map: map,
	center: currentPos,
	radius: pos.coords.accuracy, // 単位はメートル
	strokeColor: '#0088ff',
	strokeOpacity: 0.8,
	strokeWeight: 1,
	fillColor: '#0088ff',
	fillOpacity: 0.2
	});


	}, function() {
	// gps 取得失敗
	$('#map').text('GPSデータを取得できませんでした');
	return false;
	});



	console.log("init-maptypes.set");






	// 左下に電子国土ロゴを表示(TODO: 地理院地図の正式なロゴが公開されたら置き換える)
	var logo = document.createElement('DIV');
	logo.style.padding = '3px';
	map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(logo);
	logo.innerHTML = '<a href="http://portal.cyberjapan.jp/portalsite/kiyaku/index.html" target="_blank"><img style="width:32px, height:32px" src="http://cyberjapan.jp/images/icon01.gif" alt="電子国土" /></a>'; }

	</script>
	</head>

	<body onload="init()">
	<div id="map"></div>
	</body>

	</html>