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

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

kei344

2016/10/22 02:07

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

dreamers

2016/10/22 11:04

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

行動規範の内容に同意します

回答1件

ベストアンサー

「あ」関数の文末（「え」あたり迄？）がよくわかりません。

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

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

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

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

「あ」関数を function( data ) {} と捉えているのか、 downloadUrl( "phpsqlajax_genxml.php", function( data ) {} ); と捉えているのかがわかりませんが、
0. 「い」関数の箇所で downloadUrl という関数を定義している
0. 「あ」関数の箇所で定義済みの downloadUrl に引数 phpsqlajax_genxml.php（文字列）と function( data ) {}（関数）を渡している

というコードです。

JavaScript
1// 関数の動きを模してみた
2load();
3function load() {
4	downloadUrl( "phpsqlajax_genxml.php", function( data ) { // 「あ」関数
5		console.log( data ); // デベロッパーツールに「phpsqlajax_genxml.phpを受け取った！」と出るはず
6	} ); // downloadUrlという関数を "phpsqlajax_genxml.php" と function( data ) {} を引数に与えて実行している
7}
8function downloadUrl( url, callback ) { // 「い」関数
9	window.setTimeout( function() {
10		// 引数で受け取った関数を、引数で受け取った変数を引数にして実行
11		callback( url + 'を受け取った！' );
12	} , 1000 );
13}
14```**動くサンプル：**[https://jsfiddle.net/uh57ezfm/1/](https://jsfiddle.net/uh57ezfm/1/)
15
16---
17
18【window.setTimeout - Web API インターフェイス | MDN】
19[https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/setTimeout](https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/setTimeout)
20
21【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
22[http://www.buildinsider.net/web/chromedevtools/01](http://www.buildinsider.net/web/chromedevtools/01)
23
24---
25
26```JavaScript
27// こうしても動くよ、という例
28load();
29function load() {
30	downloadUrl( "phpsqlajax_genxml.php", function( data ) { // 「あ」関数
31		console.log( data ); // デベロッパーツールに「phpsqlajax_genxml.phpを受け取った！」と出るはず
32	} );
33	function downloadUrl( url, callback ) { // 「い」関数
34		window.setTimeout( function() {
35			callback( url + 'を受け取った！' );
36		} , 1000 );
37	}
38}
39```**動くサンプル：**[https://jsfiddle.net/uh57ezfm/2/](https://jsfiddle.net/uh57ezfm/2/)

投稿2016/10/22 02:58

kei344

総合スコア69407

dreamers

2016/10/22 11:07 編集

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 );}　　　　　　 ```

kei344

2016/10/22 12:42

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

kei344

2016/10/23 03: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

kei344

2016/10/23 04:06

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

dreamers

2016/10/23 07:53

kei344さん、お忙しい中、お時間をとらせ、動くサンプル・様々なツールのご紹介はじめ詳細にわたるご教示、本当にありがとうございます。 kei344さんの一喝で開眼したのか、kei344さんの動くサンプルは理解できました。一喝されることを覚悟で最後に下記質問したいです・・・・ ①「い」関数　の「callback( url + 'を受け取った！' )」は　「あ」関数では「function(data)」が引数になったので「function( url + 'を受け取った！' )」になる。との理解で宜しいでしょうか。 ②サンプルでwindow.setTimeoutで関数実行を遅延させる理由は何でしょうか。 ※質問表題に、若葉マークをつけるのを忘れてしまいました。一身上の都合がありまして、下記サイトのプログラムを取り急ぎ理解しようとしています。 https://developers.google.com/maps/articles/phpsqlajax_v3?hl=ja 不明な箇所を都度、書籍・ネットで徹底的に調べ、teratail様の方々に極力ご迷惑おかけしないようにし、乗り越えていこうと思っています。ご教示いただいた書物も並行して取り組んでいく所存であります。つたない質問の表現はじめ、お騒がせして誠に申し訳ございません。一層精進してまいります。今後ともよろしくお願い致します。

kei344

2016/10/23 08:29

> ① >「function( url + 'を受け取った！' )」関数宣言と関数実行が混じっています。その上で理解が合っているかと言われても間違っているとしか返せません。 >②サンプルでwindow.setTimeoutで関数実行を遅延させる理由は何でしょうか。さして大きな理由はありませんが、XMLHttpRequestでのコールバックを https://jsfiddle.net/ でテストしやすい環境に持ってくることが面倒なので、非同期の動きにとしてテストしやすいものを選んだだけです。 > ※質問表題に、若葉マークをつけるのを忘れてしまいました。大丈夫です。ちなみに私に限っては「初心者」を名乗る方に特に厳しいです。 > 一身上の都合がありまして、下記サイトのプログラムを取り急ぎ理解しようとしています。 https://developers.google.com/maps/articles/phpsqlajax_v3?hl=ja 急ぐのであればこそ、「関数」「変数」「スコープ」など基礎になる部分を押さえたほうが良いです。この感じであればPHPもそこまで出来るわけではないと推察します。PHPとJavaScriptで似た構文が出てくることになりますが、挙動がそれぞれ違う可能性もあります。先ほど挙げた「スコープ」などもそのうちの一つではありますが、そういった基礎部分を早めに触るのが良いです。ちにみにWeb上には体系だてて書かれた「基礎」の情報があまりありません。本をお勧めするのはそういった事情からです。 > つたない質問の表現はじめ、お騒がせして誠に申し訳ございません。大丈夫ですよ。初学者のうちは「なんと伝えていいかわからない」ものがたくさんあるものです。それではがんばってください！GoogleMapsAPIは比較的好きなジャンルになるので、何か質問が上がっていれば回答することもあると思います。

dreamers

2016/10/25 11:46

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

行動規範の内容に同意します