API の非同期読み込み

[さいきゆみ]

google map API　及び　ＪａｖａＳｃｒｉｐｔも初心者です。

https://developers.google.com/maps/documentation/javascript/tutorial?hl=ja　を読みながら勉強していますが、ここに書いてある　APIの非同期読込というのは、

「ページが完全に読み込まれてから Maps API を読み込みAPI の読み込みが完了してから initialize() 関数を実行する」　ということを説明しているのですが、それがすなわち非同期＝オンデマンドということなのでしょうか？　

オンデマンドというのは、読込ながら実行することだと思っていたので、全部読み込んでから実行するのは逆の意味じゃないのだろうかと初歩的なところで悩んでいます。

非同期通信のメリットとしては、世界地図などを読込ながら、画面に表示する部分を優先的に実行していくというものではないかなと思っていたのですが？

https://developers.google.com/maps/documentation/javascript/examples/map-simple-async

に紹介されているサンプルコードを元に、

<style>

      html, body, #map-canvas {

        height: 350px;

        margin: 0px;

        padding: 0px

      }

    </style>

<script>

var marker;

function initialize() {

var mapOptions = {

    zoom: 10,

    scrollwheel: false,

    center: new google.maps.LatLng(34.697308,135.484085),

    mapTypeId: google.maps.MapTypeId.ROADMAP};

var image="http://4.bp.blogspot.com/-EbKexGmMlUg/U-7BOgXInRI/AAAAAAAAHCw/7sZMpczYLQU/s1600/kinkyu.png";

var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

var trafficLayer = new google.maps.TrafficLayer();

  trafficLayer.setMap(map);

  var weatherLayer = new google.maps.weather.WeatherLayer({temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT});

  weatherLayer.setMap(map);

  var cloudLayer = new google.maps.weather.CloudLayer();

  cloudLayer.setMap(map);

var kmlUrl ='https://www.google.co.jp/maps/ms?hl=ja&gl=JP&ie=UTF8&oe=UTF8&t=m&brcurrent=3,0x34674e0fd77f192f:0xf54275d47c665244,1&source=embed&dg=feature&authuser=0&msa=0&output=kml&msid=205066638809648216939.0004df2ad390e72ca4318'; //そのままのリンクがいい

var kmlLayer = new google.maps.KmlLayer(kmlUrl,{

     suppressInfoWindows:false, //tureにすると表示さらないときに情報が出るのか？

     preserveViewport:true // これがズームを可能にしている

     });

kmlLayer.setMap(map);

marker = new google.maps.Marker({

    map:map,

    icon: image,

    animation: google.maps.Animation.DROP,

    position: new google.maps.LatLng(34.6972925,135.4840666),//事務所表示

  });

}

function loadScript() { //ページが完全に読み込まれてから Maps API を読み込みAPI の読み込みが完了してから initialize() 関数を実行する

  var script = document.createElement("script");

  script.type = "text/javascript";

  script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=weather&callback=initialize";

  document.body.appendChild(script);

}

window.onload = loadScript;

</script>

  

  

<div class="mapcnt">

<h2 style="letter-spacing:5px;">

            全国配送24時間対応！広がるネットワーク！

          </h2><p style="letter-spacing:2px;">

<a href="https://fa00359d3073bf141361b8aaa79c2a2409659a6e.googledrive.com/host/0B0CVBi8o8jE-V2RoT2VDc0o3TE0/wether.html" target="_blank" title="ドライバー行き先マップ">全国のドライバーの皆様と繋がっていきます!</a>

</p>

</div>

    <div id="map-canvas"></div>

  

</!doctype>

http://www.hakobu.com/　の　blogger のガジェットとして使ってみました。

表示が遅くなるのがblogger の特徴なので、逆に順番にプログラムを実行させていく方がスムーズになるじゃないかなと使ってみました。　

表示の仕方はニュアンスがあっていいじゃないかなと自己満足しているのですが、解釈として正しいのでしょうか？

非同期通信の正しい解釈とメリットを教えてください。

[Masashi.K]

非同期処理の主な目的は、ある処理をするのに時間がかかる場合、その待ち時間の間に他のことをやっておこう、ということです。

Google Maps APIはGoogleのサーバから直接ライブラリを読み込む仕組みなので、時間がかかります。

これを同期処理で読み込むと、ブラウザはGoogle Maps APIのJavaScriptファイルが読み込むまで、それよりも先の処理に進むことができません。

つまりそれだけページが表示されるのが遅くなります。

Google Maps APIの読み込みを非同期にすることは、一度ページを描画してから時間のかかるGoogle Maps APIを行うため、ページ全体が表示される時間は遅くなりますが、Google Maps以外の部分は早く表示されるため、ユーザの体感としては早く感じられます。

Google Mapの部分を早く表示させたい場合、Google Static Maps APIを使用するとよいでしょう。

ページ読み込み時に、<img>タグを使って表示することができます。

ページ読み込みが完了した後に、Google Maps JavaScript APIを使って、動的な地図を表示するように作ると良いでしょう。

2014年8月16日土曜日 18時51分09秒 UTC-7 さいきゆみ:

[さいきゆみ]

待ち時間で他のことをする処理ということで、全体的に早く感じるですね！　ありがとうございます。

確かに、画像を先に見せるというのもアイデアですね。

スマホなんかの場合有効かもしれません。

これから研究続けます。ありがとうございます