ここではGoogle Maps API V3 InfoWindowを複数表示する方法を解説しています。
※2018年7月16日よりAPIキーが必須で有料になりました。
Google Cloud Console にログインしてMaps JavaScript APIとGeocoding APIのキーを発行してください。
https://cloud.google.com/
デモはこちら
https://office-goto.info/demo/infowindow-plurality2/
サンプルソース
google.maps.event.addDomListener(window, 'load', function() { var latlng = new google.maps.LatLng(35.671277, 139.718489); var options = { zoom: 16, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("gmap"), options); // Marker:LatLng / InfoWindow:text var arrData = new Array(); arrData[0] = {"LatLng":new google.maps.LatLng(35.671277, 139.718489), "text": "Hellow"}; arrData[1] = {"LatLng":new google.maps.LatLng(35.66991, 139.715291), "text": "GoodBye"}; // setMarkerDataを配列分 for (i = 0; i < arrData.length; i++) { setMarkerData(i); } // MarkerとInfoWindowを登録 function setMarkerData(n) { var marker = new google.maps.Marker({ position: arrData[n]["LatLng"], map: map, title: "ツールチップ" + (n + 1), icon: "icon.png" }); // InfoWindowオブジェクト var infowindow = new google.maps.InfoWindow(); google.maps.event.addListener(marker, 'click', function (e) { infowindow.setContent(arrData[n]["text"]); infowindow.open(map, marker); }); } });
InfoWindowを複数表示する場合には独自関数にローカルでInfoWindowオブジェクトを定義します。
こうすることでInfoWindowを複数表示することが出来ます。