- 締切済み
GoogleMpsAPIのjson.jsによる読み込み
GoogleMapsAPIの勉強をしています、プログラミング初心者です。 「GoogleMapsAPI徹底活用ガイド」という解説本を参考にしています。 中心位置情報をJSON形式で別ファイルに記述したものをjavascriptプログラムで読み込み、実行、googlemapに反映させたいのですが、うまくいきません。 JSON in JavaScript のページ（http://www.json.org/js.html）のリンクからJSON処理ライブラリjson.jsのスクリプトをコピー、私のサーバー内に保存し、 <head></head>内で <script type="text/javascript" src="json.js" charset="utf-8"></script> とsrc属性にjson.jsを指定、 javascriptのfunciton {}内で、 GDownloadUrl( "center.json", mySetCenter ); function mySetCenter(data) { var obj = data.parseJSON(); map.setCenter( new GLatLng(obj.lat, obj.lng), obj.zoom ); } としています。 center.jsonというのが、JSON形式の位置情報ファイルです。 解説本のサンプルを使用しているので、スクリプトの間違いではないと思います。 json.jsを使わず、javascriptでeval関数を使う場合は、正常にJSON形式の中心位置情報のデータが読み込まれ、地図が表示されます。 おそらく、json.jsのダウンロード方法やサーバへの配置方法などが間違っているではないかと思いますが、参考になる資料がなく困っています。 どなたかご教授お願いいたします。
- astudent
- お礼率0% (0/1)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- shiningsun
- ベストアンサー率50% (7/14)
http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter03/006/index.html JSONデータの取り扱いについては上記のページが参考になるかと思います。
関連するQ&A
- json.jsのparseJSONメソッドについて
json.jsのparseJSONメソッドで読み込み Cをはずして、 obj.Aは「私」 obj.Bは「2038」 でアクセスできますが、 Cが間違っているためかJavascriptが動作しません。 ＪＳＯＮは文字列、数値、配列などオブジェクトを値として持てる？はずなのに、エラーになるのは何が原因でしょうか？ { "A" : "私", "B" : 2038, "C" : function(){document.bgColor = 'yellow';} }
- ベストアンサー
- JavaScript
- JSONを使いページから他ページへ情報を渡す方法
同じレイアウトのページが数百ページあり、各ページの一部分を1つのページにまとめる方法を知りたいです。 JSONでできるようなので、サイトを参考にしながら作ってみました。 各ページの集めたい部分をオブジェクトで指定してJSONのテキストへ変換し、 集めたページにJSONを読み込み、変数に代入したJSONの情報を取得して表示を試みました。 しかし、やってみるとページ間で同じデータを扱うのが上手にできませんでした。 アドバイスを頂けないでしょうか。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>集めたページ</title> <script type="text/javascript" src="js/json.js"></script> </head> <body onload="jsontop()"> <div> <ul> <li><a href=""><span></span></a></li> <li><img src=""></li> </ul> ・・・・・・ULがページ数の数だけ続く </div> </body> </html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>各ページのサンプル</title> <script type="text/javascript" src="js/json.js"></script> </head> <body onload="json(1)"> <h1>1ページ目</h1> <h2>タイトル</h2> <p>複数ページある中の1ページ目です。このページの一部分を他のページに利用したいです。</p> <dl> <dt>サンプル画像</dt> <dd><img src="img/sample01.jpg"></dd> </dl> </body> </html> -----json.js------ function json(no){ var obj = { h1: no+"ページ目", imgsrc: "img/sample0"+no+".jpg", thisurl:"page01/sample01.html" }; var str = JSON.stringify(obj); } function jsontop(){ JSON.parse(str); var tagimg = document.getElementsByTagName("img"); var tagspan = document.getElementsByTagName("span"); var tagli1 = document.getElementsByTagName("li")[0]; tagspan[0].innerHTML = obj.h1; //１ページ目のタイトルを取得し置き換える var img = new Image(); tagimg[0].src = obj.imgsrc; //１ページ目の画像のパスを取得し置き換える tagli1.href = obj.thisurl; //１ページ目のURLをアンカーに設定 }
- ベストアンサー
- JavaScript
- $.getJSONにJSON.stringifyを
$.getJSONに、JSON.stringifyした結果を指定したいのですが、どうすればよいでしょうか？ ■現状 ・コンソールにJSONは出力されているのですが、$.getJSONでこのファイルを指定しても、画面真っ白です ▼index.html <script type="text/javascript" src="hoge.json"></script> <script type="text/javascript"> $.getJSON('hoge.json', function(data) { ▼hoge.json var obj =([ [略], ]); var json_text = JSON.stringify(obj); // テスト出力 console.log(json_text); ■質問 ・$.getJSONにこの出力結果(json_text)を指定するためには、どうすれば良いでしょうか？ ・一旦ファイル出力しなければいけないのでしょうか？ ・どうやるのでしょうか？ ・AJAXでサーバ側へデータを渡してファイル出力した後、$.getJSONでその出力したファイルを指定するしかない？
- ベストアンサー
- JavaScript
- jQueryで配列JSONの読み込み方法
phpからの返り値data（json形式）を表示したいのですがうまくいきません。 コンソール上でjsonを取得できているようなのですが、値を表示しようとするとundifinedと表示されてしまいます。 どのように書き換えれば動作するようになるのでしょうか？ よろしくおねがいします！ -------------------------------------------------------- ■ receive.js ■ -------------------------------------------------------- $.ajax({ type: "POST", url: "receive.php", data: { "id": 3 }, success: function(data){ console.log(data); alert(data.time); //ここで「undifined」のエラーが出ます！！ $("#go").after(data.id); //ここは何も表示されません。 $("#str").html('準備完了'); }, error: function(data){ $("#str").html('準備未完了'); }, }); -------------------------------------------------------- ■ receive.php ■ -------------------------------------------------------- <?php require 'dbconnect.php';//dbconnectを呼び出し $data = array(); $id = $_POST['id']; $sql = " SELECT * FROM sample_table WHERE id = " . $id; $result = mysqli_query($connect,$sql) or die("クエリの送信に失敗しました。<br />SQL:".$sql); while ($row = mysqli_fetch_array($result)) { $data[] = $row; } mysqli_close($connect) or die("MySQL切断に失敗しました。"); // MySQLへの接続を閉じる header('Content-Type: application/json; charset=utf-8'); echo json_encode($data); ?> -------------------------------------------------------- ■ index.html ■ -------------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script> <title>PHP * jQuery * ajax * MySQL</title> <script type="text/javascript" src="receive.js"></script> <script type="text/javascript" src="post.js"></script> </head> <body> <div class="ltd-form"> <form id="inquiry-form" method="get"> <fieldset> ・ ・ ・ </fieldset> <div id="go"></div> </form> </div> <div id="str"></div> </body> </html> -------------------------------------------------------- ■ 実行後のChromeのコンソール ■ -------------------------------------------------------- 0: Object 0: "3" 1: "1423789247" 2: "96" 3: "963" data1: "96" data2: "963" id: "3" time: "1423789247" --------------------------------------
- ベストアンサー
- JavaScript
- jQuery.jsを使ったhtml外部読み込み
教えてください。 現在Jqueryを使用して外部htmlを読み込ませようとしていますが、 うまくいきません・・・ ■本体html <head> <script src="js/jquery-1.8.3.min.js"></script> </head> <body> <script type="text/javascript" src="sample.js"></scrip> <div id="sample"></div> </body> ■sample.js // JavaScript Document $(function(){ $("#sample").load("sample.html"); }); ■読み込ませるsample.html 特に設定なし このような感じですが、全然読み込めません。。。 javascriptを外部リンクにしているのは、読み込むhtmlが複数ある為、 headの見栄えが悪くなるからという個人的な意見です・・・ 済みませんがお知恵をお貸しください！！
- 締切済み
- JavaScript
- shadowbox.jsについて
shadowbox.jsとslimbox.jsを併用したいと考えています。 もともとshadowbox.jsをPrototypeで使用し、HTMLを呼び出すのに使用していたのですが、 画像のライトボックス表示にslimbox.js（jquery使用）を使いたいと思い、 両方とも記述したらshadowboxの方が正常に動作しなくなりました。 何か解決策はありますでしょうか。 非常に困っています。お願いします。 ちなみに以下の様なコードをhead内に記述しております。 <script src="../../common/js/prototype.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="../../common/js/shadowbox/shadowbox.css"> <script src="../../common/js/shadowbox/shadowbox.js" type="text/javascript"></script> <script type="text/javascript">Shadowbox.init();</script> <link rel="stylesheet" type="text/css" href="shadowbox.css"> <script type="text/javascript" src="shadowbox.js"></script> <script type="text/javascript">Shadowbox.init();</script> </script> <link href="../../common/css/slimbox/slimbox.css" type="text/css" rel="stylesheet" media="screen" /> <script type="text/javascript" src="../../common/js/jquery.js"></script> <script type="text/javascript" src="../../common/js/slimbox.js"></script> <script type="text/javascript"> //slimbox $(document).ready(function() { $('a[rel*=lightbox]').slimbox(); }); </script>
- ベストアンサー
- CSS
- scrollsmoothly.jsが動かない
質問させていただきます。 下記のscrollsmoothly.jsを設定したいのですが、どうしても うまく動作しません。 http://d.hatena.ne.jp/KAZUMiX/20080418/scrollsmoothly ソースコードをDLして jsフォルダに入れました。 そして <head>～</head> の間に <script type="text/javascript" src="js/scrollsmoothly.js"></script> と記述しました。 そして <body> <div id="head"> ～ <a href="#head">topへ戻る</a> </body> と記述しました。 何か間違っていますでしょうか？ よろしくお願いします。
- ベストアンサー
- JavaScript
- *.js ファイルの読み込みについて
お世話になります。 *.jsファイルを読み込むのに <script type='text/javascript' src='abc.js'></script> とすれば、できます。 これを、 <script type="text/JavaScript"> <!-- src='abc.js; ・・・・・・・・・ ここにabc.js内の関数などを記載 ・・・・・・・・・ //--> </script> と、いう形にできないものでしょうか。 このままだと、abc.jsは読み込まれません。 よろしくお願いします。
- ベストアンサー
- JavaScript
- jQueryで質問です。
jQueryで質問です。 オブジェクトA、Bがあるとします。 Aをドラッグすると、mousedownかdragstartの段階で要素がBに置き換わってドラッグさせるような動きは可能でしょうか。 作成中のソースを記載します。 <html> <head> <title>test</title> <script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript" src="./ui/jquery.ui.core.js"></script> <script type="text/javascript" src="./ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="./ui/jquery.ui.mouse.js"></script> <script type="text/javascript" src="./ui/jquery.ui.draggable.js"></script> <script type="text/javascript" src="./ui/jquery.ui.droppable.js"></script> <script type="text/javascript"> $(function(){ obj1 = $("#box"); obj2 = $('<div style="width:200px;height:200px;background:red;">B</div>'); obj1 .mousedown( function(){ obj1.replaceWith(obj2); obj2.draggable(); } ); }); </script> </head> <body> <div style="width:200px; height:100px; background: #cccccc;" id="box">A</div> </body> </html> これだと、Aのドラッグを一度解除して、Bをドラッグすると上手くいきますが、1回のモーションでBをドラッグさせたいのです。 宜しくお願いします。
- ベストアンサー
- JavaScript
- <SCRIPT src="css.js">の記述位置
</head>と<body>の間に <SCRIPT LANGUAGE="javascript"src="css.js"></SCRIPT> を書くのは文法的に問題ありませんか？
- ベストアンサー
- JavaScript
