• 締切済み

firebugエラー解消方法

下記を実行すると、fireburgのデバッグで2つのエラーが出ます。 解消方法お分かりになる方いらっしゃいますでしょうか。 ■エラー内容 　　　SyntaxError: missing } after function body　 　　　　　　function doNothing() { } 　　　------------------↑ ■エラー内容 　　ReferenceError: searchLocations is not defined　　　　　 　　　　　<html xmlns="http://www.w3.org/1999/xhtml"> ●ソース <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <title>Google Maps AJAX + mySQL/PHP Example</title> <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ var markers = []; var locationSelect; var sidebarList; function searchLocations() { var address = document.getElementById("addressInput").value; var geocoder = new google.maps.Geocoder(); geocoder.geocode({address: address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { searchLocationsNear(results[0].geometry.location); } else { alert(address + ' not found'); } }); } function searchLocationsNear(center) { var category = document.getElementById('categorySelect').value; var radius = document.getElementById('radiusSelect').value; var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius + '&category=' + category; downloadUrl(searchUrl, function(data) { var xml = parseXml(data); var markerNodes = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markerNodes.length; i++) { var name = markerNodes[i].getAttribute("name"); var address = markerNodes[i].getAttribute("address"); var hpurl = markerNodes[i].getAttribute("hpurl"); var ifrurl = markerNodes[i].getAttribute("ifrurl"); var distance = parseFloat(markerNodes[i].getAttribute("distance")); var latlng = new google.maps.LatLng( parseFloat(markerNodes[i].getAttribute("lat")), parseFloat(markerNodes[i].getAttribute("lng"))); sidebarList += '<a href="javascript:myclick('+ i +')">'+ name +'</a><br />'; //追加 } document.getElementById("side_bar").innerHTML = sidebarList; //追加 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 style="margin:0px; padding:0px;" > //onload="load()" はずした <div> <select id="categorySelect"> <option value="" selected>選択なし</option> <option value="食事" selected>食事</option> <option value="病院">病院</option> <option value="小売店">小売店</option> </select> <input type="text" id="addressInput" size="40" value="住所を入力して下さい。" /> <select id="radiusSelect"> <option value="0.5" selected>0.5km</option> <option value="1">1km</option> <option value="20">20km</option> </select> <input type="button" onclick="searchLocations()" value="検索"/> </div> <div><select id="locationSelect" style="width:35%;visibility:visible"></select></div> <div id="side_bar" style="border: : solid 1px #808080; ></div> </body> </html>

みんなの回答

回答No.1

エラー内容をそのままGoogleで検索したら答えが出たけど。 http://taitan916.info/blog/?p=1422 もうひとつはかっこが足りない。 インデントしっかりしてみてごらん。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. その他（プログラミング・開発）

関連するQ&A

  • 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>

  • 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を指定したいです。 つまり、クリックすると出ているマーカーは消えて、ほかのマーカーが出るようにしたいです。 分かる方いらっしゃいましたら、どうぞよろしくお願い致します。

  • GoogleMapsAPIについて

    いろいろと調査をして、試みたのですがうまくいかないため質問させていただきます。 今回、MySQLの位置情報のデータをPHPに渡し、XMLファイルを生成し、GoogleMap上にマーカーを作成しようと考えています。 そこで以下のURLを参考に作成してみたのですが、GoogleMap上にマーカーが表示されません。 http://developers.google.com/maps/articles/phpsqlajax_v3?hl=ja XMLファイルを読み込んでGoogleMap上にマーカーを表示させることができたのですが、phpファイルですとどうもうまくいきません。 アドバイスをいただければ幸いです。 [map.html] <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Maps AJAX + mySQL/PHP Example</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 　　<script type="text/javascript"> function load() { var map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(47.6145, -122.3418), zoom: 13, mapTypeId:google.maps.MapTypeId.ROADMAP }); var infoWindow = new google.maps.InfoWindow; downloadUrl("phpsqlajax_genxml.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 type = markers[i].getAttribute("type"); var point = new google.maps.LatLng( parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var html = "<b>" + name + "</b> <br/>" + address; var marker = new google.maps.Marker({ map: map, position: point, }); 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('Msxml2.DOMDocument.3.0'); 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: 600px; height: 600px"></div> </body> </html> [phpsqlajax_genxml.php] <?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()); } //MySQLデータサーバのセット $db_selected=mysql_select_db($database,$connection); if(!$db_selected){ die ('Can\'t use db : ' . mysql_error()); } // テーブルデータの全行列を選択 $query = "SELECT * FROM markers WHERE 1"; $result = mysql_query($query); if (!$result) { die('Invalid query: '. mysql_error()); } header("Content-Type:text/xml; charset=utf-8"); // 各XMLノードへのデータ追加を繰り返す while ($row = @mysql_fetch_assoc($result)){ //XMLドキュメントノードに追加する $node = $dom->createElement("marker"); $newnode = $parnode->appendchild($node); $newnode->setattribute("name", $row['name']); $newnode->setattribute("address", $row['address']); $newnode->setattribute("lat", $row['lat']); $newnode->setattribute("lng", $row['lng']); $newnode->setattribute("type", $row['type']); } echo $dom->saveXML(); ?>

  • セレクトメニューに応じたdivタグの内容

    javascriptの質問です。フォーム内のセレクトメニューに応じて表示する配列を選び、複数のdivタグ内に表示したいと思っています。getElementByIdでセレクトメニューにIdをつけて呼び出し、selectedIndexでfunction()をonloadという事ですすめています。 複数のdivタグ内に書き出すのにinnerHTMLを使うんだなというところまでは理解しているつもりですが、上手く動きませんので、どなたかご存知の方にご教授願えればと思います。 <html> <head> <script type="text/javascript"> window.onLoad = function(){ document.getElementById("selected").onChange = function(){ var planTitle = this.selectedIndex; var object = document.getElementById("derection"); var TextData = [[],["text","text"],["text","text"]]; for (var i=0; i<TextData[planTitle].length; i++){ document.write(TextData[i]); } } } </script> </head> <body> <form action=""> <select id="selected"> <option value="title01">title01</option> <option value="title02">title02</option> <option value="title03">title03</option> </select> <div id="direction"></div> <div id="direction"></div> </form> </body> </html>

  • gmap　ストリートビュー

    普通の地図とストリートビューを両方表示したいですが。 どうもストリートビューのほうが不具合が生じます。 ストリートビューがない場所に近いところのストリートビューを表示したいですが、どうすればいいですか？ IEで見ると、ストリートビューの方角標識がズレてて、修正方法を教えていただけますでしょうか？ よろしくお願いします。 <script type="text/javascript"> <!-- var map_canvas; function initialize() { var initPos=new google.maps.LatLng(35.658613,139.745525); var mapOptions = { center:initPos, zoom:14, mapTypeId : google.maps.MapTypeId.ROADMAP, streetViewControl: true, mapTypeControl : true, mapTypeControlOptions : { style : google.maps.MapTypeControlStyle.DROPDOWN_MENU } }; map_canvas = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); var request = { address: "千葉県佐倉市ユーカリが丘４-５７５-２２" }; var geocoder = new google.maps.Geocoder(); geocoder.geocode(request, procGeocodeCallback); } function procGeocodeCallback(results,status){ var response; if(status == google.maps.GeocoderStatus.OK){ for (var i = 0; i < results.length; i++){ map_canvas.setCenter(results[i].geometry.location); openInfoWnd(results[i].geometry.location, results[i].formatted_address.replace(/^日本, /, '')); var markerOpts = { position : results[i].geometry.location, map : map_canvas }; var marker = new google.maps.Marker(markerOpts); // ストリートビュー表示 var svp = new google.maps.StreetViewPanorama( document.getElementById("street"), { position : results[i].geometry.location, pov : { heading : 90, // 東 pitch : 20, // 斜め上 zoom : 0.5 // ズームアウト } }); map_canvas.setStreetView(svp); // ストリートビューの方角などを求める function checkSTV(){ var pov = svp.getPov(); var hd = pov.heading; // 方角 var pt = pov.pitch; // 見上げる角度 var zm = pov.zoom; // ズーム alert("方角："+hd+"、角度："+pt+"、ズーム："+zm); } } } } function openInfoWnd(latlng,txt){ if( txt === undefined) { txt =""; } else { txt += "<BR>"; } var info = new google.maps.InfoWindow(); info.setContent("<div id=\"gmap_d\">" + "<span>" + "ユーカリが丘" + "</span>" + txt + "</div>".toString()); info.setPosition(latlng); info.open(map_canvas); } google.maps.event.addDomListener(window,"load",initialize); --> </script> <div id="map_canvas" style="width: 450px; height: 300px; float:left"></div> <div id="street" style="width: 300px; height: 300px; float:left"></div>

  • google maps APIのジオコーディング

    google maps APIで2箇所の住所を入力し、ジオコーディングし、マーカーを表示させ、２箇所のマーカーの中間点が画面の中心になるように表示させたいのですが、なかなか地図の中心を移動できません。どのようにすればうまくできるでしょうか？ //HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> ジオコーディング</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% } </style> </head> <body onload="initialize()"> <div> 地点１<input id="start" type="textbox" size="50"><br> 地点２<input id="goal" type="textbox" size="50"> <input type="button" value="地図表示" onclick="codeAddress()"> </div> <div id="map_canvas" style="height:80%"></div> <br>地点１ <div id="geocoder_info" style="height:10%"></div> 地点２ <div id="geocoder_info2" style="height:10%"></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://maps.google.com/maps/api/js?sensor=false"> </script> <script src="geocode.js"></script> </body> </html> //javascript　geocode.js var map; var geocoder; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(35.699338,139.705146); var myOptions = { zoom: 12, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map($("#map_canvas").get(0), myOptions); } function codeAddress() { var address = document.getElementById("start").value; var info = document.getElementById("geocoder_info"); geocoder.geocode( {'address': address},function(results, status) { info.innerHTML = results[0].formatted_address + "<br>" + results[0].geometry.location; if (status == google.maps.GeocoderStatus.OK) { Slat = results[0].geometry.location.lat(); Slng = results[0].geometry.location.lng(); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert("次の理由でジオコーディングに失敗しました: " + status); } }); var address2 = document.getElementById("goal").value; var info2 = document.getElementById("geocoder_info2"); geocoder.geocode( { 'address': address2},function(results2, status2) { info2.innerHTML = results2[0].formatted_address + "<br>" + results2[0].geometry.location; if (status2 == google.maps.GeocoderStatus.OK) { Glat = results2[0].geometry.location.lat(); Glng = results2[0].geometry.location.lng(); var marker2 = new google.maps.Marker({ map: map, position: results2[0].geometry.location }); } else { alert("次の理由でジオコーディングに失敗しました: " + status); } }); latCenter = ((results[0].geometry.location.lat()) + (results2[0].geometry.location.lat()))/2; lngCenter = ((results[0].geometry.location.lng()) + (results2[0].geometry.location.lng()))/2; map.setCenter(latCenter,lngCenter); }

  • googleマップAPIにて緯度経度に加えてズームレベルを取得する方法がわかりません

    こんにちは、いつもお世話になっています <head> <script src="http://maps.google.com/maps?file=api&v=2&key=googleマップキー" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //<![CDATA[ function onGMapClick(overlay, point) { if (point) { var request = GXmlHttp.create(); var url = "/php/date.php" + "?x=" + point.x + "&y=" + point.y; request.open("GET", url, true); request.onreadystatechange = function() { if (request.readyState == 4) { var xmlDoc = request.responseXML; var xy = xmlDoc.documentElement.getElementsByTagName("xy"); document.getElementById("show_x").innerHTML = xy[0].getAttribute("x"); document.getElementById("show_y").innerHTML = xy[0].getAttribute("y"); } } request.send(null); } } function onLoad() { var map = new GMap2(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(36.03, 139.15), 13); GEvent.addListener(map, 'click', onGMapClick); } //]]> </script> </head> <body onload="onLoad()"> <div id="map" style="width:450px; height:450px"></div> <P>x : <div id="show_x"></div></P> <P>y : <div id="show_y"></div></P> </body> http://www.geekpage.jp/web/google-maps-api/gxmlhttp-5.php ここのサイトのソースを参考にgoogleマップAPIを利用したサイトを制作しています 経度、緯度の取得はできたのですが、残りのズームレベルの取得がいろいろ試してみましたができません このソースで「経度」「緯度」「ズームレベル」を取得して、変数urlに格納された/php/date.phpにデータを渡したいのですが、現在のズームレベルですら取得できない有様です どなたか教えていただけないでしょうか

  • Google maps API V3 ルート案内

    2点間距離を測定するGoogle maps サンプル（下記）を入手したのですが、次のように手直ししたいと考えています。ご教授の程、よろしくお願い致します。 (1)出発地は決まっているので、「◯◯から」の◯◯の表示は必要ありません。 (2)そのかわり、出発地のポイントと名称をあらかじめ表示させておきたい。 (3)目的地の住所を入力して検索するだけで案内が表示される。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"> <title>Google Maps API v3 Directions Draggable</title> <style type="text/css"> body {background-color: #B7C4C8; font-family: Arial, "MS PGothic"; text-align: center; font-size: small;} div#wrapper {width: 728px; margin: 0 auto; padding: 0; text-align: left;} </style> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var rendererOptions = {draggable: true}; var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); var directionsService = new google.maps.DirectionsService(); var map; var aqui = new google.maps.LatLng(35.69, 139.71); function initialize() { var myOptions = {zoom: 10, center: aqui, mapTypeId: google.maps.MapTypeId.ROADMAP}; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); directionsDisplay.setMap(map); directionsDisplay.setPanel(document.getElementById("directionsPanel")); google.maps.event.addListener(directionsDisplay, "directions_changed", function() { computeTotalDistance(directionsDisplay.directions); }); calcRoute(); } function calcRoute(fromAddress, toAddress) { var selectedMode = document.getElementById("mode").value; var fromAddress = document.getElementById("fromAddress").value; var toAddress = document.getElementById("toAddress").value; var request = {origin: fromAddress, destination: toAddress, travelMode: google.maps.DirectionsTravelMode[selectedMode]}; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } }); } function computeTotalDistance(result) { var total = 0; var myroute = result.routes[0]; for (i = 0; i < myroute.legs.length; i++) { total += myroute.legs[i].distance.value; } total = total / 1000. document.getElementById("total").innerHTML = total + " km"; } </script> </head> <body onload="initialize()"> <div id="wrapper"> <div style="margin-bottom: 8px;"> <strong>Directions: モード＝</strong> <select id="mode" onchange="calcRoute();"> <option value="DRIVING">車</option> <option value="WALKING">歩き</option> </select> <form action="#" onsubmit="calcRoute(this.fromAddress.value, this.toAddress.value); return false"> <input type="text" size="12" id="fromAddress" name="from" value=""/>から&nbsp;～&nbsp; <input type="text" size="12" id="toAddress" name="to" value="" />へのルートを&nbsp; <input name="submit" type="submit" value="検索" />&nbsp;またはドラッグ＆ドロップ </form> </div> <div id="map_canvas" style="float:left; width:500px; height:400px;"></div> <div id="directionsPanel" style="margin-left: 505px; width:223px; height: 400px; overflow: auto; background-color: #FFF;"><p>距離: <span id="total"></span></p></div> <div style="margin-top: 12px;"> <script type="text/javascript"><!-- google_ad_client = "ca-pub-9624687380026797"; /* 728-90Big */ google_ad_slot = "2458118948"; google_ad_width = 728; google_ad_height = 90; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> <!--/ #wrapper--></div> <script type="text/javascript"> <!-- var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-1220676-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.src = 'http://www.google-analytics.com/ga.js'; ga.setAttribute('async', 'true'); document.documentElement.firstChild.appendChild(ga); })(); // --> </script> </body> </html> 以上です。よろしくお願い致します。

  • 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> ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

    • ベストアンサー
    • MySQL
  • google map吹き出し

    下記google mapをスマホで見ると吹き出しが頻繁に出たり消えたりして見づらいのですが 吹き出しは出しっぱなしでカウントダウンのみ動かす方法ありませんか。 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css"> div#map-canvas { position: absolute; width: 100%; height: 100%; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> var geocoder, map, marker, infoWindow; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(35.710058, 139.810718); var mapDiv = document.getElementById('map-canvas'); var myOptions = { center: latlng, zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(mapDiv, myOptions); google.maps.event.addListener(map, 'click', function(e) { marker = new google.maps.Marker({ position: e.latLng, map: map, draggable: true, title: "Click Me!" }); if(infoWindow) infoWindow.close(); infoWindow = new google.maps.InfoWindow(); var targetDate = Date.parse('2014/07/07 00:00:00'); setInterval ( function() { var now = new Date().getTime(); var diff = targetDate - now; var day = Math.floor ( diff / 86400000 ); diff -= day * 86400000; var hour = Math.floor ( diff / 3600000 ); diff -= hour * 3600000; var minute = Math.floor ( diff / 60000 ); diff -= minute * 60000; var second = Math.floor ( diff / 1000 ); if(infoWindow) infoWindow.setContent ( '七夕まで' + day + '日' + hour + '時間' + minute + '分' + second + '秒' ); },1000); infoWindow.open(map, marker); map.setCenter(e.latLng); }); }; google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html>

    • ベストアンサー
    • AJAX

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する