質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

Q&A

0回答

470閲覧

GoogleMapsAPIで最初に表示されるズームレベルをリファラーで指定する方法

koridentetsu

総合スコア27

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

0グッド

0クリップ

投稿2023/03/24 14:34

実現したいこと

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

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

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

ズームレベルに関しても、
?lat=84.1&lang=-175.9&zl=13
のように指定することで最初に表示されるズームレベルを制御することを実現したいですが、可能でしょうか?
試しに「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 もしくは <a href="http://souzoumap.starfree.jp/Maps/Maps.HTM">想像地図をPDF・PNGでみる</a> 15 </div>

js

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2023/03/25 16:14

用語の使い方が間違っていると思われます。 【リファラー(Referrer) | 用語集 | ミツエーリンクス】 https://www.mitsue.co.jp/case/glossary/l_011.html > リファラーとは、アクセスログに記載されている情報のひとつで、当該ファイルを取得する(ブラウザで表示する)直前に閲覧していたページのURLを内容とする情報です。
koridentetsu

2023/03/25 22:34

ありがとうございます。その通りですね。リファラーではなく、パラメーターの間違いでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問