googlemap、mysqlでサイドバーが表示されない問題
- googlemap、mysqlを使用してサイドバーを表示するシステムを作成していますが、マーカーは表示されるもののサイドバーが表示されません。
- サイドバーにはデータベースから取得したタイトルを表示する予定です。
- 問題のソースコードを添削していただきたいです。
- ベストアンサー
googlemap 、mysqlでサイドバー
システム設計初心者です。 googlemap 、mysqlでマーカー（クリックで情報ウィンドウ表示）とサイドバーを表示するシステムを作っているのですが、マーカーは表示されたのですがサイドバーが表示されません。 以下にソースを表示しましたので、添削をお願いします。 サイドバーには、ｍｙSQLから持ってきたtitleを表示したいと考えています。 宜しくお願いします。 ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ <!DOCTYPE html PUBLIC "-//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>閲覧画面</title> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAR0TWf73rulOP_SnETQPFKxRj5djmSsmVAgDaRb1psFcJlThRhxSjxifqM96NjrBsBn2XrZWSE-QQqQ" type="text/javascript"></script> <script type="text/javascript"> function initialize() { //サイドバーのボタンを作成 createMarkerButton(marker); } //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(35.6894875,139.6917064), 13); // Change this depending on the name of your PHP file GDownloadUrl("posts.php", function(data) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var title = markers[i].getAttribute("title"); var nitiji = markers[i].getAttribute("nitiji"); var message = markers[i].getAttribute("message"); var picture = markers[i].getAttribute("picture"); var point = new GLatLng(parseFloat(markers[i].getAttribute("latitude")), parseFloat(markers[i].getAttribute("longitude"))); var marker = createMarker(point, title, nitiji, message, picture); map.addOverlay(marker); } }); } } function createMarker(point, title, nitiji, message, picture) { var marker = new GMarker(point); var html = "<table>"+"<tr>"+"<td>"+"タイトル:"+"</td>"+"<td>"+ title +"</td>"+"</tr>"+"<tr>"+"<td>"+ "日時:"+"</td>"+"<td>"+nitiji+"</td>"+"</tr>"+"</table>"+ "<h3>"+"コメント:"+"</h3>"+"<h4>"+message+"</h4>"+"<h3>"+"写真:"+"</h3>"+picture; GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); }); return marker; } function createMarkerButton(marker) { //サイドバーにマーカ一覧を作る var ul = document.getElementById("marker_list"); var li = document.createElement("li"); var title = marker.getTitle(); li.innerHTML = title; ul.appendChild(li); //サイドバーがクリックされたら、マーカーを擬似クリック google.maps.event.addDomListener(li, "click", function(){ google.maps.event.trigger(marker, "click"); }); } google.maps.event.addDomListener(window, "load", initialize); //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <h1>閲覧</h1> <div id="map" style="width: 800px; height: 600px"></div> <div><h3><a href="index.php"/>戻る</a></h3></div> </body> </html> ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
- znf96266
- お礼率25% (1/4)
- MySQL
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
何度もスミマセン。 //以下の呼び出しを変更 createMarkerButton(marker); ↓ createMarkerButton(marker,title); //createMarkerButtonの関数を以下の通り変更。引数titleを追加 function createMarkerButton(marker,title) { //サイドバーにマーカ一覧を作る var ul = document.getElementById("marker_list"); var li = document.createElement("li"); //var title = marker.getTitle(); ←削除 li.innerHTML = title; ul.appendChild(li); //サイドバーがクリックされたら、マーカーを擬似クリック google.maps.event.addDomListener(li, "click", function(){ google.maps.event.trigger(marker, "click"); }); } シンプルに直してみました。
その他の回答 (3)
- nekomikekamo
- ベストアンサー率73% (71/97)
#2です。 そもそも、サイドバーを表示させる場所 <ul id="marker_list"></ul> がないですね・・・。
補足
回答ありがとうございます。 サイトに表示させることができたのですが、表示内容が「•undefined」になっていました。 何度もすいません、解決方法があればアドバイスください宜しくお願いします。
- nekomikekamo
- ベストアンサー率73% (71/97)
createMarkerButtonの呼び出しタイミングに問題があると思われます。 map.addOverlay(marker);の下辺りで実行すればいいのではないですか？ コードがJS的に結構難有りです。 //以下のようにmap.addOverlayすぐ下で実行 map.addOverlay(marker); createMarkerButton(marker);
補足
回答ありがとうございます。 map.addOverlay(marker); createMarkerButton(marker); と下で実行を行って試してみたのですが、サイドバーは表示されず、うまくいきませんでした。 アドバイスいただきありがとうございました。
- muuming2001
- ベストアンサー率23% (202/845)
もう少し、ご自身での問題切り分けはできないでしょうか？ posts.phpも読み込むんですよね？ 今の質問内容ではここに問題ある場合わかりませんよ？ 丸投げしすぎと感じました。
補足
すいません。質問内容が不十分でした。 「posts.php」を読み込んでいます。「posts.php」ではXMLを生成してmysqlの「posts」というテーブルから latitude,longitude（経度・緯度）、title、nitiji、message、pictureを選択して渡しています。 ソースは以下の通りです。 ちなみにこちらのサイトを参考につくりました。 https://developers.google.com/earth/articles/phpsqlearth?hl=ja ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ <?php //sql-info.phpはデータベースに接続するプログラムです require("sql-info.php"); // 以下、XML 生成 $dom = new DOMDocument("1.0"); $node = $dom->createElement("markers"); $parnode = $dom->appendChild($node); // 以下、MySQL への接続 $connection=mysql_connect ('localhost', $username, $password); if (!$connection) { die('Not connected : ' . mysql_error()); } $db_selected = mysql_select_db($database, $connection); mysql_set_charset('utf8'); if (!$db_selected) { die ('Can\'t use db : ' . mysql_error()); } // 以下、「posts」テーブルからフィールド選択 $query = "SELECT * FROM posts WHERE 1"; // 場合によりコマンドを応用 $result = mysql_query($query); if (!$result) { die('Invalid query: ' . mysql_error()); } header("Content-type: text/xml"); // 以下、フィールドの値をXML へ渡す while ($row = @mysql_fetch_assoc($result)){ $node = $dom->createElement("marker"); $newnode = $parnode->appendchild($node); $newnode->setattribute("latitude", $row['latitude']); $newnode->setattribute("longitude", $row['longitude']); $newnode->setattribute("title", $row['title']); $newnode->setattribute("nitiji", $row['nitiji']); $newnode->setattribute("message", $row['message']); $newnode->setattribute("picture", $row['picture']); } echo $dom->saveXML(); ?> ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ そして先ほどのプログラムで「posts.php」を読み込んでmysqlのデータ（latitude,longitude、title、nitiji、message、picture）を出力させマーカーごとに情報ウィンドウを表示させています。そこまではうまく動作したのですが、サイドバーを作成してマーカー一覧（読み込んだtitle）を表示したいのですがうまくいきません。 サイドバーの表示はこちらのサイトを参考にしました。 http://googlemaps.googlermania.com/google_maps_api_v3/ja/map_example_sidebar.html このサイトにあるサンプルコードの必要だと思った部分だけをソースに加えただけになっています。 加えたソースは一つ目は ・・・・・・・・・・・・・・・・・・・・・・・ function initialize() { //サイドバーのボタンを作成 createMarkerButton(marker); } ・・・・・・・・・・・・・・・・・・・・・・・ 二つ目は ・・・・・・・・・・・・・・・・・・・・・・・・・・・・ function createMarkerButton(marker) { //サイドバーにマーカ一覧を作る var ul = document.getElementById("marker_list"); var li = document.createElement("li"); var title = marker.getTitle(); li.innerHTML = title; ul.appendChild(li); //サイドバーがクリックされたら、マーカーを擬似クリック google.maps.event.addDomListener(li, "click", function(){ google.maps.event.trigger(marker, "click"); }); } google.maps.event.addDomListener(window, "load", initialize); ・・・・・・・・・・・・・・・・・・・・・・・・・・・・ になります。サンプルコードの内容もあまり理解できないまま利用したので、この二つの部分が間違っていると思うのですが、理解できていない状況です。 説明が不十分で申し訳ありませんでした。よろしければ再度添削をよろしくお願いします。
関連するQ&A
- GoogleMap APIマーカーマネージャーとXMLの読み込み
Google Codeのページ http://code.google.com/intl/ja/apis/maps/documentation/overlays.html#Marker_Manager に載っていたマーカーマネージャーを使用し、さらにGDownloadUrlでXMLを読み込んで http://code.google.com/intl/ja/apis/maps/documentation/services.html 地図を作成しようとしております。 現在記述は以下のようになっています。 ----- var map = null; var mgr = null; var batch = []; function setupMap() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(35.66332844365397,139.7321891784668),16); map.addControl(new GLargeMapControl()); map.enableDoubleClickZoom(); window.setTimeout(setupMarkers, 0); } } function getMarkers() { GDownloadUrl("○○○.xml", createMap); return batch; } function createMap(data) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var lat = parseFloat(markers[i].getAttribute("lat")); var lng = parseFloat(markers[i].getAttribute("lng")); var markeropts = new Object(); markeropts.title = name; var marker = new GMarker(new GPoint(lng,lat), markeropts); batch.push(marker); // ※1 } return batch; } function setupMarkers() { mgr = new MarkerManager(map); mgr.addMarkers(getMarkers(), 14); mgr.refresh(); } ----- いろいろと検証の結果、XMLの読み込みはうまくいっており、※1のところでbatchにはちゃんとpushされていることは確認したのですが、最終的にマーカーは表示されません。 function getMarkersが function getMarkers() { var batch = []; var markeropts = new Object(); markeropts.title = "六本木"; var marker = new GMarker(new GPoint(35.66332844365397,139.7321891784668), markeropts); batch.push(marker); return batch; } の時はマーカーがちゃんと表示されたことも確認しております。 どこがおかしいのでしょうか？ また、根本的に間違っているor他にいい方法があるのであればご教示ください。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- GoogleMapsAPIv3でXMLを取得(3)
お世話になっております。 何度か質問しているのですが、新たに質問したいことがあります。 現在以下の様な形で、GoogleMapsAPIを使ってXMLデータを取得し、表示させています。 function initialize() { var myLatlng = new google.maps.LatLng(16.636192,158.9062); var myOptions = { zoom: 1, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); var infowindow = new google.maps.InfoWindow; downloadUrl("xml/allplaces.xml", function(data) { var markers = data.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var point = new google.maps.LatLng( parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var linkurl = markers[i].getAttribute("linkurl"); var html = '<div style="height: 150px; width: 200px"><b>'+name+'</b><br />'+linkurl+'</b>'; var marker = new google.maps.Marker({ map: map, position: point, title: name }); bindInfoWindow(marker, map, infoWindow, html); } }); } function bindInfoWindow(marker, map, infoWindow, html) { google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker); }); } 10行目の downloadUrl("xml/allplaces.xml", function(data) { の部分でXMLを指定していますが、これをHTML上の <input type="button" id="btn" value="" onClick="" /> といった、ボタンファンクションで、異なるXMLを指定したいです。 つまり、クリックすると出ているマーカーは消えて、ほかのマーカーが出るようにしたいです。 分かる方いらっしゃいましたら、どうぞよろしくお願い致します。
- ベストアンサー
- JavaScript
- googlemapでの位置の表示
現在、googlemapを用いて、テーマパークだけを表示させるプログラムを作ってます。 今作っているプログラムは位置情報を読み込む際にxmlファイルから読み込んでいるのですが、xmlファイルの位置情報をランダムに取得して表示させたりすることは出来るのでしょうか？下のxmlファイルでしたら、お台場と東京タワーだけ表示みたいな形で… ↓xmlファイル <markers> <marker lat="35.62882" lng="139.777508" html="お台場" label="お台場" n="1"/> <marker lat="35.658632" lng="139.745411" html="東京タワー" label="東京タワー" n="1"/> <marker lat="35.729539" lng="139.718172" html="サンシャイン60" label="サンシャイン60" n="1"/> <marker lat="35.660423" lng="139.729204" html="六本木ヒルズ" label="六本木ヒルズ" n="1"/> <marker lat="35.7174" lng="139.771347" html="上野動物園" label="上野動物園" n="1"/> <marker lat="35.715491" lng="139.794669" html="花やしき" label="花やしき" n="1"/> <marker lat="35.741964" lng="139.647941" html="としまえん" label="としまえん" n="1"/> <marker lat="35.717588" lng="139.276707" html="東京サマーランド" label="東京サマーランド" n="1"/> </markers> ↓xmlの読み込み部分のjavascript // ===== XML呼出 ===== function readMap(url) { var request = GXmlHttp.create(); request.open("GET", url, true); request.onreadystatechange = function() { if (request.readyState == 4) { var xmlDoc = GXml.parse(request.responseText); var markers = xmlDoc.documentElement.getElementsByTagName("marker"); map.getInfoWindow().hide(); map.clearOverlays(); for (var i = 0; i < markers.length; i++) { var lat = parseFloat(markers[i].getAttribute("lat")); var lng = parseFloat(markers[i].getAttribute("lng")); var points = new GLatLng(lat,lng); var html = markers[i].getAttribute("html"); var label = markers[i].getAttribute("label"); var n = markers[i].getAttribute("n"); var marker = createMarker(points,label,html,n); map.addOverlay(marker); } なんかいい工夫はあるのでしょうか？ やり方も教えていただけると助かります。 何かいい方法がありましたらご教授お願いします。。
- ベストアンサー
- JavaScript
- XMLを読み込んでサイドバー付きでGoogleMapを表示させるものを
XMLを読み込んでサイドバー付きでGoogleMapを表示させるものを、色々参考にしながら作成しています。 先日、こちらの掲示板で質問させていただき、アドバイスをいただいてJavaScriptの中身を改変してみたのですが、状況が変わってきましたので、前回の板を閉めて、改めて質問させていただきました。 （初回質問） http://questionbox.jp.msn.com/qa5860644.html 【動作サンプル】 http://6pesos.googlecode.com/svn/trunk/xml.html ↑のサンプルのXMLの読み込み部分を以下のように修正してみました。 【修正内容】 GDownloadUrl("data/example-xml.xml", function(data, responseCode) { // XMLファイルの名称・場所 if(responseCode == 200) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName("marker"); var side_bar = document.getElementById("side_bar"); side_bar.innerHTML = ""; for (var i = 0; i < markers.length; i++) { var point = new GLatLng(parseFloat(markers[i].getElementsByTagName("lat")[0].nodeValue), parseFloat(markers[i].getElementsByTagName("lng")[0].nodeValue)); var label = markers[i].getElementsByTagName("label")[0].nodeValue; var html = markers[i].getElementsByTagName("html")[0].nodeValue; var marker = createMarker(point, label, html); map.addOverlay(marker); var side_barEntry = createside_barEntry(marker, label); side_bar.appendChild(side_barEntry); } 【XMLファイル】 <?xml version="1.0" encoding="UTF-8"?> <markers> <marker> <lat>00.000000</lat> <lng>00.000000</lng> <label>●●●</label> <html>▲▲▲</html> </marker> </markers> これらを表示させてみたのですが、エラーが出て表示されません。 エラーの内容は以下です。 メッセージ: 引数が無効です。 ライン: 137 文字: 18 コード: 0 URI: http://maps.gstatic.com/intl/ja_ALL/mapfiles/225b/maps2.api/main.js 検索して調べてみたのですが、解決法が分かりませんでした…。 サイドバーなしのMAPのみだと、このようなXMLの記述方法で表示可能なようですが、サイドバーがあるMAPにするとエラーが出ます。 解決法が分かる方いらっしゃいましたら、ご教授いただけませんでしょうか。 参考URLでもかまいませんので、よろしくお願い致します。
- ベストアンサー
- JavaScript
- GoogleMapでxmlから10件のみ情報取得
今、googlemapで、xmlに書き出されたデータをjavascriptで呼び出し、地図外に一覧を表示させています。 現在のスクリプトでは、xmlデータ全件取得されています。 マップ上のポイントは前件表示、一覧表示部分のみ10件のみ表示に変更させる場合の書き方がわかりません。 初心者なりに、色々とやってみたのですが、うまくいかず。。。 ご指導いただけると助かります。 ****************************************** <script type="text/javascript"> var map; function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById('map')); ・・・ } GDownloadUrl('http://○○.jp/map.xml', function(data) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName('marker'); var shopList = document.getElementById('map_text'); ・・・ for (var i = 0; i < markers.length; i++) { var shop = markers[i].getAttribute('shop'); var text = markers[i].getAttribute('text'); ・・・ var marker = createMarker(point, shop, text, n, imgurl, linkurl, category, shopurl); var sidebarEntry = createSidebarEntry(marker,shop, text); map.addOverlay(marker); shopList.appendChild(sidebarEntry); } }); } function createMarker(point, shop, text, n, imgurl, linkurl, category, shopurl) { ・・・ ｝ function createSidebarEntry(marker, shop, text) { var shopList = document.createElement('div'); shopList.id = "map_text"; var maplist =shop + '<br/>' + text; ←※ここで呼び出される情報を10件に限定したい shopList.innerHTML = maplist; GEvent.addDomListener(shopList, 'click', function() { GEvent.trigger(marker, 'click'); }); return shopList; } </script> ******************************************
- ベストアンサー
- JavaScript
- Google maps api v3
https://developers.google.com/maps/articles/phpsqlajax_v3?hl=ja を参考にコーディングし、いろいろなサイトも調べてながら（手探り）ですが、どうしてもうまく表示されません。 【maps.php】にてxmlデータを生成しました。それを使ってサイトに表示させるというものです。 うまく表示されないというか、画面が真っ白になってしまいます。 アドバイス等ご教示頂ければ幸甚です。 【index.html】 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Maps</title> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/jacascript"> //<![CDATA[ function load() { var map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(35.66, 139.69), zoom: 13, mapTypeId: 'roadmap' }); var infoWindow = new google.maps.InfoWindow; // Change this depending on the name of your PHP file downloadUrl("maps.php", function(data) { var xml = parseXml(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var name = markers[[]i].getAttribute("name"); var address = markers[[]i].getAttribute("address"); var tel = markers[[]i].getAttribute("tel"); var email = markers[[]i].getAttribute("email"); var message = markers[[]i].getAttribute("message"); var point = new google.maps.LatLng( parseFloat(markers[[]i].getAttribute("lat")), parseFloat(markers[[]i].getAttribute("lng"))); var html = "" + name + " " + address; var icon = customIcons[[]type] || {}; var marker = new google.maps.Marker({ map: map, position: point, icon: icon.icon, shadow: icon.shadow }); bindInfoWindow(marker, map, infoWindow, html); } }); } function bindInfoWindow(marker, map, infoWindow, html) { google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker); }); } function downloadUrl(url, callback) { var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest; request.onreadystatechange = function() { if (request.readyState == 4) { request.onreadystatechange = doNothing; callback(request.responseText, request.status); } }; request.open('GET', url, true); request.send(null); } function parseXml(str) { if (window.ActiveXObject) { var doc = new ActiveXObject('Microsoft.XMLDOM'); doc.loadXML(str); return doc; } else if (window.DOMParser) { return (new DOMParser).parseFromString(str, 'text/xml'); } } function doNothing() {} //]]> </script> </head> <body onload="load()"> <div id="map" style="width: 500px; height: 300px"></div> </body> </html>
- ベストアンサー
- JavaScript
- サイドバー付きGoogle Mapについて
初めまして～ Google maps api v3 初心者です。 どうかよろしくお願いいたします。 How to本でも紹介されているソースを元に サイドバー付き地図を作っています。 サイドバーをclickからmouseoverに変更し mouseoverで情報ウィンドウを表示し clickで、リンクに飛ばそうとしています。 が、サイドバーの<li>を作る過程で リンク先のURLを読み込むことができません。 手でリストを作っておいて、 clickでリンクへ飛んで mouseover時に情報ウィンドウ表示でも構いません。 どなたかお力添えをお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- body { background-color: #ffffff; font-size: 11px; font-family: "メイリオ", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック ", Arial, sans-serif; text-align: left; } #myInfo img{ width:200px;height:160px;border:none; } #myInfo span{ font-size:16px;font-weight:bold; } #myInfo a{ font-size:12px; } --> </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var stationList = [ {"latlng":[43.40559401552279,141.4347595785141],name:"厚田公園",myStr:"http://www.hokudai.ac.jp/",myImg:""}, {"latlng":[43.40450276438633,141.43127270679474],name:"厚田公園キャンプ場"}, ] var infoWnd, mapCanvas; function initialize() { var mapDiv = document.getElementById("map_canvas"); mapCanvas = new google.maps.Map(mapDiv); mapCanvas.setMapTypeId(google.maps.MapTypeId.ROADMAP); infoWnd = new google.maps.InfoWindow(); //■地図上にマーカーを配置していく var bounds = new google.maps.LatLngBounds(); var station, i, latlng; for (i in stationList) { //■マーカーを作成 station = stationList[i]; latlng = new google.maps.LatLng(station.latlng[0], station.latlng[1]); bounds.extend(latlng); var marker = createMarker( mapCanvas, latlng, station.name,station.myStr,station.myImg ); //■サイドバーのボタンを作成 createMarkerButton(marker); } //■マーカーが全て収まるように地図の中心とズームを調整して表示 mapCanvas.fitBounds(bounds); } function createMarker(map, latlng, title,myStr,myImg) { //■マーカーを作成 var marker = new google.maps.Marker({ position : latlng, map : map, title : title, content:myStr, content:myImg }); //■マーカーがクリックされたら、情報ウィンドウを表示 google.maps.event.addListener(marker, "click", function(){ infoWnd.setContent('<div id="myInfo"><span>' + title + "</span><br><a href="+myStr+ ">"+"<img src="+myImg+"><br>"+"詳細を開く</a>"+ "</title></div>"); infoWnd.open(map, marker); }); return marker; } function createMarkerButton(marker) { //■サイドバーにマーカ一覧を作る var ul = document.getElementById("marker_list"); var li = document.createElement("li"); var title = marker.getTitle(); li.innerHTML = title; ul.appendChild(li); //■サイドバーがクリックされたら、マーカーを擬似クリック ★clickをmouseoverに改変 google.maps.event.addDomListener(li, "mouseover", function(){ google.maps.event.trigger(marker, "click"); }); } google.maps.event.addDomListener(window, "load", initialize); </script> <style type="text/css"> <!-- #map_canvas { width: 75%; height: 500px; float: left; } ul#marker_list { padding:0; margin: 0; width: 23%; height: 500px; float: right; } ul#marker_list li { list-style: none; border: 1px solid #ccc; cursor: pointer; background-color: #eeeeee; } --> </style> </head> <body> <DIV align="center"> <TABLE> <TR> <TD width="600" valign="top"> <DIV id="map_canvas" style="width:600px; height:400px;float: left" align="left"></DIV> </TD> <TD width="250" valign="top" align="left"> <ul id="marker_list" style="width:250px;float: right; font-size:13px;"></ul> </TD> </TR> </TABLE> </DIV> </body> </html>
- ベストアンサー
- その他（プログラミング・開発）
- Google Map Api 複数のマーカーをおくと、一部が表示されない
お疲れ様です。 お世話になっております。 Google Map Apiで複数のマーカーを設置するスクリプトを組みました。 10件程度は問題なく表示されるのですが、10件を境に、表示されたり、されなかったりします。 F5で表示されるもの、されないものとまばらになるので、なんとなく原因は、処理よりも表示のほうが速いからではないか？ということなんですが、JSの処理の流れがイマイチわかっていないので、結論は出せません。 実際20件登録したところ、10件～17件の間で出たり出なかったりします。1～10件までは必ず表示され、その後ろのIDを持つものがランダムになります。 これを確実に全部表示されるようにしたいのですが、表示の前にsleepなどかけるのがよいのか、ajaxにしてみるのがよいのかなど、検討がつきません。 下記が、書いたスクリプトです。 もしよければ、アドバイスお願いします。 var markers = new Object(); var marker = new Object(); marker["name"] = "xxx"; marker["icon"] = "ylw-pushpin"; marker["address"] = "座標変換用の住所"; marker["text"] = "噴出しの中身"; marker["center"] = "中心にするかしないか"; markers[0] = marker; ２０回ループ markers[20] = marker; googlemap(markers) -----------googlemap(markers) function googlemap(markers) { if (GBrowserIsCompatible()) { geocoder = new GClientGeocoder(); map = new GMap2(document.getElementById("map")); map.addControl(new GSmallZoomControl()); map.addControl(new GScaleControl()); for(var i in markers){ showAddress(markers[i]); //ここは20回ちゃんとまわってるようです } } } ------------------showAddress() function showAddress(amarker) { if (geocoder) { geocoder.getLatLng( amarker['address'], function(point) { if(amarker['center'] == 1){ map.setCenter(point, 12); } //アイコンが指定されてたらアイコンを設定 if(amarker['icon']){ var marker = new GMarker(point,micon); //アラートしてみると、ここが10回～17回ぐらいしか回ってない }else{ var marker = new GMarker(point); } map.addOverlay(marker); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(ふきだしのなかみ) }); } ); } }
- ベストアンサー
- JavaScript
- Google Mapsからxmlファイルの読み込み
お世話になっております。 質問はタイトルの通りです。javascriptのソースを以下のようになります。 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー var map; function initialize() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(34.5927356,135.50753655), 5); GEvent.addListener(map, "click", clickAction); } } function downloadData(){ GDownloadUrl("http://○○/yahoolocaltest2.php", function dispData(data, statusCode){ var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var lats = markers[i].getElementsByTagName("lat"); var lngs = markers[i].getElementsByTagName("lng"); var names = markers[i].getElementsByTagName("name"); var lat = parseFloat(GXml.value(lats[0])); var lng = parseFloat(GXml.value(lngs[0])); var name = GXml.value(names[0]); map.addOverlay(createMarker(lat, lng, name)); } }); } function createMarker(lat, lng, name) { var marker = new GMarker(new GLatLng(lat, lng)); var html = "<p>" + name + "</p>"; GEvent.addListener(marker, "click", function(){ marker.openInfoWindowHtml(html); }); return marker; } ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 動けない所： function downloadData()の所には”yahoolocaltest2.php”というファイルを読み込みたいですが、マーカがでないです。 xmlデータは”~~.php”なんですが、実行結果は以下のようなxmlデータに整いました。 <?xml version='1.0' encoding='UTF-8' ?> <markers> <marker> <lat>35.2570706</lat> <lng>140.3977072</lng> <name>千葉県いすみ市</name> </marker> <marker> <lat>35.6766300</lat> <lng>139.7425472</lng> <name>東京都千代田区</name> </marker> <marker> <lat>35.6785042</lat> <lng>139.7415028</lng> <name>東京都千代田区</name> </marker> </markers> この結果は"~~.xml"という名前の保存したら、表示できますが。”~~.php”の形式なら表示できないです。 全くの新人なんですが、ご指導をお待ちしております。ありがとうございます。
- 締切済み
- その他（プログラミング・開発）
- googlemapについて教えてください。
googlemapでマーカーが追随するようにしたくて、function update(position) の関数のはじめにif(marker!=null){marker.setMap(null);}を入れてマーカーを消してから、次のマーカーがつくようにとしたつもりなのですが、うまくいきません。どのようにしたら、現在地にマーカーがつくようになるのでしょうか。下の場合マーカーがたくさんつきます。 よろしくお願いします。 <html> <head> <title>map</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja&v=3.6"></script> <script type="text/javascript"> var gmap; window.onload = function(){ var myLatlng = new google.maps.LatLng( 33 , 130 ); navigator.geolocation.watchPosition(update,poserror,{maximumAge: 30000,enableHighAccuracy:1}); var myOptions = { zoom: 15, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; gmap = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } function update(position){ var lat = position.coords.latitude; var lng = position.coords.longitude; var myLatlng = new google.maps.LatLng( lat , lng ); gmap.setCenter( myLatlng ); var marker = new google.maps.Marker({ position: myLatlng, map: gmap }); } function poserror(position){alert("error");} </script> </head> <body> <div id="map_canvas" style="width:95%; height:500px ; border:solid 3px #ccc;"></div> </body> </html>
- ベストアンサー
- JavaScript
お礼
回答ありがとうございます。 無事サイドバーに「title」を表示させることができました。 アドバイスいただき、本当にありがとうございました。 まだ、サイドバーに表示されているのが、クリック式でなく、文字表示になっているので自分なりに頑張って直してみます。 お世話になりました。