- ベストアンサー
GoogleMapAPIで複数のマーカーの設置
GoogleMapAPIで複数のマーカーの設置を考えています。 DBから受け取った複数の緯度、経度を利用したいのですが、このようなことはできるでしょうか？ よろしくお願いいたします。
- eccschool
- お礼率8% (53/644)
- JavaScript
- 回答数5
- ありがとう数1
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (4)
- taketan_mydns_jp
- ベストアンサー率58% (450/773)
またまた失礼します（笑）。 補足の >PHPとJavaScript部分の連動はどのように処理 とありますが、書き出していたらキリがありません。ものすごくたくさんあります。JavaScriptで使う場合は、JSONに変換して出力するのが一番楽じゃないですかね。 例えば、PHP側でDBから得た下の$dboutようなデータがあるとします（DBから とってきたデータはだいたいこんなもんだと思います）。それを、JSONオブジェクトに変換します。 <?php $dbout[0] = array ( "lat"=>38.5,"lon"=>139.2,"name"=>"データ1","address"=>"住所1"); $dbout[1] = array ( "lat"=>38.3,"lon"=>135.2,"name"=>"データ2","address"=>"住所2"); // .......以下、いくつでも同じです。 $json = " <script type='text/javascript'> var DBObj = { Items: [ "; $cnt = count($dbout); for($i=0;$i<$cnt;$i++){ $j[$i] = " Item : { "; $d = ""; foreach($dbout[$i] as $key => $val){ $d[] = " $key : \"$val\""; } $j[$i] = implode("," , $d )." }"; } $json .= implode(",",$j). "] } </script>"; echo $json; ?> これで出力されるのは var DBObj = { Items: [ lat : "38.5", lon : "139.2", name : "データ1", address : "住所1" }, lat : "38.3", lon : "135.2", name : "データ2", address : "住所2" } ] } と言うようなオブジェクトです。 これをJavaScriptで読み取り、Google Mapsのマーカーにします。例えば http://www.geekpage.jp/web/google-maps-api/marker-3.php のサンプルをもとに、繰り返し処理をするとすれば、 function setMarker (Obj){ var point = new GLatLng(Obj.lat,Obj.lon); var marker = new GMarker(point); map.addOverlay(marker); GEvent.addListener(marker, 'click', function() { marker.openInfoWindow( document.createTextNode(Obj.name + Obj.address)); }); } for(var i=0;i<DBObj.Items.length;i++){ setMarker (DBObj.Items[i] ); } というようにすれば良いかと。 ソースは非検証です。
補足
<body onload="load();showAddress('')">の部分はどうしたらよいのでしょうか？教えてください。よろしくお願いいたします。
- steel_gray
- ベストアンサー率66% (1052/1578)
- steel_gray
- ベストアンサー率66% (1052/1578)
- steel_gray
- ベストアンサー率66% (1052/1578)
GoogleMapAPIのマーカーは複数に対応しています。 一個ができてるなら、あとは必要な数だけマーカーの登録処理を繰り返すだけだと思います。
補足
PHPとJavaScript部分の連動はどのように処理するのでしょうか？
関連するQ&A
- GoogleMapでの複数マーカー表示について
MySQLのデータベースに格納してある緯度と経度を使い、GoogleMap上に複数のマーカーを表示させるプログラムをJSPで作成したいのですが、 JSP内ではデータベースの緯度と経度をうまく取得できず、その後別のjavaで一度取得した経度と緯度をArrayListでリストに入れ、それをJSPで受け取り配列に入れる形式にしてみました。 しかし、それもうまく表示させることができませんでした。 MySQLのデータベースの緯度と経度を使ってGoogleMap上に複数マーカーを表示するにはどうすればいいのでしょうか？ アバウトな質問になってしまい申しわけありません。 どうかよろしくお願いいたします！
- 締切済み
- Java
- GoogleMapAPI - デフォルト表示したマーカーから緯度経度を取得できない
最近googleMapを利用しデータベースと連携して コミュニケーションツールを作れないかとあれこれ 本やネットで調べた知識でがんばっているのですが、 行き詰まってしまったのでどなたかお知恵をお貸し下さい。 ◇前提 ・googleMapのページアクセス時に ＤＢに登録済みのマーカー情報（緯度・経度・場所名称）を基に 複数のマーカーを表示する ※ＤＢとのデータ中継はＰＨＰを使用。ここでは省略。 ◇問題点 ・表示された複数のマーカーのうちどれかをクリックしたとき そのマーカーに付随するデータをフォーム上に表示したいが、 ＤＢへの問い合わせに必要なクリックしたマーカーの緯度経度が 取得できない。 以下抜粋 ------------------------------------------------- // 登録済みマーカーをデフォルト表示 GDownloadUrl("load.php", function(doc, stat){ var load = doc.parseJSON(); for(var i=0; i<load.data.length; i++){ var point = new GLatLng(load.data[i].lat, load.data[i].lng); var marker = new GMarker(point); map.addOverlay(marker); // クリックしたマーカーに該当する情報を表示 GEvent.addListener(marker, "click", function(){ //*** ここで緯度経度を取得 **** } } }); ------------------------------------------------- http://oshiete1.goo.ne.jp/qa2559818.html 上記ページの質問に対する回答の方法も試しましたが、 エラーが出てしまい解決できませんでした。 プログラム素人な上、不慣れな分野にて行き詰まってます。 どうかお助け下さい。
- 締切済み
- JavaScript
- googlemapapi複数マーカー10個以上表示
初心者です。。 見よう見まねで何とか下記まではできました。 function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); //地図を作成 map.setCenter(new GLatLng(35.969115,139.372559), 8); //地図を表示（(中心の緯度,経度),縮尺） map.addControl(new GSmallMapControl()); //マップコントローラを付ける map.addControl(new GMapTypeControl()); //マップタイプコントローラを付ける map.addControl(new GScaleControl()); //スケールコントローラを付ける map.removeMapType(G_HYBRID_MAP); //マップタイプコントローラから地図+写真を削除する map.enableScrollWheelZoom(); //マウスホイールによるズーム処理を有効化 //マーカー追加プログラム function addMarker(address, html) { var geocoder = new GClientGeocoder(); geocoder.getLatLng(address, function(point) { var marker = new GMarker(point); //マーカー生成 GEvent.addListener(marker,"mouseover",function(){marker.openInfoWindowHtml(html);});//マーカーにマウスが当たると情報ウィンドウを表示する map.addOverlay(marker); //マーカーをオーバレイ表示する }); } //マーカー追加 addMarker("住所",'<p>html</p>'); addMarker("住所",'<p>html</p>'); addMarker("住所",'<p>html</p>'); addMarker("住所",'<p>html</p>'); addMarker("住所",'<p>html</p>'); addMarker("住所",'<p>html</p>'); addMarker("住所",'<p>html</p>'); addMarker("住所",'<p>html</p>'); addMarker("住所",'<p>html</p>'); addMarker("住所",'<p>html</p>'); addMarker("住所",'<p>html</p>'); addMarker("住所",'<p>html</p>'); addMarker("住所",'<p>html</p>'); addMarker("住所",'<p>html</p>'); addMarker("住所",'<p>html</p>'); addMarker("住所",'<p>html</p>'); addMarker("住所",'<p>html</p>'); addMarker("住所",'<p>html</p>'); addMarker("住所",'<p>html</p>'); addMarker("住所",'<p>html</p>'); addMarker("住所",'<p>html</p>'); addMarker("住所",'<p>html</p>'); } } 10個以上あるとマップ上に表示されないようです。。。 最終的に100件200件になると思うので、 すべて表示させたいのですが・・・ 何か方法はないでしょうか。。 具体的に教えていただけると助かります。。
- ベストアンサー
- JavaScript
- GoogleMapとＤＢの連携
googlemapとＤＢを連携させたいと思っていますが、 方法がいまいちよくわかりません。 http://www.ajaxtower.jp/googlemaps/ などを見ているのですが、ＤＢと連携させる方法についての説明がないので困っています。 参考サイトや書籍などございましたら教えていただけないでしょうか。 ＤＢから持ってきた緯度、経度をjavascriptに渡してループで回せばよいのかな、と考えているのですが、 この考え方でよいでしょうか。 ajaxを使う等の記述は見るのですが、具体的にどうすればいいのかがわかりません。 緯度経度を使用してマーカーをつけるメソッドにそのまま値を渡せばよいのでしょうか。 また、ＤＢからたくさんの値を取得する場合、10個以上になると1秒１つのペースでマーカーをつけるという記述を見ました。 マーカーがたくさん増える可能性があるので、そのような対策は通常ではどのようにするのでしょうか。 たとえば優先度の高い10個を取得して、その後ズームをしたら新たに取得・・・とできないでしょうか。 環境はasp.net、Ｃ＃です。 SQLServerを使用する予定です。 初心者のため、記述不足がありましたら申し訳ございません。補足します。
- 締切済み
- JavaScript
- MySQLのデータとGoogle Map APIを連携させる方法
定期的に送られてくる緯度・経度の情報をMySQLでデータベースに格納して、その格納されたデータを読み込んでGoogleMap上でその地点をマーカー表示させる仕組みを考えています。MySQLへのデータ渡しなどはJSP(JDBC)と連携させているのですが、GoogleMapAPIはJavaScriptを使用しているため、MySQLとGoogleMapの間でデータの受け渡しが可能なのか疑問なんです。ご回答をよろしくお願いいたします。
- 締切済み
- MySQL
- GoogleMapApi3について
GoogleMapApi3について ページの文字コードがShift_jisです。GoogleMapApi3を利用しているのですがFireFoxでは見れるのにIEでは表示されません。 調べたところUTF-8以外の文字コードの場合、見れない不具合があるようで下記のようにしてみましたがやはり表示されません。 ver2の場合の対処法なので無理やりつけた感じですがver3で行うにはどうすればいいでしょうか？ ページはShift_jisで表示させるという条件で教えてください！ <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&ie=Shift_JIS&oe=Shift_JIS"></script>
- ベストアンサー
- JavaScript
- googlemap api で複数マーカー表示
複数のマーカー表示は最初できてたんですが、 住所から座標を取得してマーカーを複数表示ができません。。 <script type="text/javascript"> function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); //地図を作成 map.setCenter(new GLatLng(35.969115,139.372559), 8); //地図を表示（(中心の緯度,経度),縮尺） map.addControl(new GSmallMapControl()); //マップコントローラを付ける map.addControl(new GMapTypeControl()); //マップタイプコントローラを付ける map.addControl(new GScaleControl()); //スケールコントローラを付ける map.removeMapType(G_HYBRID_MAP); //マップタイプコントローラから地図+写真を削除する map.enableScrollWheelZoom(); //マウスホイールによるズーム処理を有効化 //マーカー追加プログラム function addMarker(lat,lng,html) { var geocoder = new GClientGeocoder(); geocoder.getLatLng ( lat, function(point) { var marker = new GMarker(new GLatLng(point,lng)); //マーカー生成 GEvent.addListener(marker,"mouseover",function(){marker.openInfoWindowHtml(html);});//マーカーにマウスが当たると情報ウィンドウを表示する map.addOverlay(marker); //マーカーをオーバレイ表示する } ); } //マーカー追加 addMarker("横浜市",'<p>html</p>'); addMarker("東京都",'<p>html</p>'); } } </script> </head> <body onload="load()" onunload="GUnload()"> 中略・・・ 初心者なもので、、、 ご回答お願いいたします。
- ベストアンサー
- JavaScript
- google mapに複数マーカーを設置する関数
google mapに複数のマーカーとそれに伴う吹き出しを作成しています。 マーカーの数は上下するのですが、大体30～40個くらいが設置される予定です。 ただできるだけjsのソースを少なくしたいと思っているため、ループでまとめて記述できないかと試行錯誤しています。 ちなみに現状は以下のように記述しています。 * * * * * * * * * * * * * * * * * * * * * * * * * var marker2 = new google.maps.Marker({ position: new google.maps.LatLng(座標), map: map, title: 'マーカー2' }); var contentString2 = '吹き出しテキスト'; var infowindow2 = new google.maps.InfoWindow({ position: new google.maps.LatLng(座標), content: contentString2 }); google.maps.event.addListener(marker2, 'click', function() { infowindow2.open(map,marker2); }); * * * * * * * * * * * * * * * * * * * * * * * * * この「2」の部分を各数字に変えてマーカー分記述していたのですが、 面倒で尚且つソースが非常に多くなるため困っています。 for関数でループさせてみようと思い作成してみたのですが、うまく動作しません。 ちなみに吹き出し内のコメントはすべて違う内容になるため、せめてgoogle.maps.event.addListenerの部分だけでも、と思っています。 javascriptは初心者で、上記のソースも色々調べた上で見よう見まねで作っています。 どなたか効率のよい方法を教えていただけますでしょうか。 よろしくお願い致します。
- ベストアンサー
- JavaScript
補足
ご教授ありがとうございます。 Jsonというのは初めて聞きました。 ところでいまだにうまくいかない状況です。 <body onload="load();showAddress('@@addr@@');setMarker()"> の部分ですがこの場合どのように記述すればいいのでしょうか？ よろしくお願いいたします。