Googleマップ API

Google Maps Static APIを使って、地図画像にマーカーを設定する方法

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

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;
      var marker;
      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);
         marker = new google.maps.Marker({
            position: myLatlng,
            label:'1',
            draggable:true,
            map: map,
         });
         map.addListener('bounds_changed', function(event) {
            setStaticMapUrl();
         });
         map.addListener('center_changed', function(event) {
            setStaticMapUrl();
         });
         marker.addListener('dragend', 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 sMkLabel = document.getElementById('mkLabel').value;
         var nScale = document.getElementById('scale').options[document.getElementById('scale').selectedIndex].value;
         var sMkSize = document.getElementById('mkSize').options[document.getElementById('mkSize').selectedIndex].value;
         var MarkerPosition = marker.getPosition();
         var sUrl = "https://maps.googleapis.com/maps/api/staticmap?";
         var nColorSelectIndex = document.getElementById('mkColorSelect').selectedIndex;
         var sColorText = "";
         if ( nColorSelectIndex > 0 )  {
               document.getElementById('mkHexColor').disabled = true;
               sColorText = document.getElementById('mkColorSelect').options[nColorSelectIndex].value;
         } else {
               document.getElementById('mkHexColor').disabled = false;
               sColorText = document.getElementById('mkHexColor').value;
         }
         marker.setLabel(sMkLabel);
         var sMarkerParameter = "size:" + sMkSize + "|color:" + sColorText + "|label:" + marker.getLabel() + "|" + MarkerPosition.lat() + "," + MarkerPosition.lng();

         if ( document.getElementById('ignoreCenter').checked ) {
            sUrl = sUrl + "&size=" + nWidth + "x" + nHeight + "&scale=" + nScale + "&markers=" + encodeURI(sMarkerParameter) + "&key=" + sYourApiKey;
         } else {
            sUrl = sUrl + "center=" + centerLatLng.lat() + "," + centerLatLng.lng() + "&zoom=" + nZoom + "&size=" + nWidth + "x" + nHeight + "&scale=" + nScale + "&markers=" + encodeURI(sMarkerParameter) + "&key=" + sYourApiKey;
         }
         var googleLink = document.getElementById('lnkGoogleMap');
         googleLink.innerHTML = sUrl;
         googleLink.setAttribute("href",sUrl);
      }
   </script>
</head>
<body>
   <div id="map_canvas"></div>
   <br />
   <input type="checkbox" id="ignoreCenter" onchange="setStaticMapUrl();" ><label for="ignoreCenter">地図の中心とズームレベルを無視する</label><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 />
   マーカーラベル：<input type="text" id="mkLabel"  value="1" maxlength="1"  placeholder="0-9,A-Zで入力してください"  onchange="setStaticMapUrl();" /><br />
   マーカーサイズ：<select id="mkSize"  onchange="setStaticMapUrl();" style="width:100px"><option value="normal">normal</option><option value="mid">mid</option><option value="small">small</option><option value="tiny">tiny</option></select><br />
   マーカーの色：<input type="text" id="mkHexColor"  value="0xFF0000" maxlength="8"  placeholder="0xFFFFFF のように指定してください"  onchange="setStaticMapUrl();" /> 
                  <select id="mkColorSelect"  onchange="setStaticMapUrl();" style="width:100px">
                     <option value=""></option><option value="black">black</option><option value="brown">brown</option><option value="green">green</option><option value="purple">purple</option>
                     <option value="yellow">yellow</option><option value="blue">blue</option><option value="gray">gray</option><option value="orange">orange</option>
                     <option value="red">red</option><option value="white">white</option>
                  </select><br />
   URL：<a id="lnkGoogleMap" href="#" target=_blank></a>
</body>
</html>

デモ

Maps Static API

Feature parameters

「Feature pameters」の一つに『markers』があります。

パラメータ説明
markers出力する地図に設定したいマーカーの情報を設定できます。複数のマーカーを設定することも可能です。
markersを設定すると必須パラメータの「center」と「zoom」を省略することができます。
その場合、markersで指定した位置を中心とした地図が出力されることになります。
サンプルでは『地図の中心とズームレベルを無視する』をチェックすると「center」と「zoom」を省略できます。

それでは、markersにはどのようにプロパティ設定していくのでしょうか。それを見ていきます。

パラメータ説明
sizeマーカーのサイズになります。
指定できるのは以下の文字列になります。
normal：通常サイズ
mid：中サイズ
small：小サイズ
tiny：極小サイズ
colorマーカーの色の指定です。
指定するには24ビットのカラー指定（例：0xFF0000）か、以下の色の文字列になります。
black：黒色
brown：褐色
green：緑色
purple：紫色
yellow：黄色
blue：青色
gray：灰色
orange：オレンジ色
red：赤色
white：白色
labelマーカーに指定できるラベルです。
指摘できるのは大文字英字（A～Z）か、数字（0～9）の36文字となります。
(位置1)緯度と経度をカンマで区切って指定します。
「（緯度）,（経度）」形式
(位置2)同じスタイルのマーカーを二つ以上指定したい場合には、続けて、「（緯度）,（経度）」を指定してください。

以上のパラメータをパイプ（|）区切りで指定してください。

例）「size:mid|color:blue|label:A|35.0001,136.0002|35.0002,136.0003」

この値をパラメータ「markers」にしてしてください。

if ( document.getElementById('ignoreCenter').checked ) {
   sUrl = sUrl + "&size=" + nWidth + "x" + nHeight + "&scale=" + nScale + "&markers=" + encodeURI(sMarkerParameter) + "&key=" + sYourApiKey;
} else {
   sUrl = sUrl + "center=" + centerLatLng.lat() + "," + centerLatLng.lng() + "&zoom=" + nZoom + "&size=" + nWidth + "x" + nHeight + "&scale=" + nScale + "&markers=" + encodeURI(sMarkerParameter) + "&key=" + sYourApiKey;
}

ちなみに出力されるURLにパイプ（|）がなく、代わりに、「%7C」となっているのは、URLエンコードしているためです。ソースコードでは「encodeURL」でその処理を行っています。これがなくても動作するかもしれませんが、正しい処理としては、記号はエンコードすべきですね。よって、サンプルソースでは「encodeURI」を利用しています。

ご参考

関連ページ