大人(定年前)からのプログラミング(初歩)TECHACADEMY3か月での学習成果③(JAVASCRIPT編2)

2.続編【Javascript 】プログラムのポイント説明

2-21.

2-22.

2-23.

地図の貼り付け先をプログラムする

$('#map_canvas').css({//CSSにより設定する
          "width" : "100%",
          "height" : "500px"
          });	
$(‘#map_canvas’)

HTML文の id=’#map_canvas’ の場所を指定し

.css({ “width” : “100%”, “height” : “500px” });

CSSプログラムで、地図を width(幅)画面100%でheight(高さ)500px に設定

2-24.

メソッドを組み込みだ(入り子)にしたプログラミング

indexOf()メソッドは、文字列内の指定された値の最初の出現位置を返します。

	var str_MapData = s.substr( s.indexOf("]")+1 );

(indexOf(“]”)+1)は 変数として考え、”]” の文字が最初に出現した位置に+1した数字(0番があるので+1しています)を計算し、その数字をs.substr()に使う。

s.substr( 開始位置, 文字数 )

文字列に対して「substr()」を実行し、引数に「開始位置」「文字数」を設定することで切り出しができます。

「文字数」は省略することが可能で、その場合は開始位置から末尾までが選択されます

2-25.

Google Maps API(アプリケーションプログラミングインタフェース 【API:Application Programming Interface】 )

APIにより、Google社が提供するGoogleマップを、 AndroidやiOS向けアプリやWebサービスに使用でき、今回このプログラムにも使っています。コードは定型ですが、場所とセンター位置をきめることで設定できます。複数の地図やマークの種類、コメントなども指定できます。

Googleマップの有料化について

GoogleマップのAPIが2018年7月16日から有料となり、APIキー取得が必須となりました。

料金に関してですが、1か月間の使用量が200ドル分までなら請求されずに無料です。

加算内容は、マップの形式や表示回数によって料金が加算されていく従量制になっています。

月度での無料の目安は、会社概要ページなどで単に場所を表示させるような静的マップの読み込みで100,000回、物件や周辺地域の様子を表示させる動的マップの読み込みなら28,500回までとなっています。

Google曰く『ほとんどのお客様は、1 か月の使用量が無料範囲(200 ドル)を超えることはありません。』としていて、個人のウェブサイトや中小企業のウェブサイトなら、有料になることはほぼ無いとの回答です。

今回の有料化で大きく影響を受けるのはトラフィックの多い大企業やマップを使用したウェブサイトやアプリが対象となるようです。

HTML739 Link先

Googleマップ の定型の全コード(Jvascript)

HTML文には、Google マップAPIのkey(このプログラムでgoogleで指定されたkeyの桁数は39桁でした)を事前に取得し記載する必要があります。

HTML文739行目に記載した***~***が39桁ありました。

  <script src="//maps.google.com/maps/api/js?key=
***************************************&callback=initMap"></script>	  
 var latlng = []; //緯度経度の値をセット
    var marker = []; //マーカーの位置情報をセット
    var myLatLng; //地図の中心点をセット用
    var geocoder;
    geocoder = new google.maps.Geocoder();

    var map = new google.maps.Map(document.getElementById('map_canvas'));
//地図を作成する

    geo(aftergeo);

    function geo(callback){
        $("#map_canvas").get("");
        var cRef = addresses.length;
        for (var i = 0; i < addresses.length; i++) {        	
             (function (i) { 
                geocoder.geocode({'address': addresses[i]}, 
                    function(results, status) { // 結果
                        if (status === 
             google.maps.GeocoderStatus.OK) { 
               // ステータスがOKの場合
                            
            latlng[i]=results[0].geometry.location;
               // マーカーを立てる位置をセット
            marker[i] = new google.maps.Marker({
                    position: results[0].geometry.location, 
               // マーカーを立てる位置を指定
            map: map 
               // マーカーを立てる地図を指定
                            });
         } else { // 失敗した場合
         }//if文の終了。ifは文なので;はいらない
          if (--cRef <= 0) {	
            callback();
               //全て取得できたらaftergeo実行                 
                         }
          });//geocoder.geocodeの終了
           }) (i);
         }//for文の終了
      	
    }//function geo終了

    function aftergeo(){    	
        myLatLng = latlng[0];//最初の住所を地図の中心点に設定
        var opt = {
            center: myLatLng, // 地図の中心を指定
            zoom: 14 // 地図のズームを指定
        };//地図作成のオプションのうちcenterとzoomは必須
        map.setOptions(opt);//オプションをmapにセット
    	
    }//function aftergeo終了

地図を反映させる場所の指定<option>

HTMI文の684行目

google.maps.Map(document.getElementById(‘map_canvas’));
//地図を作成する

 <div id="map_canvas"></div>

 >と<の間に指定した地図DATA ‘map_canvas’が張り付きます。

2-26.

2-27.

2-28.

2-29.

2-30.

2-31.

Javascript のプログラムから、HTLM文の指定した場所にある要素のoptionを0番(1番目)に設定する。

document.getElementById( “target1” )はHTML文689行目にあるid=” target1 “を指定します。選択される時には必ず1番目に設定されるように指示しています。

var element1 = document.getElementById( "target1" ) ;

// option要素の集合を取得
var elements1 = element1.options ;

// 1つ目の項目を選択状態にする
elements1[0].selected = true ;  
HamL Link先

2-32.

2-33.

ソート(sort)する定型プログラム

var time_List = time_List_0.sort(function(a,b){ return a-b; });

2-34.

2-35.

多元配列したプログラム

time_List_Data.push(arrayArray[k][5]);

今回は2次元配列 [][]を例にしましたが3次元 [][][] であっても4次元 [][][][] であっても考えかたは同じです。

for (var k = 0; k < arrayArray.length; k ++){

    time_List_Data.push(arrayArray[k][5]);
	
    var time_List_0 = time_List_Data.filter(function (x, i, self) 
    {return self.indexOf(x) === i; });

    };

【2次元配列の説明例】

ary[1][2]の意味は「92」を意味します。

var ary = [
  [92, 88, 64, 86],   //ary[0][92, 88, 64, 86]  
  [78, 92, 96, 81],   //ary[1][78, 92, 96, 81]  
  [68, 56, 84, 70]   //ary[2][68, 56, 84, 70] 
];

var num = ary[1][2];    ary[1][78, 92, 96, 81]  
となり  var num  = 92 を意味します。

2-36.

2-37.

2-38.

2-39.

2-40.

2-41.

2-42.

2-43.

2-44.

2-45.

2-46.

2-47.

2-48.

2-49.

2-50.

2-51.

2-52.

2-53.

2-54.

2-55.

2-56.

2-57.

2-58.