Googleマップに複数のピンを立てたい

Googleマップに複数のピンを立てたいと考えています。

他のサイトを参考にし、以下の記述でうまく表示はできているのですが、
var markersの中はデータベースからひっぱってきたデータを入れたいと考えています。
（現在、AからFまでの緯度経度をそれぞれ入れているのです）

実現するためにどのように書けば良いか分からず、ご教示いただけないでしょうか。
どうぞよろしくお願いいたします。


<!--データベースを読み込む　ここから-->
<?php
$recordSet=mysqli_query($conn, "SELECT * FROM new");
$i=0;
while($Search=mysqli_fetch_assoc($recordSet)){
$ID[$i]=htmlspecialchars($Search['id']);
$NAME[$i]=htmlspecialchars($Search['name']);
$IDO[$i]=htmlspecialchars($Search['ido']);
$KEIDO[$i]=htmlspecialchars($Search['keido']);
$i++;
}
?>
<!--データベースを読み込む　ここまで-->


<!--Googleマップを表示するためのソース　ここから-->
<script type="text/javascript">
function initMap() {
var myOptions = {
zoom:15,
center: new google.maps.LatLng(34.694841, 135.187684),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var markers = [
['A',34.686931,135.196040],
['B',34.691280,135.182004],
['C',34.697090,135.189698],
['E',34.688954,135.197534],
['F',34.694930,135.185384]
];
for (var i = 0; i < markers.length; i++) {
var name = markers[i][0];
var latlng = new google.maps.LatLng(markers[i][1],markers[i][2]);
createMarker(name,latlng,map);
}
}
function createMarker(name,latlng,map){
var infoWindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({position: latlng,map: map});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(name);
infoWindow.open(map,marker);
map.panTo(latlng);　//markerをクリックした時に地図の中心に
});
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>
<!--Googleマップを表示するためのソース　ここまで-->


<div id="map_canvas" style="width:100%; height:600px"></div>

No.1 回答者： fujillin 回答日時： 2021/04/29 17:56

こんにちは

htmlをPHPで出力しているなら、html中に（var markers = [～～に相当するスクリプト）を出力する。

あるいは、経緯度データを別ファイルとして出力しておいて、htmlから読み込む。
jsファイルにしておけば、そのままscriptタグで読み込めばよいですし、textファイルならjsからajaxで読み込むなど。

元データが逐次更新されるようなら前者、そうでもないなら後者でしょうか？

この回答へのお礼

返信が遅くなりすみません。やり方を変えてしまったため、上記のやり方は用いていないのですが、助かりました。ありがとうございました！

お礼日時：2021/05/06 18:18