Googleマップ API

Google Maps Static APIを使って、地図画像を取得する方法（その２）

2021年6月27日 by single コメントはまだありません

前回「Google Maps Static APIを使って、地図画像を取得する方法」で、Maps Static APIの初歩的な方法を紹介しましたが、もう少し、いろいろなパラメータを紹介していこうと思います。

なお、Google Maps関連の記事についてはこちらにまとめてありますので、ご覧ください。

Google Maps Static APIを使って、地図画像を取得する方法

サンプル


APIキー：
高さ：
横幅：
スケール：
フォーマット：
マップタイプ：
言語：
地域：
URL：

APIキーを入力し、リンクを教えてください。すると、新しく開かれたウインドウでは、言語や地域の設定を除いた表示されている地図と同じ地図画像を取得することができます。

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
   <title>Sample Map</title>
   <script defer
       src="https://maps.googleapis.com/maps/api/js?key=(APIキー)&callback=initMap" >
   </script>
   <style type="text/css">
      #map_canvas {
         width: 100%;
         height:70%;
      }
      html,
      body {
         height: 100%;
         margin: 0;
         padding: 0;
      }
   </style>
   <script type="text/javascript">
      var map;
      function initMap() {
         var myLatlng = new google.maps.LatLng(35.68517826190777,139.7528236934712);
         var mapOptions = {
           zoom: 15,
           center: myLatlng
         }
         map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

         map.addListener('bounds_changed', function(event) {
            setStaticMapUrl();
         });
         map.addListener('center_changed', function(event) {
            setStaticMapUrl();
         });
      }
      function setStaticMapUrl() {
         var centerLatLng = map.getCenter();
         var nZoom = map.getZoom();
         var sYourApiKey = document.getElementById('apikey').value;
         var nHeight = document.getElementById('mpHeight').value;
         var nWidth = document.getElementById('mpWidth').value;
         var nScale = document.getElementById('scale').options[document.getElementById('scale').selectedIndex].value;
         var sFormat = document.getElementById('format').options[document.getElementById('format').selectedIndex].value;
         var sMapType = document.getElementById('maptype').options[document.getElementById('maptype').selectedIndex].value;
         var sLangId = document.getElementById('language').value;
         var sRegion = document.getElementById('region').value;
         map.setMapTypeId(sMapType);
         var sUrl = "https://maps.googleapis.com/maps/api/staticmap?";
         sUrl = sUrl + "center=" + centerLatLng.lat() + "," + centerLatLng.lng() + "&zoom=" + nZoom + "&size=" + nWidth + "x" + nHeight + "&scale=" + nScale + "&format=" + sFormat + "&maptype=" + sMapType + "&language=" + sLangId + "&region=" + sRegion + "&key=" + sYourApiKey;
         var googleLink = document.getElementById('lnkGoogleMap');
         googleLink.innerHTML = sUrl;
         googleLink.setAttribute("href",sUrl);
      }
   </script>
</head>
<body>
   <div id="map_canvas"></div>
   <br />
   APIキー：<input type="text" id="apikey" value="" placeholder="あなたのAPIキーを入力してください" onchange="setStaticMapUrl();" /><br />
   高さ：<input type="text" id="mpHeight" value="640" placeholder="高さ"  onchange="setStaticMapUrl();" /><br />
   横幅：<input type="text" id="mpWidth"  value="640" placeholder="横幅"  onchange="setStaticMapUrl();"/><br />
   スケール：<select id="scale"  onchange="setStaticMapUrl();" style="width:100px"><option value="1">1</option><option value="2">2</option></select><br />
   フォーマット：<select id="format" onchange="setStaticMapUrl();" style="width:100px"><option value="png">png</option><option value="png8">png8</option><option value="png32">png32</option><option value="gif">gif</option><option value="jpg">jpg</option><option value="jpg-baseline">jpg-baseline</option></select><br />
   マップタイプ：<select id="maptype"  onchange="setStaticMapUrl();" style="width:100px"><option value="roadmap">roadmap</option><option value="satellite">satellite</option><option value="terrain">terrain</option><option value="hybrid">hybrid</option></select><br />
   言語：<input type="text" id="language" value="ja" placeholder="言語コード" onchange="setStaticMapUrl();" /><br />
   地域：<input type="text" id="region" value="jp"   placeholder="２文字のトップドメイン" onchange="setStaticMapUrl();" /><br />
   URL：<a id="lnkGoogleMap" href="#" target=_blank></a>
</body>
</html>

デモ

Maps Static API

Map parameters

すべてのパラメータは任意で指定しなくても、動作します。

パラメータ説明
scale1か2で指定します。
2で指定するとsizeで指定したピクセルの2倍の解像度の画像を取得できます。
format出力される画像のフォーマットを指定できます。デフォルトは「png」です
指定できるのは以下の通りです。
png：8ビットPNG形式
png8：8ビットPNG形式
png32：32ビットPNG形式
gif：GIF形式
jpg：JPEGプログレッシブ圧縮形式
jpg-baseline：JPEGベースライン圧縮形式
maptype地図のタイプを指定できます。デフォルトは「roadmap」（道路地図）になります。
roadmap：道路地図
satellite：衛星地図
hybrid：道路地図と衛星地図の混成
terrain：地形地図
language表示言語。ただし、サポートしている言語のみのようです。
日本語の場合は「ja」、英語の場合は「en」です。
region各国の政治的な立場に従った地図表示をしてくれます。
指定するのは、２文字の地域コード（ccTLD（国別トップレベルドメイン））の値を指定するそうです。
指定した値によって出力される地図の違いは次に説明します。

regionパラメータの違い

regionで指定するパラメータによって何が変わるのか、最初はわからなかったので、変えて試してみて、ようやくわかりました。

例えば、台湾周辺の地図を日本（JP）と中国（CN）で出力してみます。

  • 日本（JP）
  • 中国（CN）

違い分かりますか？中国（CN）で出力すると石垣島と台湾の間に境界線が見えます。つまり中国の立場からすると、台湾は中国の一部だと読み取れます。

次に竹島を見てみましょう。立場は日本（JP）と韓国（KR）となります。

  • 日本（JP）
  • 韓国（KR）

日本では「竹島」と表記されますが、韓国では「独島」と表示されることがわかります。

グーグルはこのように政治的な微妙な立場も考慮してくれるモードがあるようですね。

地図って政治的なコンテンツなんですね！って気づかされます。

ご参考

関連ページ