WA42

intro.js

// 即時関数を作成する 定義しつつ即実行 + 匿名関数
// 作成する理由 -> グローバルオブジェクトを汚染しない為

(function ($, windows) { // $をjQueryのショートカットとしてこの範囲でだけ使う
    var a = 100;
})(jQuery, widows);

// windowオブジェクトは一番大きいオブジェクト
// window.b で 以下は参照出来る

/*
 window.b
 200
 window.a
 undefined
 */
var b = 200;

kadai.js

/*
科目記号: WA42
課題No: 01
主題: 使いやすいGoogleMap
5/18

内容
app.kadai.js -> app.jsにリネーム
1. ボタン切り替え実装
2. 住所検索の実装

WA42 -> 01
 */

(function ($, window, google) {

  // 位置情報データ
  var locations = {
    'tokyo-station': {
      lat: 35.681298,
      lng: 139.7640529
    },
    'osaka-station': {
      lat: 34.7024854,
      lng: 135.4937566
    },
    'kyoto-station': {
      lat: 34.985849,
      lng: 135.7587667
    }
  };

  // 初期表示のlocationを指定
  var init_location = locations['tokyo-station'];

  // Google Mapの取得
  // 基本の設定
  /* 基本のレンダリング */
  var map = new google.maps.Map(document.getElementById('google-map'), {
    center: init_location,
    zoom: 14
  });

  // Markerのレンダリング
  var marker = new google.maps.Marker({
    position: init_location,
    map: map,
    animation: google.maps.Animation.DROP
  });

  var geocoder = new google.maps.Geocoder();
  // ボタンに対応する位置を取得して地図を更新する
  $('.search-btn').click(function () {
    var loc = locations[$(this).data('location')];
    geocoder.geocode({
      location: loc
    }, function (result, status) {
      if(status === google.maps.GeocoderStatus.OK) {
        map.setCenter(result[0].geometry.location);
        marker.setPosition(loc);
      }
    });
  });

  // GeoCodeで位置を取得し、地図を更新する
  $('#search-submit').click(function() {
    var address = $('#search-input').val();
    geocoder.geocode({
      address: address
    }, function (result, status) {
      if(status === google.maps.GeocoderStatus.OK) {
        map.setCenter(result[0].geometry.location);
        marker.setPosition(result[0].geometry.location);
      }
    });
  });
})(jQuery, window, google);

map.js

// https://developers.google.com/maps/documentation/javascript/3.exp/reference?hl=ja

(function ($, window) {
    
    /*
    地図を表示する
    MAPを作成する new google.maps.Map()
    使用したオプション
    - center
    - zoom

    Mapのメソッドを使用する
    setCenter() -> センターの位置を指定する

    Markerオブジェクト
    地図上にマーカーを表示sうる
    ・Markerを作成する
    */
    
    var mapDiv = document.getElementById('google-map');
    var map = new google.maps.Map(mapDiv, {
        center: {
            lat: 34.699875,
            lng: 135.493032
        },
        zoom: 10
    });

    var maker = new google.maps.Marker({
        map: map,
        position: {
            lat: 34.699875,
            lng: 135.493032
        },
        animation: google.maps.Animation.DROP
    });

    var geocoder = new google.maps.Geocoder();

    var address = "長崎県長崎市京泊市";

    geocoder.geocode({
        address: address
    }, function (result, status) {
        if(status === google.maps.GeocoderStatus.OK) {
            map.setCenter(result[0].geometry.location);
        }
    });

    window.map = map;  // <- ブラウザから操作するために代入
})(jQuery, window);