search

mrAkito / SolutionDev

0 stars 0 forks source link

Maps Static API #8

Open Shun-neko-mikan opened 9 months ago

Shun-neko-mikan commented 9 months ago

params

地域パラメータ

center（マーカーが存在しない場合は必須）

このパラメータは、カンマで区切った {緯度,経度} のペア（例: 40.714728,-73.998672）または文字列の住所（例: city Hall, new york, ny）で、地表上の一意の場所を示します。詳細については、ロケーションを参照

zoom（マーカーが存在しない場合は必須）

地図のズームレベルを定義している

詳細

マップパラメータ

size（必須）

地図画像の長方形のサイズを定義します。このパラメータは、{horizontal_value}x{vertical_value} という形式の文字列を受け取ります。たとえば、500x400 は幅 500 ピクセル、高さ 400 ピクセルの地図を定義しています。
このパラメータは scale パラメータの影響を受けます。最終的な出力サイズは、サイズとスケールの値の積になります。

scale（省略可）

返されるピクセルの数に影響します。
scale=2 は、同じ対象範囲と詳細レベルを保ちながら、scale=1 の 2 倍のピクセルを返します（つまり、地図のコンテンツは変化しません）。これは、高解像度ディスプレイ向けの開発を行う場合に便利です。 デフォルト値は 1 です。指定できる値は 1 と 2 です。

format（省略可）

結果の画像の形式を定義します。
Maps Static API では、デフォルトで PNG 画像が作成されます。GIF、JPEG、PNG など、いくつかの形式を使用できます。
詳細

maptype(省略可)

作成する地図のタイプを定義します。指定できる maptype 値は、roadmap、satellite、hybrid、terrain など
Maps Static API のマップタイプ

language（省略可）

地図タイルのラベルの表示に使用する言語を定義

region（省略可）

無視

特徴パラメータ

map_id

マップ ID を使用する

markers

markers パラメータを追加することで、スタイルの異なるマーカーを追加できます。地図にマーカーを使用する場合、center パラメータと zoom パラメータ（通常は必須）を指定する必要はありません。 Maps Static API のマーカー

path

Maps Static API のパス

visible

マーカーやその他のインジケーターを表示せずに、地図上に表示し続ける必要がある場所を 1 つ以上指定します

style

スタイル付き地図

鍵パラメータと著名パラメータ

key（必須）

Google Cloud コンソールでアプリケーションの API 使用状況をモニタリングできます。また、必要に応じて Google からアプリケーションについて連絡を受けることもできます。詳しくは、Maps Static API で API キーを使用するをご覧ください。

Shun-neko-mikan commented 9 months ago

Golangを用いたMaps Static APIの検証

ソースコード

func GetGoogleAPI(c echo.Context) error {
    endpoint := "https://maps.googleapis.com/maps/api/staticmap"

    params := "?center=Tokyo&zoom=13&size=600x300&key=YOUR_KEY"
    resp, err := http.Get(endpoint + params)
    if err != nil {
        panic(err)
    }
    defer resp.Body.Close()
    outFile, err := os.Create("map.png")
    io.Copy(outFile, resp.Body)
    return c.String(http.StatusOK, "OK")
}

ソースコード解説

kawai188 commented 9 months ago

まだ検証とかはしてないけどこれでJPEGとか指定すれば画像として取得出来る？

スタートガイドより https://developers.google.com/maps/documentation/maps-static/start?hl=ja#scale_values


以下コード
`  https://maps.googleapis.com/maps/api/staticmap?center=40.714728,-73.998672&format=gif&zoom=14&size=400x400&key=YOUR_API_KEY&signature=YOUR_SIGNATURE

  https://maps.googleapis.com/maps/api/staticmap?center=40.714728,-73.998672&format=png&&zoom=14&size=400x400&key=YOUR_API_KEY&signature=YOUR_SIGNATURE`

スクリーンショット 2023-12-06 160920

kawai188 commented 9 months ago

報告 このURLでJPEG画像取れました（実際は空白なし、見やすいように段分け） 表記ゆれなのか順番が違ったりすると、たまにエラーが起きるが詳細不明（自分のミスの可能性もあるが時間切れで検証断念）

https://maps.googleapis.com/maps/api/staticmap?　 共通＆必須 center=40.714728,-73.998672　　　　　　　　　　　座標指定 &format=jpg　　　　　　　　　　　　　　　　　　ここでjpeg指定 &zoom=12　　　　　　　　　　　　　　　　　　　ズームレベル（１５で大体通りなどが分かる） &key=（自分のAPI）　　　　　　　　　　　　　　 API &size=400x400 画像サイズの指定

以下元コード https://maps.googleapis.com/maps/api/staticmap?center=40.714728,-73.998672&format=jpg&zoom=15&key=AIzaSyChaY9PeXWSnfphvmLqg6R_LROOb-d32uE&size=400x400

kawai188 commented 9 months ago

今回の参考サイト https://www.single-life.tokyo/google-maps-static-api%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%80%81%E5%9C%B0%E5%9B%B3%E7%94%BB%E5%83%8F%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/#Google_Maps_Static_API-4

kawai188 commented 9 months ago

HTML（CSS、Js含む）


<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:80%;
      }
      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 sUrl = "https://maps.googleapis.com/maps/api/staticmap?";
         sUrl = sUrl + "center=" + centerLatLng.lat() + "," + centerLatLng.lng() + "&zoom=" + nZoom + "&size=" + nWidth + "x" + nHeight + "&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 />
   URL：<a id="lnkGoogleMap" href="#" target=_blank></a>
</body>
</html>
kawai188 commented 9 months ago

CSS部分(大きさ指定など)


   {# css WEB上のスタイル指定　#}
   <style type="text/css">
      #map_canvas {
         width: 100%;
         height:80%;
      }

      html,
      body {
         height: 100%;
         margin: 0;
         padding: 0;
      }
   </style>
kawai188 commented 9 months ago

js部分 intMap

 <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();
         });
      }

MapUrl


      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 sUrl = "https://maps.googleapis.com/maps/api/staticmap?";
         sUrl = sUrl + "center=" + centerLatLng.lat() + "," + centerLatLng.lng() + "&zoom=" + nZoom + "&size=" + nWidth + "x" + nHeight + "&key=" + sYourApiKey;
         var googleLink = document.getElementById('lnkGoogleMap');
         googleLink.innerHTML = sUrl;
         googleLink.setAttribute("href",sUrl);
      }
   </script>
</head>