タグ: Google Map

２０１４年にGoogleマップ（その１）を掲載してからの課題として
　　複数マーカーを表示し、最後に地図の中心を指定して終了としたかった

２０１７年に

１．情報Windowと地図の中心（2014年）

　３年余り掛かって、分からなかったことがやっと分かった
　　　　キーワードは「disableAutoPan」

　　（１）情報ウィンドウの表示
　　　　地図上に情報を表示するための吹き出しのような小さなウィンドウを表示
　　　　　　テキストだけではなくリンクや画像などを表示することも可能

　　　　地図上にマーカーを配置し、そのポイントに関する情報を
　　　　　　情報ウィンドウに表示する

　　（２）情報ウィンドウの表示位置を指定する
　　　　InfoWindowOptionsオブジェクトのプロパティーを使って細かく指定する
　　　　　　pixelOffsetで情報ウィンドウの先端までの
　　　　　　ピクセル単位でのオフセット値をセットする

　　（３）地図の中心位置を指定する
　　　　複数のマーカーを表示した後にsetCenterでセンターの位置を指定する
　　　　　　全く有効にならない（要するにオプション設定の効き目が無い）

２．中心点の設定方法（2017年）

　中心位置の設定に戸惑う
　　　　狭い地域の地図だと、マーカーは固まって表示されるので
　　　　　　自動的に中心位置が決まっとしても違和感は無い
　　　　広域に渡ってマーカーを配置した場合
　　　　　　自動で中心位置を決めるのではなく、意識的に中心位置を決めたい　　この解決方法が分からずに３年が過ぎてしまった

　　（４）disableAutoPanの存在に気づく
　　　　情報ウィンドウを開くときの地図の自動移動を無効にするプロパティー
　　　　　　省略時はウィンドウ全体が表示されるように地図が移動する
　　　　　　　　※自動的に地図が移動して中止位置が定まらない

　　（５）地図位置の自動調整を無効にする
　　　　disableAutoPanプロパティに「true」を指定する
　　　　　　全マーカーの定義にdisableAutoPanプロパティを適用する

　　　　これで地図の中心点は自動で移動しなくなる

　　（６）setCenterで中心位置を指定する
　　　　これで中心位置が指定可能になる

　　（７）マーカー複数の場合の未解決事項
　　　　全てのマーカーの中心を表示することになるのだが
　　　　　　マップの大きさの基準点が私には不明なため

　　　　全てのマーカーがセットされたマップを
　　　　　　ある基準点から指定された大きさのマップを表示する
　　　　　　そうすると中心点なのだがマップの大きさが足りない

　　　　対策・・・この対策は必要なかったと、後で分かる
　　　　　　全てのマーカーが表示されるだけの大きさを事前に指定しておく

３．新しいインタフェース（2025年）

　今年の４月に「Google Map」を使ってみると、動かない（投稿記事参照）

　（８）新しいインタフェースに合わせる
　　　どこがどう変わったかが、一向に分からない
　　　　　有料会員かメーカーの講習会にでも参加しないとダメかと
　　　　　ここで最新技術の「Gemini』にお伺いを立てる
　　　　　即、具体的にプログラムソースが提示された、が
　　　　　理解して、修正に手間取る
　　　多少時間が掛かったが、４月中に完成しリリースする

　（９）７月末に「中心位置が狂う」バグに気づく
　　　近年、これにずっと悩まされてきた、ここにきてまた顕在化する
　　　原因が分からず、対応が取れない
　　　　　今度も「Gemini」に問い合わせる
　　　　　バグの原因と対策が即時に返ってくる
　　　　　　　情報ウィンドウをあらかじめ開いてマーカー設定している
　　　　　　　中心位置はウィンドウを開くたびに再設定される、これが原因
　　　　　　　全部のマーカーを設定し、最後に中心位置を設定する
　　　理解できて、対応済み

原則としてGoogle Cloud Platform（GCP）を使用して説明する
　　ログインしたサイトの構成は当記事の記述順と合致していない
　　時々ページを見失った時は、GCP内の検索を使ってページを探してください

１．API キーの取得

　・Google Cloud Platform ConsoleからGCPにログインする
　　　事前に地図作成用のGoogleアカウントを取得してておく
　　　さらに認証用の情報としてクレジットカードを用意する
　　　　　原則有料、使用量が少なければゼロ円で請求される
　　　GCPに取得済みのアカウントでログインする

　・GCPに入手したアカウントで登録を行う
　　　登録アカウントの種類を問われたら「個人」を指定する
　　　支払い方法を問われたら「クレジットカード」を利用にする
　　　　　GCPの使用は従量制の有料、月末精算となっている
　　　　　使用量が制限内であれば、金額０円の請求書が月末に届く
　　　　　　　＊制限内容については後段で記述する

・プロジェクトを作成する
　　　「プロジェクトの選択」をクリック
　　　「新しいプロジェクト」をクリック
　　　名称をセットし、「作成」をクリックして登録する

 　　　　  　　  　　

　・Maps JavaScript APIを有効にする
　　　「ようこそ」画面に入る（先頭画面に戻ると分かりやすい）
　　　クイックアクセス部分の「APIとサービス」をクリック
　　　「APIとサービスを有効にする」をクリック
　　　「APIライブラリーへようこそ」画面の「Maps JavaScript API」をクリック
　　　APIの利用が有効なことを確認する
　　　　　           　　  

　・APIキーの作成
　　　「APIとサービス」画面の「認証情報」をクリック
　　　「認証情報」画面で
　　　　　新規に作成の場合・・・「認証情報作成」をクリック
　　　　　　　※今回は作成済みのキーを確認する

　・APIキーの使用に制限を設定する
　　　APIキーの作成が確認できたら、続けてAPIキーの使用に制限を設ける
　　　　　外部にキー情報が洩れると悪意のあるユーザに利用される恐れがある

　　　「認証情報」画面の「APIキー１」をクリック（複数あれば選択する）
　　　「APIキーを編集」画面でキーの制限を行う
　　　　　アプリケーションの制限
　　　　　　　HTTPリファラー（ウェブサイト）・・HTTPリファラーによる制限
　　　　　 　　IPアドレス（ウェブサーバー）・・IPアドレスによる制限
　　　　　　　Androidアプリ・・パッケージ名＆フィンガープリントによる制限
　　　　　　　iOSアプリ・・iOSハンドル識別子による制限
　　　　　ウェブサイトの制限
　　　　　　　「HTTPリファラー」を選択した場合に指定する
　　　　　　　　　指定しないと、全てのサイトからAPIキーが使用できる
　　　　　APIの制限
　　　　　　　「キーを制限しない」を選択する
　　　　　　　　　制限しないと、任意のAPIを呼び出すことが可能になる

２．Maps JavaScript API の読み込み

　作成したAPIキーをHTMLファイルに組み込みパラメータとして含める
　　　「YOUR_API_KEY」の部分を作成したAPIキーで置き換える

<script async defer src="https://maps.googleapis.com/maps/api/js?
key=YOUR_API_KEY&callback=initMap" type="text/javascript">
</script>

３．地図の表示

　JavaScriptコードで地図を初期化し、表示する基本的な方法が示されています

４．マーカーの追加

　地図上にマーカーを配置する方法、基本的なマーカーの追加から、カスタムアイコンの使用まで解説されています

５．使用量の管理と制限

　予期しない費用に気付けるよう、
　　　ある程度のクレジットを消費した時点でアラートを示す設定を施す

　・予算を設定する
　　　「ようこそ」画面に入る（先頭画面に戻ると分かりやすい）
　　　「課金」をクリック
　　　「予算とアラート」をクリック、続けて「予算を作成」をクリック
　　　「予算作成」の画面で（設定内容は任意）
　　　　　範囲として、名称・期間を設定する
　　　　　期間として、予算タイプ・目標金額を設定する
　　　　　操作として、閾値（境界値）を設定する
　　　　　通知として、メールを設定する
　　　最後に「終了」をクリックする
　　　最後に「予算とアラート」の画面に戻ったところで、
　　　　　予算につけた名前をクリックし、もう一度設定内容を確認する

ようこそ画面	予算作成画面	予算の設定
確認画面

旧のプログラムの問題点と修正点を列挙する

１．最新のインタフェースにする

　旧のインタフェースを使っている
　　　２０１０年に非推奨となった Maps API v2* の読み込み方法

<script type="text/javascript" 
src="https://maps.google.com/maps/api/js?key=NNN">
</script>

　最新のインタフェースに変更する

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MMM&callback=initMap">
</script>

　　　ＡＰＩキーを取得し直して変更する
　　　callback=initMap は、
　　　　　API の読み込みが完了後に initMap 関数を実行する

２．APIキーを新しく取得する

　新しい Maps JavaScript API を使用するには、新しいAPI キーが必須

３．コールバック関数の名前を設定する

　callback=initMap を指定する場合、
　　　マップの初期化関数名は initMap である必要がある
　　　JavaScript の関数名を prot から initMap に変更する

４．その他（注意点）

　InfoWindow の open() のタイミング
　　　通常、マーカーがクリックされたときに実行するが
　　　現状では、ページ読み込み時にすべての InfoWindowが開いてしまう
　　　　　※当仕様では、ページ読み込み時に一気に全InfoWindowを展開する

５．ソース見本

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html
xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
   <title>Google Maps</title>
   <script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
	<script type="text/javascript">
		let map;

		function initMap() {
		 var latlngc = {lat: , lng: }; // 中心の緯度経度を設定
		 var opts = {zoom: , center: latlngc, mapTypeId: 'roadmap' }; // zoomレベルを設定
		 map = new google.maps.Map(document.getElementById("map_canvas"), opts);

		 // マーカーのデータ（実際にはこの部分はループ処理などで動的に生成されます）
		 var markerData = [
		   {
		     lat: ,
		     lng: ,
		     icon: '../common/google/',
		     link: '?place=',
		     title: ''
		   },
		   // 他のマーカーのデータも同様に追加
		 ];

		 markerData.forEach(function(data) {
		   var latlng = {lat: data.lat, lng: data.lng};
		   var icon = {
		     url: data.icon, // アイコンのパス
		     scaledSize: new google.maps.Size(32, 32), // 必要に応じてサイズ調整
		     origin: new google.maps.Point(0, 0),
		     anchor: new google.maps.Point(0, 32) // アイコンのアンカーポイント
		   };
		   var marker = new google.maps.Marker({
		     position: latlng,
		     map: map,
		     icon: icon
		   });

		   var infowindow = new google.maps.InfoWindow({
		     content: '<a href="' + data.link + '" target="_blank">' +
data.title + '</a>',
		     pixelOffset: new google.maps.Size(0, -30)
		   });

		   // マーカーがクリックされたときに InfoWindow を開く
		   marker.addListener('click', function() {
		     infowindow.open(map, marker);
		   });
		 });

		 // 地図の中心を最後に設定されたマーカーの位置にする（必要に応じて調整）
		 if (markerData.length > 0) {
		   map.setCenter({lat: markerData[markerData.length - 1].lat, lng:
markerData[markerData.length - 1].lng});
		 }
		}
	</script>
 </head>
 <body>
   <div id="map_canvas" style="width:1200px; height:800px"></div>
 </body></html>

１．課金設定の確認

　・Google Cloud Platform Consoleでの課金アカウントの有効化
　　　Google Cloud  Platform Consoleで課金アカウントが有効なこと
　 ・ APIキーと課金アカウントの紐付け
　　　使用しているAPIキーが、有効な課金アカウントに紐付けられていること
　 ・ 利用制限の確認
　　　APIの利用制限を超過していないこと
　 ・ Maps JavaScript APIが有効であること
　　　Maps JavaScript APIが有効になっていること

　　　詳しくは「地図情報アプリの再構築（その１）」を参照

２．APIキーの確認と設定

　・新しいAPIキーの取得
　　　新しいAPIキーを取得する
　　　　　以前のAPIキーが新しい仕様に対応していない可能性がある

　・APIキーのJavaScriptコードへの設定
　　　新しいAPIキーを、「YOUR_API_KEY」の場所にに設定する

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

３．Maps JavaScript APIのバージョン確認

　必要に応じて適切なバージョンを指定する
　　　できる限り最新バージョンへの移行を検討する

<script async defer
src="https://maps.googleapis.com/maps/api/js?v=3.55&key=YOUR_API_KEY&callback=initMap">
</script>

４．コードの確認と修正

　・マーカー設定のコード
　　　マーカーを設定しているJavaScriptのコードを見直す
　　　　　新しいAPIの仕様に合わせて修正する

　・エラーメッセージの確認
　　　ブラウザのコンソールにエラーメッセージの表示を確認する
　　　　　問題解決の重要な手がかりとなる

　・Google Maps Platformのドキュメント（MapsJavaScript API）参照
　　　最新のドキュメントを参照し、マーカーの設定方法を確認する

Maps JavaScript API のドキュメント
https://developers.google.com/maps/documentation/javascript/overview
<https://developers.google.com/maps/documentation/javascript/o%3C/0%3Everview>

     - *マーカーの追加:*
https://developers.google.com/maps/documentation/javascript/markers
<https://developers.google.com/maps/documentation/javascr%3C/1%3Eipt/markers>

５．課金に関する理解

　・新しい課金体系の詳細
　　　新しい課金体系について十分に理解し、利用方法を検討する
　　　　　どのAPIの利用にどれだけの費用がかかるのか、
　　　　　無料枠はどの程度か

 　・料金計算ツールの利用
　　　Google Cloud Platform  Consoleで提供されている
　　　　　料金計算ツールを利用して、APIの利用料金を見積る

１．GCPへのログイン

　「Google Cloud」で登録している内容を事前に確認する
　　　「Google Cloud Platform」は2022年に改称された

　Google Cloud コンソールの「無料で利用開始」をクリック
　　　ログインして下記の内容を確認する

２．課金アカウントが有効になっていること

　・GCP Console にログインする
　　　「ようこそ」画面が表示される

　・最下段にある「課金」をクリックする

　・左端にある「お支払い設定」をクリック

　・「お支払い設定」の「お支払いアクント」を確認する

　・「お支払い設定」の「お支払いプロファイル」を確認する

３．API キーと課金アカウントが紐付けされていること

　・GCP Console にログインする
　　　「ようこそ」画面が表示される

　・最下段にある「API　ＡＰＩとサービス」をクリックする

　・左端にある「認証情報」をクリックする

　・確認したい「ＡＰＩキー」をクリックする

　・キーに制限が設定されていることを確認する
　　　「詳細」をクリックし制限内容を確認する

　　　 課金アカウントに紐付けられている場合、制限が設定されている
　　　　　ＡＰＩキーを使用しているプロジェクトでの課金が有効であること

４．API の利用制限が超過していないこと

　・GCP Console にログインする
　　　「ようこそ」画面が表示される

　・最下段にある「API　ＡＰＩとサービス」をクリックする

　・使用量をグラフ等で確認する

　　　選択した API の使用状況を確認する
　　　　　レイテンシ　 　リクエストの処理時間など
　　　　　トラフィック　 リクエスト数やレスポンスコードなど
　　　　　エラー　　　　 エラーの発生率など

　　　選択した API の割当て状況を確認する

　・「使用量」のグラフと「割り当て」の情報を比較し
　　　利用制限を超過していないかを確認する
　　　超過しそうな場合は、割り当ての引き上げをリクエストする

　　　種々の方法があるが、当記事ではなく＜別の記事＞で説明する

５．Maps JavaScript API が有効なこと

　・GCP Console にログインする
　　　「ようこそ」画面が表示される

　・最下段にある「API　ＡＰＩとサービス」をクリックする

　・「ＡＰＩとサービスを有効にする」をクリック

　・「Maps JavaScript API」をクリックする
　　　確認したいライブラリーをクリックする

　・「有効」を確認する

１．概要

２．サンプル

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>地図作成</title>
  <style>
    /* 修正点 1: 地図コンテナを正しく表示するため、htmlとbodyの高さを設定 */
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    #map {
      /* height/widthをビューポート基準(vh/vw)にするとより確実に表示されます */
      height: 90vh; 
      width: 90vw;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  
  <script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCEnjYhWMrvGnsgmk6Y9THGhN7vBWHVvdY&callback=initMap&libraries=places"></script>
  
  <script>
    let map;
    
    async function initMap() {
      // ライブラリのインポート
      const { Map } = await google.maps.importLibrary("maps");
      const { InfoWindow } = await google.maps.importLibrary("maps");
      const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
      
      // 地図の初期化
      map = new Map(document.getElementById("map"), {
        center: { lat: 47.150, lng: 3.550}, // 地図の中心
        zoom: 6,
        mapId: "historical-map-id", // ここにご自身のマップIDを貼り付けてください
      });
      
      // 各マーカーのデータ
      const markersData = [
        { position: { lat: 40.82, lng: 23.85 }, content: '<a href="https://ksrd.jp/santarou/34_JapanRemains/new_page_50.php?place=アンフィポリス" target="_blank">アンフィポリス</a>' },
        { position: { lat: 35.298056, lng: 25.163056 }, content: '<a href="https://ksrd.jp/santarou/34_JapanRemains/new_page_50.php?place=クノッソス" target="_blank">クノッソス</a>' },
        { position: { lat: 37.730833, lng: 22.756111 }, content: '<a href="https://ksrd.jp/santarou/34_JapanRemains/new_page_50.php?place=ミケーネ" target="_blank">ミケーネ</a>' },
      ];
      
      // マーカーと情報ウィンドウの設置
      markersData.forEach(data => {
        const pinElement = new PinElement({});
        
        const marker = new AdvancedMarkerElement({
          position: data.position,
          map: map,
          content: pinElement.element,
        });
        
        const infoWindow = new InfoWindow({
          content: data.content,
        });

        // 修正点 2: InfoWindow.openの引数をAdvanced Markerの仕様に合わせる
        infoWindow.open({ anchor: marker, map }); // 最初から情報ウィンドウを開
      });
    }
  </script> 
</body>
</html>

１．障害発生

　４月になって時間に余裕ができ、久しぶりに「歴史地図」を使うと
　　　全画面灰色になり地図が表示されない

　　　該当ページのHTMLソースを表示してみる、問題なく展開されている
　　　　　PF12キーでサイトの詳細を確認する、エラーが２件あり
　　　　　文言が複雑すぎて、即対応策が浮かばない

２．ネット検索を掛ける

　「Google Mapが動かなくなった」で検索する
　　　なかなかピッタリの検索結果に当たらず、試行錯誤する

　　　以下の内容が見つかる
　　　　　google.maps.Marker（v3.56）は、
　　　　　2024 年 2 月 21 日にサポートが終了しました。
　　　　　つきましては、
　　　　　新しい google.maps.marker.AdvancedMarkerElement クラスに
　　　　　移行することをおすすめします

３．AdvancedMarkerElementで検索

　下記の文章（ページ）がヒットする
　　高度なマーカーに移行する

４．料金体系の大幅改定

　さらに検索を続けていると、下記の記事に出会う

　２月５日のGoogle Cloud プレミア パートナーの情報によると
　　　GMPの料金体系が2025年3月1日より大幅に改定されると発表されていた
　　　　　Googleに支払う料金に変化が生じるとともに、
　　　　　無料で利用できていたのが有料になったり、
　　　　　逆に有料だったのが無料になったりするという

　地図配信サービス「Google Maps Platform（GMP）」とは
　　　地図表示や施設検索、ルート検索などの機能を実現するための
　　　SDK（ソフトウェア開発キット）や
　　　API（アプリケーション・プログラミング・インターフェース）の総称

　大雑把には
　　　今までは、毎月精算される有料サービスであった
　　　　　利用している全てのSKUの合計金額が月に２００ドルまでが無料

　　　今後も、毎月精算される有料サービスに変わりはないが
　　　　　月２００ドルの無償利用枠が廃止となり、
　　　　　SKUごとに無償利用回数が設定される
　　　　　　　無償利用回数はSKUのカテゴリーによって異なる
　　　　　　　高機能の回数は少なく、低機能の回数は多い、となる　　　

５．APIの使用も変更

　さらに検索を続けていると、下記の記事に出会う

　昨年１２月と今年２月のユーザー情報によると
　　　現行API（Places、Directions、Distance Matrix）の利用を継続する場合、
　　　新APIへの移行を推奨する

　　　推奨ということは、対応しないと上手く利用できないと理解する

６．状況判断

　１年以上前に警告が発せられていたので、知らなかったでは済まない
　　　情報量が多く、内容が細かすぎて直ぐには理解できない
　　　個人の無料ユーザーが質問しても有効なサポートは受けられないと判断し
　　　　　経緯の追跡より、善後策の対応へと切り替える

７．その後の経過報告

　４月７日に気づいた障害を１週間かけて調査した
　　　最終的には動かなくなったコーディング内容を「Gemini」に問い合わせる
　　　即座に修正点と対応手順の解答が返ってきた
　　　　　まず、これは２０１０年に非推奨となったＡＰＩ仕様だと指摘された
　　　　　　　こういった感じで幾つかやるべきことが示される

　　　対応策に着手する

１．マッピングの目的とパラメータ

　GoogleMap上に特定の場所を指定して表示したい
　　　ここにあるＷｅｂ素材を参考にして作成する（2014年）

　　覚書として以下のことを書きとめておきます
　　　　コンテナのclassをgmapとする
　　　　複数のマーカーclassはgmakerとする

　gmapの指定パラメータ

　gmakerの指定パラメータ