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>
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
こんにちは
htmlをPHPで出力しているなら、html中に(var markers = [~~に相当するスクリプト)を出力する。
あるいは、経緯度データを別ファイルとして出力しておいて、htmlから読み込む。
jsファイルにしておけば、そのままscriptタグで読み込めばよいですし、textファイルならjsからajaxで読み込むなど。
元データが逐次更新されるようなら前者、そうでもないなら後者でしょうか?
返信が遅くなりすみません。やり方を変えてしまったため、上記のやり方は用いていないのですが、助かりました。ありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript gasについて 1 2022/05/31 21:51
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- その他(プログラミング・Web制作) google formsを使ったタスク依頼フォーム作成におけるご相談 1 2023/06/22 15:55
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript Google reCAPTCHAについて 1 2023/02/22 14:37
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Googleストリートビューの写真...
-
二つのbxsliderをレスポンシブ...
-
アコーディオンメニューが他に...
-
JavaScriptでtabindexの変更っ...
-
スライドを最後の画像で止めたい
-
Javascriptを使ってQRコード読...
-
階層別の組織図の自動作成について
-
ajaxからphpにpsotしたときの日...
-
jQueryのアコーディオン一番目...
-
ajaxでPHPにPOST送信して結果デ...
-
jQueryを使いformでsubmitした...
-
div要素の入れ替え。半透明イメ...
-
jQueryで外部テキストファイル...
-
インラインフレームを自動更新...
-
AjaxでSJISファイル読み込みす...
-
readyStateが4にならない原因
-
VBAでIEのHTMLタグの要素を操作...
-
SQLのmaxで求めた値を変数に代...
-
JavascriptからPHPへのAjax通信...
-
if文でelseが実行されない
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
カンマ区切りのデータを配列に...
-
二つのbxsliderをレスポンシブ...
-
たくさんの経由地がある巡回ル...
-
迷路探索プログラムを作るには...
-
C言語の 配列の中 出力について
-
google maps api v3のルート検索
-
Google Maps:同マップ内でそれ...
-
Googleストリートビューの写真...
-
webサービス上のkmlをgooglemap...
-
Googleマップのウィンドウの表示
-
Haskellのsubtractについて
-
google maps 吹き出しカウント...
-
数字をピクチャボックスの上に...
-
GoogleMapの移動量
-
GoogleMapでアイコンを500件表...
-
googleマップが表示されない。
-
グーグルマップにマーカーを色...
-
ドラッグ & ドロップでのド...
-
JavascriptからPHPへのAjax通信...
-
階層別の組織図の自動作成について
おすすめ情報