json_decodeで戻り値がNULLになる問題の解決方法

このQ&Aのポイント
  • json_decodeを使って取得したデータがNULLになる現象についての質問です。
  • google maps apiを利用して住所からジオコーディングする際に、座標変換ができずに困っています。
  • 質問のソースコードを示しながら、何が間違っているのか教えていただきたいです。
回答を見る
  • ベストアンサー

json_decode戻り値がどうしてもNULL

json_decodeで戻り値がnullになり、どうも先に進めませんので、どちら様か叱咤・ご教示ください。 google maps api を利用して、住所(本来は日本語文字列住所)からジオコーディングして座標を取得し、google-map 上にプロットするようなロジックを考えておりましたが、住所からの座標変換が出来ずに困っております。 Aの部分はたぶん問題なさそうです。 理由としては、そこにあるURL文字列を直打ちした際にできる jsonファイルを保存し、その中身をみると、希望通りの座標データを含む住所データが格納されていました。 Bの部分でそれを取り出したいのですが、文字化けや妙なエラーになるのならまだしも、何もエラーにならず、しかしながら戻り値が何も入っていないように見受けられます。 このような現象をググったところ、よくありがちな現象ではあるそうですが、UTF8に気をつけなさいとか、UTF8にエンコーディングしなさいとか、DOMがどうだとか、いろいろ試行錯誤しましたが、いずれもNULLで返ってきます。 サーバは外部のレンタルサーバ(firstserver) PHP Version 5.3.19 DSO版 Apache2.2系 と記載がありましたので、その通りだと思われます。 何か根本的に間違っているのでしょうか。 その根本が分かっていないのは自他ともに認めるところではありますが、どちら様か、何かご存知でしたら、是非ご教示くださいませ。 ------ 問題のソース ----- <?php //header("Content-type: text/html; charset=utf-8"); $address = 'tokyo'; //A $geocode=file_get_contents('http://maps.google.com/maps/api/geocode/json?address='.urlencode($address).'&sensor=false'); //B $output= json_decode($geocode); //ここでjson_last_error()を確認したが、ここではエラーは一切出ない if($output==NULL){ print("null<br>"); exit; } $lat = $output->results[0]->geometry->location->lat; $lng = $output->results[0]->geometry->location->lng; echo $lat.','.$lng; ?> ------------ 表示結果 output:[] null 上記URLを直打ちした際に出来たjsonファイル(参考) *********************** { "results" : [ { "address_components" : [ { "long_name" : "東京駅", "short_name" : "東京駅", "types" : [ "train_station", "transit_station", "establishment" ] }, { "long_name" : "東京都", "short_name" : "東京都", "types" : [ "administrative_area_level_1", "political" ] }, { "long_name" : "日本", "short_name" : "JP", "types" : [ "country", "political" ] } ], "formatted_address" : "日本, 東京駅(東京)", "geometry" : { "location" : { "lat" : 35.681382, "lng" : 139.766084 }, "location_type" : "APPROXIMATE", "viewport" : { "northeast" : { "lat" : 35.6827309802915, "lng" : 139.7674329802915 }, "southwest" : { "lat" : 35.6800330197085, "lng" : 139.7647350197085 } } }, "place_id" : "ChIJC3Cf2PuLGGARxuYMi4MlMEQ", "types" : [ "train_station", "transit_station", "establishment" ] } ], "status" : "OK" } ***********************

  • PHP
  • 回答数2
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

まず$geocodeの中身はどうなってるか確かめた? http://php.net/manual/ja/function.file-get-contents.php fopen wrappersが有効じゃないとURLでは取得できないけど設定はどうなってる?

sakatsuku96
質問者

お礼

おふた方にご回答いただき、$geocodeの中身を確認せよ、とのことで、確かにそこを怠っておりました。確かに、$geocode自体がnullでございました。なんともお恥ずかしい限りです。 長年プログラマーをやっておりますが、私自身がよく陥る先入観なるもので、時間的余裕がなかったせいか、確認すべきところを怠っておりました。ご指摘ありがとうございました。 fopen wrappers のphp.iniパラメータも同様でした。 本ロジックがまったく動かないので、他のサーバにソースを移してそちらでも動作確認等々をいろいろい実施していたんですが、その他サーバではパラメータがONになっていたのを目にしたので、当該サーバもONになっている、、、と勘違いしておりました。 確認したところ、当該レンタルサーバではデフォルトOffでした。 大変申し訳ありませんでした。 レンタルサーバなので、直接 php.ini を編集できませんが、htaccess での対応が可能と記載があったため、そちらで対応しようと思っております。 まったくお恥ずかしい限りで、こんなことにわざわざご回答いただいたことに、申し訳ないという気持ちと、感謝の意を表します。 ご回答、ありがとうございました。

その他の回答 (1)

  • pringlez
  • ベストアンサー率36% (598/1630)
回答No.2

「根本が分かっていない」とのことですが、問題が起きたときに何をすべきか全く分かっていないことが、そもそもの問題だと思います。まずやるべきことは問題が起こっている場所の特定です。 >Aの部分はたぶん問題なさそうです。 >理由としては、そこにあるURL文字列を直打ちした際にできる jsonファイルを保存し、 >その中身をみると、希望通りの座標データを含む住所データが格納されていました。 ずれています。そんな予想でなく、実行結果で確かめます。 普通ならまず、AとBの間で print($geocode); と書きます。 そうすることで「たぶん問題なさそう」という予想レベルから「間違いなく問題なさそう」かそもそもその時点でおかしいかをはっきりさせます。

sakatsuku96
質問者

お礼

まったく、ご指摘のとおりでございました。 "そもそも" の部分をもっと冷静に調べるべきでした。 ご指摘のとおり、$geocode 自体がnullでした。大変失礼いたしました。 長年プログラマーをやっておりますが、よく "ここは大丈夫なはず!?" という先入観で、不具合を見落とす場面が多々あり、今回もそのようでした。時間的に余裕がなくて、思わずOKWaveを利用してしまいましたが、もっと冷静になるべきでした。 ご回答ありがとうございました。 これで先に進めます。

関連するQ&A

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

    google maps APIで2箇所の住所を入力し、ジオコーディングし、マーカーを表示させ、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> 地点1<input id="start" type="textbox" size="50"><br> 地点2<input id="goal" type="textbox" size="50"> <input type="button" value="地図表示" onclick="codeAddress()"> </div> <div id="map_canvas" style="height:80%"></div> <br>地点1 <div id="geocoder_info" style="height:10%"></div> 地点2 <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); }

  • Googlemapb api 複数のマーカー表示に

    基礎的なことかもしれませんが、結構調べたりしても分からなかったので、教えてほしいです。 Googlemap api を使った複数のマーカー表示を$getJSON(jQuery)を使用しようして表示させたいのですが、表示できません。 どこがおかしいか教えてください。 【HTML】 1.<!DOCTYPE html> 2.<html> 3.<head> 4.<meta charset="UTF-8"> 5.<title>map</title> 6.<style type="text/css"> 7.html,body,#map { 8.height: 100%; 9.} 10.</style> 11.</head> 12.<body> 13.<div id="map"></div> 14.<script type="text/javascript" src="map.js"></script> 15.<script type="text/javascript" src="jquery-3.6.0.min.js"></script> 16.<script async defer 17.src="https://maps.googleapis.com/maps/api/js?key=【APIキー】&callback=initMap"> 18.</script> 19.</body> 20.</html> 【JavaScript】 1.var map; 2.var marker = []; 3.var data = []; 4.var center = {lat: 36.72073,lng: 137.27112}; 5.function initMap() {//地図の作成 6.map = new google.maps.Map(document.getElementById('map'), { // #mapに地図を埋め込む 7. center: center,// 地図の中心を指定 8. zoom: 15 // 地図のズームを指定 9. }); 10. $.getJSON("aaaaa.json", function(json){ 11. for (var i = 0; i <= json.length-1; i++) { 12. data.push( 13. { 14. 'name': json[i].name, 15. 'lat': json[i].lat, 16. 'lng': json[i].lng 17 }); 18 }; 19. for (var i = 0; i < data.length; i++) { 20. markerLatLng = {lat: data[i]['lat'], lng: data[i]['lng']}; 21. marker[i] = new google.maps.Marker({ //マーカーの追加 22. position: markerLatLng,//マーカーを立てる位置を指定 23. map: map//マーカーをたてる地図を指定 24. }); 25. } 26 });//jsonの閉じ 27.} 【JSON】 [ { "name": "名古屋駅", "lat": 35.170897, "lng": 136.881558 }, { "name": "大名古屋ビルヂング", "lat": 35.172311, "lng": 136.884568 }, { "name": "国際センター駅", "lat": 35.172038, "lng": 136.887701 } ]

  • 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”の形式なら表示できないです。 全くの新人なんですが、ご指導をお待ちしております。ありがとうございます。

  • sprintf関数での%Sが分かりません。

    質問の背景は下記でのsprintf関数での%Sについてです。 https://developers.google.com/maps/articles/phpsqlsearch_v3?hl=ja#createmap 上記での流れは、添付画像のように、 ・住所を入力することで 緯度経度が算出され、(center.lat() center.lng()) ・また、半径('radiusSelect)が選択(この場合は20Km)されることで、 ・選択住所(center.lat() center.lng())から選択半径内の登録店舗がgooglemapに表示される。 というものです。 (1)<「phpsqlsearch_genxml.php」に選択値を渡す。>(62行目) var radius = document.getElementById('radiusSelect').value; var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius; (※ 例えばcenter.lat()を緯度37 center.lng()を経度-122とします) (2)<「phpsqlsearch_genxml.php」において、該当する店舗を見つけ出す。> // Get parameters from URL $center_lat = $_GET["lat"]; $center_lng = $_GET["lng"]; $radius = $_GET["radius"];    ・・・・・・ // Search the rows in the markers table $query = sprintf("SELECT address, name, lat, lng, ( 6371 * acos( cos( radians('%s') ) * cos( radians( lat ) ) * cos( radians( lng ) - radians('%s') ) + sin( radians('%s') ) * sin( radians( lat ) ) ) ) AS distance FROM markers HAVING distance < '%s' ORDER BY distance LIMIT 0 , 200", mysql_real_escape_string($center_lat), mysql_real_escape_string($center_lng), mysql_real_escape_string($center_lat), mysql_real_escape_string($radius)); $result = mysql_query($query); (※ ( 6371 * acos( cos( radians('%s') ) * cos( radians( lat ) ) * cos( radians( lng ) - radians('%s') ) + sin( radians('%s') ) * sin( radians( lat )は中心地からの半径を求める公式) 上記(2)で書式指定(string)の%Sが使用されていますが、そこには下記数値文字が入ります。 SELECT id, ( 3959 * acos( cos( radians(37) ) * cos( radians( lat ) ) * cos( radians( lng ) - radians(-122) ) + sin( radians(37) ) * sin( radians( lat ) ) ) ) AS distance FROM markers HAVING distance < 20 同じ%Sに対してそれぞれ、37・-122・20の異なった数値文字が対応される仕組みが分かりません。 ご教示お願いいたします。

  • グーグルマップ v3で複数の住所からピンを立てたい

    現在、googlemap v3で複数の住所からそれぞれのピンを立てたいと 考えております。 下記コードにて実行しましたが、住所とウィンドーの中身が ずれて表示されてしまい困っております。 例)東京にピンが立っているがウィンドーの中身が広島など どなたかご教授ください。 よろしくお願いいたします。 -----js------ var data = new Array(); data.push({position:'東京都',content:'東京都'}); data.push({position:'広島県',content:'<strong>広島県</strong><p>aaaaaaaaaa</p>'}); data.push({position:'沖縄',content:'<strong>沖縄</strong><p>aaaaaaaaaa</p>'}); data.push({position:'北海道',content:'<strong>北海道</strong><p>aaaaaaaaaa</p>'}); var geocoder = new google.maps.Geocoder(),icon = ''; function gmap(address,path){ icon = path; geocoder.geocode({'address':address}, function(result,status){ if(status == google.maps.GeocoderStatus.OK){ var latlng = result[0].geometry.location; var mapdiv = document.getElementById('map'); var myOptions = { zoom:10, center:new google.maps.LatLng(latlng.lat(),latlng.lng()), mapTypeId:google.maps.MapTypeId.ROADMAP, scaleControl:true, mapTypeControl:true }; var map = new google.maps.Map(mapdiv,myOptions); moreGmap(map); } }); } var j = 0; function moreGmap(map){ var image = new google.maps.MarkerImage(icon,new google.maps.Size(32,50),new google.maps.Point(0,0),new google.maps.Point(16,50)); for(var i in data){ geocoder.geocode({'address':data[i].position},function(result,status){ if(status == google.maps.GeocoderStatus.OK){ var latlng = result[0].geometry.location; var addlatlng = new google.maps.LatLng(latlng.lat(),latlng.lng()); var marker = new google.maps.Marker({ position:addlatlng, map:map, icon:image, title:data[j].position }); var cont = data[j].content; var infoWin = new google.maps.InfoWindow({ content:cont, size:new google.maps.Size(50,50) }); infoWin.open(map,marker); google.maps.event.addListener(marker,'click',function(){ infoWin.open(map,marker); }); j++; } }); } j = 0; }

  • クエリ検索でのWHERE句 HAVING句併用

    (1)元ソースコードに「WHERE category = '%s'」を追加しましたが、クエリ検索でのWHERE句 HAVING句の併用がうまくいきません。 firefoxの要素調査では、ソース改造前には出なかった「HTML ドキュメントの文字エンコーディングが宣言されていません。」のエラーメッセージが出ます。(phpのソースなのにHTMLのエラー?) 原因が分かりましたらお教え願いたく宜しくお願い致します。 元ソースコードに「WHERE category = '%s'」を追加した状態。 // Search the rows in the markers table $query = sprintf("SELECT address, name, lat, lng, category, ( 6371 * acos( cos( radians('%s') ) * cos( radians( lat ) ) * cos( radians( lng ) - radians('%s') ) + sin( radians('%s') ) * sin( radians( lat ) ) ) ) AS distance FROM markers WHERE category = '%s' GROUP BY distance HAVING distance < '%s' ORDER BY distance LIMIT 0 , 200", mysql_real_escape_string($center_lat), mysql_real_escape_string($center_lng), mysql_real_escape_string($center_lat), mysql_real_escape_string($category)), mysql_real_escape_string($radius)); $result = mysql_query($query); ※ ( 6371 * acos( cos( radians('%s') ) * cos( radians( lat ) ) * cos( radians( lng ) - radians('%s') ) + sin( radians('%s') ) * sin( radians( lat ) ) ) ) ・・・は入力された住所の緯度経度($center_lat $center_lng)から店(複数任意登録)までの距離を計算する公式 <質問の背景> https://developers.google.com/maps/articles/phpsqlsearch_v3?hl=ja#createmap でselect要素にcategory(店の種類:小売店・食事など)を追加しようと思っています。 上記質問は上記サイトでの「phpsqlsearch_genxml.php」の$query の部分です。 なお、「phpsqlsearch_genxml.php」のソースは下記のとおりです。 <?php require("phpsqlsearch_dbinfo.php"); // Get parameters from URL $center_lat = $_GET["lat"]; $center_lng = $_GET["lng"]; $radius = $_GET["radius"]; // Start XML file, create parent node $dom = new DOMDocument("1.0"); $node = $dom->createElement("markers"); $parnode = $dom->appendChild($node); // Opens a connection to a mySQL server $connection=mysql_connect (localhost, $username, $password); if (!$connection) { die("Not connected : " . mysql_error()); } // Set the active mySQL database $db_selected = mysql_select_db($database, $connection); if (!$db_selected) { die ("Can\'t use db : " . mysql_error()); } // Search the rows in the markers table $query = sprintf("SELECT address, name, lat, lng, ( 3959 * acos( cos( radians('%s') ) * cos( radians( lat ) ) * cos( radians( lng ) - radians('%s') ) + sin( radians('%s') ) * sin( radians( lat ) ) ) ) AS distance FROM markers HAVING distance < '%s' ORDER BY distance LIMIT 0 , 20", mysql_real_escape_string($center_lat), mysql_real_escape_string($center_lng), mysql_real_escape_string($center_lat), mysql_real_escape_string($radius)); $result = mysql_query($query); if (!$result) { die("Invalid query: " . mysql_error()); } header("Content-type: text/xml"); // Iterate through the rows, adding XML nodes for each while ($row = @mysql_fetch_assoc($result)){ $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("distance", $row['distance']); } echo $dom->saveXML(); ?> (2)上記のエラー原因探すために、都度、プログラム途中での変数の値を表示できれば(javascriptの変数var  PHPの変数$の値など)と思いますが、何か方法はあるものでしょうか。 (phpのflushなどがあるみたいですが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: "千葉県佐倉市ユーカリが丘4-575-22" }; 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>

  • jquery ui mapについて

    jquery ui mapを使って以下のようなソースで マーカーを表示させ、MarkerClustererでマーカをまとめています。 $('#map_canvas').gmap({ 'center': new google.maps.LatLng(35.873686,139.657075)}).bind('init', function(evt, map) { var data = new Array(); data.push({lat:'35.681382', lng:'139.766084',name:'東京駅',images:'http://google-maps-icons.googlecode.com/files/friends.png'}); data.push({lat:'35.684801', lng:'139.766086',name:'大手町駅',images:'http://google-maps-icons.googlecode.com/files/friends.png'}); for ( var i = 0; i < data.length; i++ ) { $('#map_canvas').gmap('addMarker', { 'icon': data[i].images,'position': new google.maps.LatLng(data[i].lat, data[i].lng) } ).click(function() { $('#map_canvas').gmap('openInfoWindow', { 'content' : data[i].name }); }); } $('#map_canvas').gmap('set', 'MarkerClusterer', new MarkerClusterer(map, $(this).gmap('get', 'markers'))); }); マーカーの緯度経度とインフォウィンドウの内容を配列にしています。 配列の緯度経度からマーカーは表示できたのですが、 マーカーをクリックすると、インフォウィンドウが開かず、「undefined」となります。 わかる方、ご教授宜しくお願いいたします。

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

  • Google map JSからPHPに渡す変数

    Google map API v3とPHP + Mysql + JavaScriptを使って地図にマーカーを表示させるコードを書いて、どうしても上手くいかないです、知識をお持ちの方、ご教授いただけないでしょうか。 自サーバにPHP+Mysqlに非同期通信の位置情報を取得して、地図にマーカーを表示させるというものです。グーグルAPIの部分はサンプルも豊富で出来たのですが、初歩のチェックボックスにチェックが入るとonClickかonChangeでGETを渡したURLからPHPでXMLやJSONを取得したいのですが、変数に値を持たすところでJavaScriptの記述が出来なくてundefinedが返されてきます。 【ソース】 <htmll> <head> <script type="text/javascript"> ・ ・ グーグルマップAPI v3との処理 ・ ・ function ck(){ var total = 0; if (document.getElementById('shop').checked) { ans = 'shop'; } } var ans = ans; var url = 'sql.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius + '&shop=' + ans; document.getElementById('shop').innerHTML= url; </script> </head> <body> <form id="form1"> <input type="checkbox" id="shop" name="shop" value="shop" onclick="ck()">お店<br> </form> </body> </html> 表示されるのは sql.php?lat=35.004442&lng=135.75667120000003&radius=0.65&ans=undefined です。 function ck()のansをどのようにして渡せばよいのでしょうか。 プログラムにお詳しい方、どうぞご教授の程、宜しくお願いします。