ksasao/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Map Viewer</title>
    <link rel="stylesheet" href="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7.3/leaflet.css" />

    <!-- reference to Leaflet JavaScript -->
    <script src="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7.3/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <script>
      // URLを更新
      function updateUrl(){
        lat = document.getElementById('lat_input').value;
        lng = document.getElementById('lng_input').value;
        zoom = document.getElementById('zoom_input').value;
        comment = document.getElementById('comment_input').value
        window.location.href = "/?p=@" + lat + "," + lng + "," + zoom + "z&t=" + comment;
      }
      // URL引数を取得
      function getUrlParameter(name) {
          var regexp = new RegExp('[?&]' + name + '=([^&#]*)', 'i');
          var output = regexp.exec(window.location.href);
          return output ? decodeURIComponent(output[1]) : null;
      }
      // フォームの値を更新
      function setForm(lat,lng,zoom,comment){
        document.getElementById('lat_input').value = lat;
        document.getElementById('lng_input').value = lng;
        document.getElementById('zoom_input').value = zoom;
        document.getElementById('comment_input').value = comment;
      }
    </script>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
      .custom .leaflet-popup-tip,
      .custom .leaflet-popup-content-wrapper {
          background: #ffffff;
          color: #503020;
          font-size: 250%;
      }
      #map-input{
        position: absolute;
        left: 0; top: 0;
        width: 100%; height: 100vh;
        background: rgba(100, 100, 100, .8);
        z-index: 2147483647;
        display: none;
      }
      </style>
  </head>
  <body>
    <div class="map-main" id="map" style="width: 100%; height: 1000px"></div>
    <div id="map-input" style="width: 100%; height: 2.2em; line-height: 2em">
      <input type="text" id="comment_input" value="Hello!" style="width:300px;"/>
      <input type="hidden" id="lat_input" />
      <input type="hidden" id="lng_input" />
      <input type="hidden" id="zoom_input" />
      <input type="submit" value="update" onClick="updateUrl()" />
    </div>
    <script type="text/javascript">
      // 地図を全画面表示(初回ロード時, リサイズ時)
      $(window).on('load resize', function() {
        $('.map-main').outerHeight($(window).height());
      });

      // URLのパース
      var defaultUrl = "/?p=@35.681307,139.767015,17z&t=Tokyo%20Sta.";
      var str = getUrlParameter('p');
      if(str === null){
        window.location.href = defaultUrl;
      }
      var arr = str.split('@')[1];
      var arr = arr.split(',');
      var lat = parseFloat(arr[0]);
      var lng = parseFloat(arr[1]);
      var zoom = parseFloat(arr[2]);
      var text = getUrlParameter('t');
      if (!lat || !lng || !zoom || lat < -90 || lat > 90 || lng < -180 || lng > 180) {
        window.location.href = defaultUrl;
      }
      setForm(lat,lng,zoom,text);

      // 入力画面の表示・非表示
      var edit = getUrlParameter('edit');
      var editmode = false; // editmode は下のほうのマーカーの移動でも参照する
      if(edit){
        editmode = true;
      }
      if(editmode){ // CSSでは 'display: none' に設定されていることを期待
        $('#map-input').css('display','inline');
      }

      //緯度,経度,ズームの表示設定
      var map = L.map('map',{
        maxZoom: 18,
        minZoom: 6,
        zoomControl: false
      });
      new L.Control.Zoom({ position: 'bottomleft' }).addTo(map);
      map.setView([lat, lng], zoom);

      // OpenStreetMap から地図画像を読み込む
      L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '
      }).addTo(map);

      // ポップアップの表示
      var popup = L.popup();
      marker = L.marker([lat, lng],{}).addTo(map);
      var customOptions =
      {
        'maxWidth': '500',
        'className' : 'custom'
      }
      marker.bindPopup(text,customOptions).openPopup();

      // マップの移動
      map.on('move', function(e) {
        var pos = map.getCenter();
        if(editmode){
          marker.setLatLng(pos);
        }
        var zoom = map.getZoom();
        var lat = pos.lat.toFixed(6);
        var lng =  pos.lng.toFixed(6);
        document.getElementById('lat_input').value = lat;
        document.getElementById('lng_input').value = lng;
        document.getElementById('zoom_input').value = zoom;
      });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title>Map Viewer</title>
	<link rel="stylesheet" href="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7.3/leaflet.css" />

	<!-- reference to Leaflet JavaScript -->
	<script src="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7.3/leaflet.js"></script>
	<script src="https://code.jquery.com/jquery.min.js"></script>
	<script>
	// URLを更新
	function updateUrl(){
	lat = document.getElementById('lat_input').value;
	lng = document.getElementById('lng_input').value;
	zoom = document.getElementById('zoom_input').value;
	comment = document.getElementById('comment_input').value
	window.location.href = "/?p=@" + lat + "," + lng + "," + zoom + "z&t=" + comment;
	}
	// URL引数を取得
	function getUrlParameter(name) {
	var regexp = new RegExp('[?&]' + name + '=([^&#]*)', 'i');
	var output = regexp.exec(window.location.href);
	return output ? decodeURIComponent(output[1]) : null;
	}
	// フォームの値を更新
	function setForm(lat,lng,zoom,comment){
	document.getElementById('lat_input').value = lat;
	document.getElementById('lng_input').value = lng;
	document.getElementById('zoom_input').value = zoom;
	document.getElementById('comment_input').value = comment;
	}
	</script>
	<style>
	body {
	margin: 0;
	overflow: hidden;
	}
	.custom .leaflet-popup-tip,
	.custom .leaflet-popup-content-wrapper {
	background: #ffffff;
	color: #503020;
	font-size: 250%;
	}
	#map-input{
	position: absolute;
	left: 0; top: 0;
	width: 100%; height: 100vh;
	background: rgba(100, 100, 100, .8);
	z-index: 2147483647;
	display: none;
	}
	</style>
	</head>
	<body>
	<div class="map-main" id="map" style="width: 100%; height: 1000px"></div>
	<div id="map-input" style="width: 100%; height: 2.2em; line-height: 2em">
	<input type="text" id="comment_input" value="Hello!" style="width:300px;"/>
	<input type="hidden" id="lat_input" />
	<input type="hidden" id="lng_input" />
	<input type="hidden" id="zoom_input" />
	<input type="submit" value="update" onClick="updateUrl()" />
	</div>
	<script type="text/javascript">
	// 地図を全画面表示(初回ロード時, リサイズ時)
	$(window).on('load resize', function() {
	$('.map-main').outerHeight($(window).height());
	});

	// URLのパース
	var defaultUrl = "/?p=@35.681307,139.767015,17z&t=Tokyo%20Sta.";
	var str = getUrlParameter('p');
	if(str === null){
	window.location.href = defaultUrl;
	}
	var arr = str.split('@')[1];
	var arr = arr.split(',');
	var lat = parseFloat(arr[0]);
	var lng = parseFloat(arr[1]);
	var zoom = parseFloat(arr[2]);
	var text = getUrlParameter('t');
	if (!lat \|\| !lng \|\| !zoom \|\| lat < -90 \|\| lat > 90 \|\| lng < -180 \|\| lng > 180) {
	window.location.href = defaultUrl;
	}
	setForm(lat,lng,zoom,text);

	// 入力画面の表示・非表示
	var edit = getUrlParameter('edit');
	var editmode = false; // editmode は下のほうのマーカーの移動でも参照する
	if(edit){
	editmode = true;
	}
	if(editmode){ // CSSでは 'display: none' に設定されていることを期待
	$('#map-input').css('display','inline');
	}

	//緯度,経度,ズームの表示設定
	var map = L.map('map',{
	maxZoom: 18,
	minZoom: 6,
	zoomControl: false
	});
	new L.Control.Zoom({ position: 'bottomleft' }).addTo(map);
	map.setView([lat, lng], zoom);

	// OpenStreetMap から地図画像を読み込む
	L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
	maxZoom: 18,
	attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '
	}).addTo(map);

	// ポップアップの表示
	var popup = L.popup();
	marker = L.marker([lat, lng],{}).addTo(map);
	var customOptions =
	{
	'maxWidth': '500',
	'className' : 'custom'
	}
	marker.bindPopup(text,customOptions).openPopup();

	// マップの移動
	map.on('move', function(e) {
	var pos = map.getCenter();
	if(editmode){
	marker.setLatLng(pos);
	}
	var zoom = map.getZoom();
	var lat = pos.lat.toFixed(6);
	var lng = pos.lng.toFixed(6);
	document.getElementById('lat_input').value = lat;
	document.getElementById('lng_input').value = lng;
	document.getElementById('zoom_input').value = zoom;
	});
	</script>
	</body>
	</html>