質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.47%

  • PHP

    24510questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    20935questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • MySQL

    7133questions

    MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

  • Google マップ

    431questions

    Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

google maps でのdownloadUrlで不明なところあります。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 696

dreamers

score 21

google maps初心者です。
google maps でのdownloadUrlで不明なところあります。
下記サイトのプログラムを理解しようとしています。

https://developers.google.com/maps/articles/phpsqlajax_v3?hl=ja

表題
Using PHP/MySQL with Google Maps

Ben Appleton, Google Geo Team 
With contributions from Lary Stucker, Maps API Developer 
April 2007
(9年前の記事なので、mysql_select_dbなど現在使用されていないものがありますが、Google MapsでのPHP/MySQL使用方法の概念を理解する。この種の完成された説明記事はこれしかない。との理由でこの記事をベースにGoogle MapsでのPHP/MySQL使用方法の概念を理解しようと務めています。)

下記で「あ」「い」のdownloadUrlの関係は下記でいいのでしょうか。

■「い」関数の変数【url, callback】がそれぞれ「あ」関数の【"phpsqlajax_genxml.php", function(data):~「え」あたり迄?】に対応している。

■「い」関数の「う」以下は「あ」関数に明示されていないが、「い」関数で定義済なので、「あ」関数において「う」以下は機能している。
敢えて、「あ」関数の文末(「え」あたり迄?)以降に「う」以下を記載しても同じ意味を持ち、結果は変わらない。

※「あ」関数の文末(「え」あたり迄?)がよくわかりません。
});
}
などが沢山あり、容易に文末を見分ける方法あるでしょうか。

※ 「あ」関数の前に「い」関数を記載しても結果はかわらないのでしょうか。

<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>PHP/MySQL & Google Maps Example</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"
            type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

   /* 質問と関係ない箇所なのでコメントアウトします。
    var customIcons = {
      restaurant: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
      },
      bar: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
      }
    };
 */
    function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(47.6145, -122.3418),
        zoom: 13,
        mapTypeId: 'roadmap'
      });
      var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP file
      downloadUrl("phpsqlajax_genxml.php", function(data) {   //・・あ
        var xml = data.responseXML;
        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 icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon
          });
          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, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}

    //]]>

  </script>

  </head>

  <body onload="load()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>

</html>
//phpsqlajax_genxml.php

<?php

require("phpsqlajax_dbinfo.php");

// 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());
}

// Select all the rows in the markers table

$query = "SELECT * FROM markers WHERE 1";
$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)){
  // ADD TO XML DOCUMENT NODE
  $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();

?>

<追記質問>
kei344さん、コメントありがとうございます。
ここに、追記させていただきます。
kei344さんのサンプルコード内の"phpsqlajax_genxml.php"を"ph"に短縮し見やすくし、また、比べ易くするため下記の様に書き直してみました。(段落はムシしてます)

データの流れは下記でいいものでしょうか。
(的を得ないことを言っていると思いますが、初心者に免じてお許しください)

①「い」関数の引数「url」に、
値「 "ph"」が代入され、「あ」関数を構成した。

②「い」関数の引数(である関数)
「callback ) {window.setTimeout( function() {callback( url + 'を受け取った!' );} , 1000 );}」
に関数「 function( data ) {console.log( data ); }」が代入され、「あ」関数を構成した。

③「い」関数の引数(である関数)
「callback ) {window.setTimeout( function() {callback( url + 'を受け取った!' );} , 1000 );}」の返り値、つまり→(「phを受け取った」)が、
「あ」関数の「 function( data ) {console.log( data ); }」のプロパティに保持され、「console.log( data )」により、コンソール画面に「phを受け取った」が表示された。

load();

//「あ」関数(downloadUrl以降)
function load() {
downloadUrl( "ph",                      
function( data ) {console.log( data ); } ); 
}

//「い」関数
function 
downloadUrl( url,                         
callback ) {window.setTimeout( function() {callback( url + 'を受け取った!' );} , 1000 );}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/10/22 11:07

    「質問と関係ない箇所なのでコメントアウト」と書かれていますが、コメントアウトすると動きません。注目点の指示はされているので、動くコードを掲載されたほうが良いと思います。

    キャンセル

  • dreamers

    2016/10/22 20:04

    ご指摘、ありがとうございます。

    キャンセル

回答 1

checkベストアンサー

+1

「あ」関数の文末(「え」あたり迄?)がよくわかりません。 

「え」の1行下の「});」です。

容易に文末を見分ける方法あるでしょうか。

コード専用のエディタを使うか、地道に数えるかどちらかでしょう。「javascript エディタ」で検索して使いやすそうなものを探してみてください。


「い」関数の「う」以下は「あ」関数に明示されていないが、「い」関数で定義済なので、「あ」関数において「う」以下は機能している。
敢えて、「あ」関数の文末(「え」あたり迄?)以降に「う」以下を記載しても同じ意味を持ち、結果は変わらない。 

「あ」関数を function( data ) {} と捉えているのか、 downloadUrl( "phpsqlajax_genxml.php", function( data ) {} ); と捉えているのかがわかりませんが、

  1. 「い」関数の箇所で downloadUrl という関数を定義している
  2. 「あ」関数の箇所で定義済みの downloadUrl に引数 phpsqlajax_genxml.php(文字列)と function( data ) {}(関数)を渡している

というコードです。

// 関数の動きを模してみた
load();
function load() {
    downloadUrl( "phpsqlajax_genxml.php", function( data ) { // 「あ」関数
        console.log( data ); // デベロッパーツールに「phpsqlajax_genxml.phpを受け取った!」と出るはず
    } ); // downloadUrlという関数を "phpsqlajax_genxml.php" と function( data ) {} を引数に与えて実行している
}
function downloadUrl( url, callback ) { // 「い」関数
    window.setTimeout( function() {
        // 引数で受け取った関数を、引数で受け取った変数を引数にして実行
        callback( url + 'を受け取った!' );
    } , 1000 );
}

動くサンプル:https://jsfiddle.net/uh57ezfm/1/


【window.setTimeout - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/setTimeout

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01


// こうしても動くよ、という例
load();
function load() {
    downloadUrl( "phpsqlajax_genxml.php", function( data ) { // 「あ」関数
        console.log( data ); // デベロッパーツールに「phpsqlajax_genxml.phpを受け取った!」と出るはず
    } );
    function downloadUrl( url, callback ) { // 「い」関数
        window.setTimeout( function() {
            callback( url + 'を受け取った!' );
        } , 1000 );
    }
}

動くサンプル:https://jsfiddle.net/uh57ezfm/2/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/22 20:01 編集

    kei344さん、ご回答ありがとうございます。
    kei344さんのサンプルコード内の"phpsqlajax_genxml.php"を"ph"に短縮し見やすくし、また、比べ易くするため下記の様に書き直してみました。(文法はムシしてます)

    データの流れは下記でいいものでしょうか。
    (的を得ないことを言っていると思いますが、初心者に免じてお許しください)

    ①「い」関数の変数「url」に、
        値「 "ph"」が代入され、「あ」関数を構成した。
    ②「い」関数の変数(である関数)
        「callback ) {window.setTimeout( function() {callback( url + 'を受け取
               った!' );} , 1000 );}」
        に関数「 function( data ) {console.log( data ); }」が代入され、「あ」関数
                                      を構成した。
    ③「い」関数の変数(である関数)
        「callback ) {window.setTimeout( function() {callback( url + 'を受け取
               った!' );} , 1000 );}」の結果→(「phを受け取った」)が、
         「あ」関数の「 function( data ) {console.log( data ); }」のプロパティに
         保持され、「console.log( data )」により、コンソール画面に
         「phを受け取った」が表示された。

    ```
    load();

    function load() {
    downloadUrl( "ph",                      //「あ」関数
    function( data ) {console.log( data ); } ); 
    }

    function
    downloadUrl( url,                        //「い」関数 
    callback ) {window.setTimeout( function() {callback( url + 'を受け
                  取った!' );} , 1000 );}      
    ```

    キャンセル

  • 2016/10/22 21:42

    コメント欄は狭いので、質問文に追記してください。また、可能な限り文法は守ってください。(文法を守らないプログラムに意味は無いため)

    キャンセル

  • 2016/10/23 12:14

    > ①「い」関数の引数「url」に、
    > 値「 "ph"」が代入され、「あ」関数を構成した。

    「関数を構成」ってなんでしょう。たぶん関数が何かがわかっていないという感じですね。

    > ②「い」関数の引数(である関数)
    > 「callback ) {window.setTimeout( function() {callback( url + 'を受け取った!' );} , 1000 );}」
    > に関数「 function( data ) {console.log( data ); }」が代入され、「あ」関数を構成した。

    そもそも切りどころがおかしいです。

    > 「callback ) {window.setTimeout( function() {callback( url + 'を受け取った!' );} , 1000 );}」の返り値、

    そもそも切りどころがおかしいです。この部分を指して返り値といわれても。

    > 「あ」関数の「 function( data ) {console.log( data ); }」のプロパティに保持され
    引数として渡された関数を保持する「プロパティ」はありません。


    ひとまずWebの情報を読む前に、一度本屋で何冊か本を買って読むと今後の理解が進みます。とりあえず最初はわからないことのほうが多いと思いますが、そのうち腑に落ちることも多いはずなのでお勧めします。
    JavaScript ならとりあえずこれを通読してみてください、お勧めです。

    【JavaScript 第6版 : David Flanagan, 村上 列 : 本 : Amazon.co.jp】
    http://www.amazon.co.jp/dp/4873115736

    【絶対に読んでおきたい、JavaScriptのおすすめ書籍7冊 - Qiita】
    http://qiita.com/axross/items/1fc342c04aa88d48c713

    キャンセル

  • 2016/10/23 13:06

    https://teratail.com/questions/52427

    ここで聞かれている内容をあらたに質問をされているようなので、こちらは回答欄に「新たに質問[https://teratail.com/questions/52427](https://teratail.com/questions/52427)を上げたのでこちらは一旦閉じます。」とでも書いて「解決済」にしてください。
    例に挙げているコードは違いますが、内容は関数の定義と実行の話です。

    キャンセル

  • 2016/10/23 16:53

    kei344さん、お忙しい中、お時間をとらせ、動くサンプル・様々なツールのご紹介はじめ詳細にわたるご教示、本当にありがとうございます。

    kei344さんの一喝で開眼したのか、kei344さんの動くサンプルは理解できました。

    一喝されることを覚悟で最後に下記質問したいです・・・・

    ①「い」関数 の「callback( url + 'を受け取った!' )」は 「あ」関数では
    「function(data)」が引数になったので「function( url + 'を受け取った!' )」になる。
    との理解で宜しいでしょうか。

    ②サンプルでwindow.setTimeoutで関数実行を遅延させる理由は何でしょうか。


    ※質問表題に、若葉マークをつけるのを忘れてしまいました。

    一身上の都合がありまして、下記サイトのプログラムを取り急ぎ理解しようとしています。
    https://developers.google.com/maps/articles/phpsqlajax_v3?hl=ja

    不明な箇所を都度、書籍・ネットで徹底的に調べ、teratail様の方々に極力ご迷惑おかけしないようにし、乗り越えていこうと思っています。
    ご教示いただいた書物も並行して取り組んでいく所存であります。


    つたない質問の表現はじめ、お騒がせして誠に申し訳ございません。
    一層精進してまいります。
    今後ともよろしくお願い致します。









    キャンセル

  • 2016/10/23 17:29

    > ①
    >「function( url + 'を受け取った!' )」
    関数宣言と関数実行が混じっています。その上で理解が合っているかと言われても間違っているとしか返せません。

    >②サンプルでwindow.setTimeoutで関数実行を遅延させる理由は何でしょうか。
    さして大きな理由はありませんが、XMLHttpRequestでのコールバックを https://jsfiddle.net/ でテストしやすい環境に持ってくることが面倒なので、非同期の動きにとしてテストしやすいものを選んだだけです。

    > ※質問表題に、若葉マークをつけるのを忘れてしまいました。
    大丈夫です。ちなみに私に限っては「初心者」を名乗る方に特に厳しいです。

    > 一身上の都合がありまして、下記サイトのプログラムを取り急ぎ理解しようとしています。
    https://developers.google.com/maps/articles/phpsqlajax_v3?hl=ja
    急ぐのであればこそ、「関数」「変数」「スコープ」など基礎になる部分を押さえたほうが良いです。この感じであればPHPもそこまで出来るわけではないと推察します。PHPとJavaScriptで似た構文が出てくることになりますが、挙動がそれぞれ違う可能性もあります。先ほど挙げた「スコープ」などもそのうちの一つではありますが、そういった基礎部分を早めに触るのが良いです。

    ちにみにWeb上には体系だてて書かれた「基礎」の情報があまりありません。本をお勧めするのはそういった事情からです。

    > つたない質問の表現はじめ、お騒がせして誠に申し訳ございません。
    大丈夫ですよ。初学者のうちは「なんと伝えていいかわからない」ものがたくさんあるものです。
    それではがんばってください!GoogleMapsAPIは比較的好きなジャンルになるので、何か質問が上がっていれば回答することもあると思います。

    キャンセル

  • 2016/10/25 20:46

    kei344さんの洗礼と激励を受けて、今後、ハラハラドキドキのteratailになりそうです。
    どうもありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.47%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • PHP

    24510questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    20935questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • MySQL

    7133questions

    MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

  • Google マップ

    431questions

    Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。