地図情報アプリの再構築（その３）

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

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

　旧のインタフェースを使っている
　　　２０１０年に非推奨となった 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>