GoogleMapsAPIで最初に表示されるズームレベルをパラメータで指定する方法

実現したいこと

GooglemapAPIを利用し、オリジナルの地図をスクロールしたり拡大縮小できるようなページを作っています。
最初に表示されるズームレベルをパラメータで指定するには、どうすれば良いでしょう?

今の所、最初に表示される「位置」はパラメータでの指定が実現できていますが、「ズームレベル」もパラメータで指定したいです。

?lat=84.1&lang=-175.9
のようにパラメータをつけることで、最初に表示される位置を制御することは実現できてます。

ズームレベルも、
?lat=84.1&lang=-175.9&zl=13
のように指定し、最初に表示されるズームレベルを制御することを実現したいですが、可能でしょうか?
試しに80行目の「zoom: 13」を変数にしようとしてもうまくいきませんでした。

コード

html
1<!DOCTYPE html>
2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja-JP">
3<head>
4  <meta charset="utf-8" />
5  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6  <title>スクロールマップ</title>
7  <link rel="stylesheet" type="text/css" href="index.css" />
8  <script type="application/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCBRo1F4ZdttwRPojgEkCUwU7RujeCH7yc&v=3.exp&amp;sensor=false"></script>
9  <script type="application/javascript" src="index.js"></script>
10</head>
11<body>
12   <div id="map_canvas">
13   地図を読み込んでいます。1分以上待っても表示されない場合は JavaScript を有効にしてください。
14 </div>

js
1// URLパラメータ文字列を取得する
2
3/**
4 * Get the URL parameter value
5 *
6 * @param  name {string} パラメータのキー文字列
7 * @return  url {url} 対象のURL文字列（任意）
8 */
9function getParam(name, url) {
10    if (!url) {url = window.location.href; }
11    name = name.replace(/[\[\]]/g, "\\$&");
12    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
13        results = regex.exec(url);
14    if (!results) {return null; }
15    if (!results[2]) {return ''; }
16    return decodeURIComponent(results[2].replace(/\+/g, " "));
17}
18
19// LatLngパラメータを取得する
20var lat = getParam('lat');
21var lng = getParam('lng');
22var south = getParam('south');
23var east = getParam('east');
24
25// パラメータがなければ(84.5292,-175.9337)とする
26if (lat == null) {lat = 84.5292; }
27if (lng == null) {lng = -175.9337; }
28if (south != null) {lat = -1.38221 * (10 ** -6) * (south ** 2) -0.00350628*south +85.051123 -0.00017; }
29if (east != null) {lng = east*0.028856 -179.711 -0.0009; }
30
31// The Original Code is "custom map template using Google Maps API v3".
32//
33google.maps.event.addDomListener(window, "load", function () {
34  var oMapCanvas = document.getElementById("map_canvas");
35
36  // Custom Map Tile Layer
37  var customMapType = new google.maps.ImageMapType({
38    name: "道路",
39    tileSize: new google.maps.Size(1681, 2377),
40    isPng: true,
41    maxZoom: 13, //最大詳細
42    minZoom: 9, //最小広域
43    getTileUrl: function(coordinate, zoom) {
44      var zoom = zoom;
45      var x = Math.floor(coordinate.x); //以前は「coordinate.x >> 0」 0ビットシフトでの32bit整数化だったが、Math.floorで整数化する方法に変更
46      var y = Math.floor(coordinate.y);
47
48console.log("X=" + x + ",Y=" + y);
49
50      if (y>=0){
51      return "../tile_" + zoom + "/Z" + zoom + "S" + y + "E" + x + ".png"
52       .replace("%zoom", zoom.toString())
53       .replace("%x", x.toString())
54       .replace("%y", y.toString());
55      };
56      if (y<0){
57      return "../tile_" + zoom + "/Z" + zoom + "N" + -y + "E" + x + ".png"
58       .replace("%zoom", zoom.toString())
59       .replace("%x", x.toString())
60       .replace("%y", y.toString());
61      };
62
63    }
64  });
65  var map = new google.maps.Map(oMapCanvas, {
66    zoom: 13, //最初に表示したときのズームレベル (13→5万, 12→10万, 11→20万, 10→40万, 9→80万, 8→160万, 7→320万, 6→640万, 5→1280万)
67    center: new google.maps.LatLng(lat,lng), //最初に表示する位置 (以前は固定値だったが、URLのパラメータから取得した値を利用する方法に変更)
68    disableDefaultUI: true,
69    panControl: true,
70    mapTypeId: customMapType.name
71  });
72  map.mapTypes.set(customMapType.name, customMapType);
73
74  //イベントリスナ
75  google.maps.event.addListener(map, 'center_changed', function() {//
76    dispLevel(map.getCenter());//
77  }); //移動した場合
78  google.maps.event.addListener(map, 'zoom_changed', function() {//
79    dispLevel(map.getZoom());//
80  }); //ズームレベルが変化した場合
81
82  //画面中央にマーカーを固定
83    //ターゲットスコープをセット
84    var tgt_marker = new google.maps.Marker({
85      position: {lat: 0, lng: 0},
86      map: map,
87      icon: {
88        url: 'gmap_cross.gif',
89        origin: new google.maps.Point(0, 0), //(アイコンセットから切り出す時に使用、今回は0,0)
90        size: new google.maps.Size(32, 32),  //画像ファイルの大きさ
91        scaledSize: new google.maps.Size(32, 32), //(画像を拡縮表示する時に使用、原寸ならsizeと同じか省略)
92        anchor: new google.maps.Point(16, 16) //中央位置の画像(scaledSizeを基準)
93      },
94      clickable: false, /* クリック不可 */
95      zIndex: 0
96    });
97    //ターゲットスコープ表示
98    tgt_marker.setMap(map);
99    //地図の表示内容が変更されたら、センター座標取得しマーカー座標変更
100    google.maps.event.addListener( map ,'bounds_changed',function(){
101      var pos = map.getCenter();
102      tgt_marker.setPosition(pos);
103    });  
104
105  // Map tile license (移動またはズームレベル変更したらこれに置き換える)
106
107  function dispLevel(level) {
108  var Sc = (0.00350628-Math.sqrt(0.00350628**2+4*1.38221*10**(-6)*(85.051123-map.getCenter().lat())))/(-2*1.38221*10**(-6))-0.5
109  var Ec = (179.711+map.getCenter().lng())/0.028856+0.53
110  var S = Math.round(Sc)
111  var E = Math.round(Ec)
112  var Sd = ('00'+Math.floor(S/10)).slice(-2)
113  var Ed = ('00'+Math.ceil(E/10)).slice(-2)
114  var Ido = Math.round((36-Sc/40)*100 -12)/100
115  var Keido = Math.round(( (map.getCenter().lng()+394.24)/1.6326 + (map.getCenter().lng()+173.94021)*(1-Math.cos(Ido*Math.PI/180))/1.378 )*100 +62)/100
116
117  var NS
118  if (S > 0) {NS = "S" + S};
119  if (S <= 0) {NS = "N" + (-1)*S };
120  var EW
121  if (E >= 0) {EW = "E" + E};
122  if (E < 0) {EW = "W" + (-1)*E };
123  var NSd
124  if (Math.floor(S/10) > 0) {NSd = "S" + ('00'+Math.floor(S/10)).slice(-2) };
125  if (Math.floor(S/10) <= 0) {NSd = "N" + ('00'+ (-1)*Math.floor(S/10)).slice(-2) };
126//表示する百葉図葉に"W10以西"の領域が含まれないのでEWdは不要
127
128//console.log(NS + EW);
129//console.log(NSd);
130
131  document.getElementById("zoomlevel").innerHTML = 
132"<div>地図データ &#169; " + "<a href='/' target='_blank'>想像地図研究所</a>" + 
133"<!--<BR>位置" + map.getCenter() + 
134"--><BR><a href='/Smap/gmap3/JSM/?lat=" + map.getCenter().lat() +"&lng=" + map.getCenter().lng() + "'>この位置の固定リンク</a>" +
135"<BR>北緯" + Ido + ", 東経" + Keido + 
136"<BR>図葉番号:" + NS + "," + EW + "<BR>" + "<a href='/Maps/GIFexp/" + NSd + "E" + Ed + ".HTM' target='expmap'>この場所についての説明を見る</a></div>" +
137"<div id=\"close\" onclick=\"obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none'; obj=document.getElementById('close').style; obj.display=(obj.display=='none')?'block':'none';\"><a style='cursor:pointer; color:#FF00FF;'>[▼この地図の注意事項を表示]</a></div>" +
138"<div id=\"open\" style=\"display:none;clear:both;\">" +
139"<div onclick=\"obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none'; obj=document.getElementById('close').style; obj.display=(obj.display=='inline')?'block':'inline';\"><a style='cursor:pointer; color:#FF00FF;'>[▲注意事項を隠す]</a></div>" +
140"<ol>" +
141"<li>これは架空の土地の地図です。実在の事物とは一切無関係です。</li>" +
142"<li>この地図の図法は<a href='/Maps/Map_projection.HTM' target='_blank'>修正型正弦曲線図法</a>です。</li>" +
143"<li>図葉番号は<b>メッシュの番号</b>です。<span style='color:#FF0000'>緯度経度ではありません</span>が、<br>Sの番号を40で割ったものを36から引くと緯度になります。</li>" +
144"<li>環境により緯度経度・図葉番号・縮尺にズレが生じる場合があります。</li>" +
145"</ol>" +
146"</div>" +
147"<div align='right'><img src ='scale" + map.getZoom() + ".PNG'></div>" ; //1度でもズームや位置を変更するとこちらを表示
148  }
149
150  // Map tile license (最初に表示するもの)
151
152  var Sc = (0.00350628-Math.sqrt(0.00350628**2+4*1.38221*10**(-6)*(85.051123-map.getCenter().lat())))/(-2*1.38221*10**(-6))-0.5
153  var Ec = (179.711+map.getCenter().lng())/0.028856+0.53
154  var S = Math.round(Sc)
155  var E = Math.round(Ec)
156  var Sd = ('00'+Math.floor(S/10)).slice(-2)
157  var Ed = ('00'+Math.ceil(E/10)).slice(-2)
158  var Ido = Math.round((36-Sc/40)*100 -12)/100
159  var Keido = Math.round(( (map.getCenter().lng()+394.24)/1.6326 + (map.getCenter().lng()+173.94021)*(1-Math.cos(Ido*Math.PI/180))/1.378 )*100 +62)/100
160
161  var NS
162  if (S > 0) {NS = "S" + S};
163  if (S <= 0) {NS = "N" + (-1)*S };
164  var EW
165  if (E >= 0) {EW = "E" + E};
166  if (E < 0) {EW = "W" + (-1)*E };
167  var NSd
168  if (Math.floor(S/10) > 0) {NSd = "S" + ('00'+Math.floor(S/10)).slice(-2) };
169  if (Math.floor(S/10) <= 0) {NSd = "N" + ('00'+ (-1)*Math.floor(S/10)).slice(-2) };
170//表示する百葉図葉に"W10以西"の領域が含まれないのでEWdは不要
171
172  var copyrightDiv = document.createElement("div");
173  copyrightDiv.style.fontSize = "10px";
174  copyrightDiv.style.whiteSpace = "nowrap";
175  copyrightDiv.style.padding = "0 6px";
176  copyrightDiv.style.backgroundColor = "rgba(245, 245, 245, 0.70)";
177  var copyrightSpan = document.createElement("span");
178  copyrightSpan.setAttribute("id", "zoomlevel");
179  copyrightSpan.setAttribute("style", "color: #444;");
180  copyrightSpan.innerHTML = 
181"<div>地図データ &#169; " + "<a href='/' target='_blank'>想像地図研究所</a>" + 
182"<!--<BR>位置" + map.getCenter() + 
183"--><BR><a href='/Smap/gmap3/JSM/?lat=" + map.getCenter().lat() +"&lng=" + map.getCenter().lng() + "'>この位置の固定リンク</a>" +
184"<BR>北緯" + Ido + ", 東経" + Keido + 
185"<BR>図葉番号:" + NS + "," + EW + "<BR>" + "<a href='/Maps/GIFexp/" + NSd + "E" + Ed + ".HTM' target='expmap'>この場所についての説明を見る</a></div>" +
186"<div id=\"close\" onclick=\"obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none'; obj=document.getElementById('close').style; obj.display=(obj.display=='none')?'block':'none';\"><a style='cursor:pointer; color:#FF00FF;'>[▼この地図の注意事項を表示]</a></div>" +
187"<div id=\"open\" style=\"display:none;clear:both;\">" +
188"<div onclick=\"obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none'; obj=document.getElementById('close').style; obj.display=(obj.display=='inline')?'block':'inline';\"><a style='cursor:pointer; color:#FF00FF;'>[▲注意事項を隠す]</a></div>" +
189"<ol>" +
190"<li>これは架空の土地の地図です。実在の事物とは一切無関係です。</li>" +
191"<li>この地図の図法は<a href='/Maps/Map_projection.HTM' target='_blank'>修正型正弦曲線図法</a>です。</li>" +
192"<li>図葉番号は<b>メッシュの番号</b>です。<span style='color:#FF0000'>緯度経度ではありません</span>が、<br>Sの番号を40で割ったものを36から引くと緯度になります。</li>" +
193"<li>環境により緯度経度・図葉番号・縮尺にズレが生じる場合があります。</li>" +
194"</ol>" +
195"</div>" +
196"<div align='right'><img src ='scale" + map.getZoom() + ".PNG'></div>" ; //最初はこちらを表示
197  copyrightDiv.appendChild(copyrightSpan);
198  map.controls[google.maps.ControlPosition.RIGHT].push(copyrightDiv); //[google.maps.ControlPosition.BOTTOM_RIGHT] → [google.maps.ControlPosition.RIGHT] に変更
199});

68user

2023/05/31 12:51

lat や lng がパラメータ指定できているのであれば同じようにすればよいだけだと思うんですが、何がうまくいかないですか。うまくいかない状態のソースを提示してください

AbeTakashi

2023/05/31 13:07

> 試しに80行目の「zoom: 13」を変数にしようとしてもうまくいきませんでした変数にしようとした形跡が提示されたソースコードにはないと思うのですが、どのように実装してどのようにうまくいかないのでしょうか？ 68userさんも書かれてますが、現状が分からないとアドバイスが出にくいと思います。質問文は追記や編集が可能ですので、そちらの対応をお願いします。

koridentetsu

2023/05/31 13:55

lat, lngと同様に指定するようにしたら解決いたしました。お騒がせしました。

行動規範の内容に同意します

回答1件

自己解決

このように指定することで解決できました。

js
1// URLパラメータ文字列を取得する
2
3/**
4 * Get the URL parameter value
5 *
6 * @param  name {string} パラメータのキー文字列
7 * @return  url {url} 対象のURL文字列（任意）
8 */
9function getParam(name, url) {
10    if (!url) {url = window.location.href; }
11    name = name.replace(/[\[\]]/g, "\\$&");
12    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
13        results = regex.exec(url);
14    if (!results) {return null; }
15    if (!results[2]) {return ''; }
16    return decodeURIComponent(results[2].replace(/\+/g, " "));
17}
18
19// LatLngパラメータを取得する
20var lat = getParam('lat');
21var lng = getParam('lng');
22var south = getParam('south');
23var east = getParam('east');
24var zl = getParam('zl');
25
26// パラメータがなければ(84.5292,-175.9337)とする
27if (lat == null) {lat = 84.5292; }
28if (lng == null) {lng = -175.9337; }
29if (south != null) {lat = -1.38221 * (10 ** -6) * (south ** 2) -0.00350628*south +85.051123 -0.00017; }
30if (east != null) {lng = east*0.028856 -179.711 -0.0009; }
31
32// パラメータがなければズームレベルは13に
33if (zl == null) {zl = 13}
34{zl = Math.round(zl)} // 四捨五入
35
36if (zl > 13) {zl = 13} //13超なら13に
37if (zl < 9) {zl = 9} //9未満なら9に
38
39// The Original Code is "custom map template using Google Maps API v3".
40//
41
42google.maps.event.addDomListener(window, "load", function () {
43  var oMapCanvas = document.getElementById("map_canvas");
44
45  // Custom Map Tile Layer
46  var customMapType = new google.maps.ImageMapType({
47    name: "道路",
48    tileSize: new google.maps.Size(1681, 2377),
49    isPng: true,
50    maxZoom: 13, //最大詳細
51    minZoom: 9, //最小広域
52    getTileUrl: function(coordinate, zoom) {
53      var zoom = zoom;
54      var x = Math.floor(coordinate.x); //以前は「coordinate.x >> 0」 0ビットシフトでの32bit整数化だったが、Math.floorで整数化する方法に変更
55      var y = Math.floor(coordinate.y);
56
57console.log("X=" + x + ",Y=" + y);
58//Xがマイナスの領域の扱い方:
59//Z=13のとき x=-1 が x=1247 に相当する
60//Z=12のとき x=-1 が x=623 に相当する
61//Z=11のとき x=-1 が x=311 に相当する
62//Z=10のとき x=-1 が x=155 に相当する
63//Z=9のとき x=-1 が x=77 に相当する
64
65
66//画像のファイル名を-1ではなく1247にしておけばマイナス部分も正常に動作する
67//ただし東経とかは変な値になる
68//実験結果、Z=9で延々と東へ進み続けると一周して戻ってきた、このときE0がE12480と表示される
69//Xのマイナス部分のファイル名をWで対応できる方法は検討中
70
71      if (y>=0){
72      return "../tile_" + zoom + "/Z" + zoom + "S" + y + "E" + x + ".png"
73       .replace("%zoom", zoom.toString())
74       .replace("%x", x.toString())
75       .replace("%y", y.toString());
76      };
77      if (y<0){
78      return "../tile_" + zoom + "/Z" + zoom + "N" + -y + "E" + x + ".png"
79       .replace("%zoom", zoom.toString())
80       .replace("%x", x.toString())
81       .replace("%y", y.toString());
82      };
83
84    }
85  });
86  var map = new google.maps.Map(oMapCanvas, {
87    zoom: zl, //最初に表示したときのズームレベル (13→5万, 12→10万, 11→20万, 10→40万, 9→80万, 8→160万, 7→320万, 6→640万, 5→1280万)
88    center: new google.maps.LatLng(lat,lng), //最初に表示する位置 (以前は固定値だったが、URLのパラメータから取得した値を利用する方法に変更)
89    disableDefaultUI: true,
90    panControl: true,
91    mapTypeId: customMapType.name
92  });
93  map.mapTypes.set(customMapType.name, customMapType);
94
95
96
97  //イベントリスナ
98  google.maps.event.addListener(map, 'center_changed', function() {//
99    dispLevel(map.getCenter());//
100  }); //移動した場合
101  google.maps.event.addListener(map, 'zoom_changed', function() {//
102    dispLevel(map.getZoom());//
103  }); //ズームレベルが変化した場合
104
105
106  //画面中央にマーカーを固定
107    //ターゲットスコープをセット
108    var tgt_marker = new google.maps.Marker({
109      position: {lat: 0, lng: 0},
110      map: map,
111      icon: {
112        url: 'gmap_cross.gif',
113        origin: new google.maps.Point(0, 0), //(アイコンセットから切り出す時に使用、今回は0,0)
114        size: new google.maps.Size(32, 32),  //画像ファイルの大きさ
115        scaledSize: new google.maps.Size(32, 32), //(画像を拡縮表示する時に使用、原寸ならsizeと同じか省略)
116        anchor: new google.maps.Point(16, 16) //中央位置の画像(scaledSizeを基準)
117      },
118      clickable: false, /* クリック不可 */
119      zIndex: 0
120    });
121    //ターゲットスコープ表示
122    tgt_marker.setMap(map);
123    //地図の表示内容が変更されたら、センター座標取得しマーカー座標変更
124    google.maps.event.addListener( map ,'bounds_changed',function(){
125      var pos = map.getCenter();
126      tgt_marker.setPosition(pos);
127    });  
128
129
130  // Map tile license (移動またはズームレベル変更したらこれに置き換える)
131
132  function dispLevel(level) {
133  var Sc = (0.00350628-Math.sqrt(0.00350628**2+4*1.38221*10**(-6)*(85.051123-map.getCenter().lat())))/(-2*1.38221*10**(-6))-0.5
134  var Ec = (179.711+map.getCenter().lng())/0.028856+0.53
135  var S = Math.round(Sc)
136  var E = Math.round(Ec)
137  var Sd = ('00'+Math.floor(S/10)).slice(-2)
138  var Ed = ('00'+Math.ceil(E/10)).slice(-2)
139  var Ido = Math.round((36-Sc/40)*100 -12)/100
140  var Keido = Math.round(( (map.getCenter().lng()+394.24)/1.6326 + (map.getCenter().lng()+173.94021)*(1-Math.cos(Ido*Math.PI/180))/1.378 )*100 +62)/100
141
142  var NS
143  if (S > 0) {NS = "S" + S};
144  if (S <= 0) {NS = "N" + (-1)*S };
145  var EW
146  if (E >= 0) {EW = "E" + E};
147  if (E < 0) {EW = "W" + (-1)*E };
148  var NSd
149  if (Math.floor(S/10) > 0) {NSd = "S" + ('00'+Math.floor(S/10)).slice(-2) };
150  if (Math.floor(S/10) <= 0) {NSd = "N" + ('00'+ (-1)*Math.floor(S/10)).slice(-2) };
151//表示する百葉図葉に"W10以西"の領域が含まれないのでEWdは不要
152
153//console.log(NS + EW);
154//console.log(NSd);
155
156  document.getElementById("zoomlevel").innerHTML = 
157"<div>地図データ &#169; " + "<a href='/' target='_blank'>想像地図研究所</a>" + 
158"<!--<BR>位置" + map.getCenter() + 
159"--><BR><a href='/Smap/gmap3/JSM/?lat=" + map.getCenter().lat() +"&lng=" + map.getCenter().lng() + "&zl=" + map.getZoom() + "'>この位置の固定リンク</a>" +
160"<BR>北緯" + Ido + ", 東経" + Keido + 
161"<BR>図葉番号:" + NS + "," + EW + "<BR>" + "<a href='/Maps/GIFexp/" + NSd + "E" + Ed + ".HTM' target='expmap'>この場所についての説明を見る</a></div>" +
162"<div id=\"close\" onclick=\"obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none'; obj=document.getElementById('close').style; obj.display=(obj.display=='none')?'block':'none';\"><a style='cursor:pointer; color:#FF00FF;'>[▼この地図の注意事項を表示]</a></div>" +
163"<div id=\"open\" style=\"display:none;clear:both;\">" +
164"<div onclick=\"obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none'; obj=document.getElementById('close').style; obj.display=(obj.display=='inline')?'block':'inline';\"><a style='cursor:pointer; color:#FF00FF;'>[▲注意事項を隠す]</a></div>" +
165"<ol>" +
166"<li>これは架空の土地の地図です。実在の事物とは一切無関係です。</li>" +
167"<li>この地図の図法は<a href='/Maps/Map_projection.HTM' target='_blank'>修正型正弦曲線図法</a>です。</li>" +
168"<li>図葉番号は<b>メッシュの番号</b>です。<span style='color:#FF0000'>緯度経度ではありません</span>が、<br>Sの番号を40で割ったものを36から引くと緯度になります。</li>" +
169"<li>環境により緯度経度・図葉番号・縮尺にズレが生じる場合があります。</li>" +
170"</ol>" +
171"</div>" +
172"<div align='right'><img src ='scale" + map.getZoom() + ".PNG'></div>" ; //1度でもズームや位置を変更するとこちらを表示
173  }
174
175  // Map tile license (最初に表示するもの)
176
177  var Sc = (0.00350628-Math.sqrt(0.00350628**2+4*1.38221*10**(-6)*(85.051123-map.getCenter().lat())))/(-2*1.38221*10**(-6))-0.5
178  var Ec = (179.711+map.getCenter().lng())/0.028856+0.53
179  var S = Math.round(Sc)
180  var E = Math.round(Ec)
181  var Sd = ('00'+Math.floor(S/10)).slice(-2)
182  var Ed = ('00'+Math.ceil(E/10)).slice(-2)
183  var Ido = Math.round((36-Sc/40)*100 -12)/100
184  var Keido = Math.round(( (map.getCenter().lng()+394.24)/1.6326 + (map.getCenter().lng()+173.94021)*(1-Math.cos(Ido*Math.PI/180))/1.378 )*100 +62)/100
185
186  var NS
187  if (S > 0) {NS = "S" + S};
188  if (S <= 0) {NS = "N" + (-1)*S };
189  var EW
190  if (E >= 0) {EW = "E" + E};
191  if (E < 0) {EW = "W" + (-1)*E };
192  var NSd
193  if (Math.floor(S/10) > 0) {NSd = "S" + ('00'+Math.floor(S/10)).slice(-2) };
194  if (Math.floor(S/10) <= 0) {NSd = "N" + ('00'+ (-1)*Math.floor(S/10)).slice(-2) };
195//表示する百葉図葉に"W10以西"の領域が含まれないのでEWdは不要
196
197  var copyrightDiv = document.createElement("div");
198  copyrightDiv.style.fontSize = "10px";
199  copyrightDiv.style.whiteSpace = "nowrap";
200  copyrightDiv.style.padding = "0 6px";
201  copyrightDiv.style.backgroundColor = "rgba(245, 245, 245, 0.70)";
202  var copyrightSpan = document.createElement("span");
203  copyrightSpan.setAttribute("id", "zoomlevel");
204  copyrightSpan.setAttribute("style", "color: #444;");
205  copyrightSpan.innerHTML = 
206"<div>地図データ &#169; " + "<a href='/' target='_blank'>想像地図研究所</a>" + 
207"<!--<BR>位置" + map.getCenter() + 
208"--><BR><a href='/Smap/gmap3/JSM/?lat=" + map.getCenter().lat() +"&lng=" + map.getCenter().lng() + "&zl=" + map.getZoom() + "'>この位置の固定リンク</a>" +
209"<BR>北緯" + Ido + ", 東経" + Keido + 
210"<BR>図葉番号:" + NS + "," + EW + "<BR>" + "<a href='/Maps/GIFexp/" + NSd + "E" + Ed + ".HTM' target='expmap'>この場所についての説明を見る</a></div>" +
211"<div id=\"close\" onclick=\"obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none'; obj=document.getElementById('close').style; obj.display=(obj.display=='none')?'block':'none';\"><a style='cursor:pointer; color:#FF00FF;'>[▼この地図の注意事項を表示]</a></div>" +
212"<div id=\"open\" style=\"display:none;clear:both;\">" +
213"<div onclick=\"obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none'; obj=document.getElementById('close').style; obj.display=(obj.display=='inline')?'block':'inline';\"><a style='cursor:pointer; color:#FF00FF;'>[▲注意事項を隠す]</a></div>" +
214"<ol>" +
215"<li>これは架空の土地の地図です。実在の事物とは一切無関係です。</li>" +
216"<li>この地図の図法は<a href='/Maps/Map_projection.HTM' target='_blank'>修正型正弦曲線図法</a>です。</li>" +
217"<li>図葉番号は<b>メッシュの番号</b>です。<span style='color:#FF0000'>緯度経度ではありません</span>が、<br>Sの番号を40で割ったものを36から引くと緯度になります。</li>" +
218"<li>環境により緯度経度・図葉番号・縮尺にズレが生じる場合があります。</li>" +
219"</ol>" +
220"</div>" +
221"<div align='right'><img src ='scale" + map.getZoom() + ".PNG'></div>" ; //最初はこちらを表示
222  copyrightDiv.appendChild(copyrightSpan);
223  map.controls[google.maps.ControlPosition.RIGHT].push(copyrightDiv); //[google.maps.ControlPosition.BOTTOM_RIGHT] → [google.maps.ControlPosition.RIGHT] に変更
224});
225