GoogleMapのAPIについてまとめてみた

GoogleMapのAPIを使ってWEBアプリを作りたいのでその仕様についてまとめてみました。

## 準備

- GoogleMapAPIのライブラリを読み込む
- APIのKEY
- callback関数

``` html:HTML
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>GoogleMapsのAPI</title>
  <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=googleMap.init">
    </script>
  <style>
    #map {
      width: 100%;
      height: 400px;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    var googleMap = {
      init: function() {
        /* ここに書いていきます */
      }
    }
  </script>
</body>
</html>
```

## 指定した経度緯度にマーカー

``` javascript:javascript
var googleMap = {
  init: function() {
    var self = this;
    var latlng = new google.maps.LatLng(35.66, 139.69);
    var options = {
      zoom: 15,
      center: latlng,
      mapTypeId: 'roadmap'
    };
    var map = new google.maps.Map(document.getElementById('map'), options);
    self.marker(map);
  },
  marker: function(map) {
    var marker = new google.maps.Marker({
      position: map.getCenter(),
      map: map
    });
  }
}
```

- 「mapTypeId」の[ドキュメント](https://developers.google.com/maps/documentation/javascript/maptypes?hl=ja)
- 「marker」の[ドキュメント](https://developers.google.com/maps/documentation/javascript/markers?hl=ja)

## クリックした箇所にマーカー

``` javascript:javascript
var googleMap = {
  init: function() {
    var self = this;
    var latlng = new google.maps.LatLng(35.66, 139.69);
    var options = {
      zoom: 15,
      center: latlng,
      mapTypeId: 'roadmap' // https://developers.google.com/maps/documentation/javascript/maptypes?hl=ja
    };
    var map = new google.maps.Map(document.getElementById('map'), options);
    self.clickPositionMarker(map);
  },
  clickPositionMarker: function(map) {
    google.maps.event.addListener(map, 'click', function(event) {
      var marker = new google.maps.Marker({
        position: event.latLng,
        map: map
      });
    });
  }
}
```

## 情報ウィンドウを表示

``` javascript:javascript
var googleMap = {
  init: function() {
    var self = this;
    var latlng = new google.maps.LatLng(35.66, 139.69);
    var options = {
      zoom: 15,
      center: latlng,
      mapTypeId: 'roadmap'
    };
    var map = new google.maps.Map(document.getElementById('map'), options);
    self.infoWindow(map)
  },
  infoWindow: function(map) {
    var infoWindow = new google.maps.InfoWindow({
      content: '<strong>渋谷のあたり</strong>だよ!',
      position: map.getCenter()
    });
    infoWindow.open(map);
  }
}
```

- 「InfoWindow」の[ドキュメント](https://developers.google.com/maps/documentation/javascript/infowindows?hl=ja)

## マーカーをクリックしたら情報ウィンドウを表示

``` javascript:javascript
var googleMap = {
  init: function() {
    var self = this;
    var latlng = new google.maps.LatLng(35.66, 139.69);
    var options = {
      zoom: 15,
      center: latlng,
      mapTypeId: 'roadmap'
    };
    var map = new google.maps.Map(document.getElementById('map'), options);
    self.marker(map)
  },
  infoWindow: function(map, marker) {
    var infoWindow = new google.maps.InfoWindow({
      content: '<strong>渋谷のあたり</strong>だよ!',
    });
    infoWindow.open(map, marker)
  },
  marker: function(map) {
    var self = this;
    var marker = new google.maps.Marker({
      position: map.getCenter(),
      map: map
    });
    google.maps.event.addListener(marker, 'click', function() {
      self.infoWindow(map, marker);
    });
  }
}
```

## ジオコーディングでMAP表示

ジオコーディングとは、住所（たとえば「東京都港区六本木 6-10-1」）を地理的座標（たとえば、緯度 35.6604282、経度 139.7269877）に変換するプロセスです。

``` javascript:javascript
var googleMap = {
  init: function() {
    var self = this;
    var geocoder = new google.maps.Geocoder();
    var address = '東京都世田谷区';
    self.geocode(geocoder, address);
  },
  geocode: function(geocoder, address) {
    var self = this;
    geocoder.geocode({
      'address': address
    }, function(result, status) {
      self.geocodeCallback(result, status)
    });
  },
  geocodeCallback: function(result, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      var latlng = result[0].geometry.location;
      var options = {
        zoom: 15,
        center: latlng,
        mapTypeId: 'roadmap'
      };
      var map = new google.maps.Map(document.getElementById('map'), options);
    } else {
      alert('エラーです！');
    }
  }
}
```

- 「ジオコーディング」の[ドキュメント](https://developers.google.com/maps/documentation/javascript/geocoding?hl=ja)

## クリック位置の住所を情報ウィンドウで表示

``` javascript:javascript
var googleMap = {
  init: function() {
    var self = this;
    var geocoder = new google.maps.Geocoder();
    var address = '東京都世田谷区';
    self.geocode(geocoder, address);
  },
  geocode: function(geocoder, address) {
    var self = this;
    geocoder.geocode({
      'address': address
    }, function(result, status) {
      self.geocodeCallback(result, status, geocoder)
    });
  },
  geocodeCallback: function(result, status, geocoder) {
    var self = this;
    if (status === google.maps.GeocoderStatus.OK) {
      var latlng = result[0].geometry.location;
      var options = {
        zoom: 15,
        center: latlng,
        mapTypeId: 'roadmap'
      };
      var map = new google.maps.Map(document.getElementById('map'), options);
      this.mapClick(map, geocoder);
    } else {
      alert('エラーです！');
    }
  },
  mapClick: function(map, geocoder) {
    google.maps.event.addListener(map, 'click', function(event) {
      var marker = new google.maps.Marker({
        position: event.latLng,
        map: map
      });
      geocoder.geocode({
        'latLng': event.latLng
      }, function(result, status) {
        if(status === google.maps.GeocoderStatus.OK) {
          var infoWindow = new google.maps.InfoWindow({
            content: result[0].formatted_address
          });
          infoWindow.open(map, marker);
        } else {
          alert('エラーです！');
        }
      });
    });
  }
}
```

## 住所を入力してその地図とマーカーを表示

inputのテキストに住所を入力してボタンをクリックするとその住所の地図とマーカーを表示させる

``` html:HTML
<div>住所:<input type="text" id="address" value=""> <input type="button" value="表示" onclick="googleMap.addressClick();"></div>
<div id="map"></div>
```

``` javascript:javascript
var googleMap = {
  init: function() {
    var self = this;
    var latlng = new google.maps.LatLng(35.66, 139.69);
    var options = {
      zoom: 15,
      center: latlng,
      mapTypeId: 'roadmap'
    }
    self.map = new google.maps.Map(document.getElementById('map'), options);
  },
  addressClick: function() {
    var self = this;
    var map = self.map;
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({
      'address': document.getElementById('address').value
    }, function(result, status) {
      self.mapMake(result, status);
    });
  },
  mapMake: function(result, status) {
    var self = this;
    var map = self.map;
    if (status === google.maps.GeocoderStatus.OK) {
      map.panTo(result[0].geometry.location);
      var marker = new google.maps.Marker({
        position: result[0].geometry.location,
        map: map
      });
    } else {
      alert('エラーです！');
    }
  }
}
```

## 現在地のマップを表示

``` javascript:javascript
var googleMap = {
  init: function() {
    var self = this;
    var latlng = new google.maps.LatLng(35.66, 139.69);
    var options = {
      zoom: 15,
      center: latlng,
      mapTypeId: 'roadmap'
    }
    var map = new google.maps.Map(document.getElementById('map'), options);
    self.currentPosition(map)
  },
  currentPosition: function(map) {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
      }, function() {
        alert('現在地を取得できません。')
      });
    } else {
      alert('ブラウザが対応していません！')
    }
  }
}
```

## 現在地のMapにアイコン表示

アイコンはデザインしたものを配置

``` javascript:javascript
var googleMap = {
  init: function() {
    var self = this;
    var latlng = new google.maps.LatLng(35.66, 139.69);
    var options = {
      zoom: 15,
      center: latlng,
      mapTypeId: 'roadmap'
    }
    var map = new google.maps.Map(document.getElementById('map'), options);
    self.currentPosition(map)
  },
  currentPosition: function(map) {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
        const marker = new google.maps.Marker({
          position: map.getCenter(),
          map: map,
          icon: new google.maps.MarkerImage(
            '/user.svg',
            new google.maps.Size(50, 50), // Size
            new google.maps.Point(0, 0), // origin
            new google.maps.Point(25, 25), // anchor
            new google.maps.Size(100, 100) // scaledSize
          )
        });
      }, function() {
        alert('現在地を取得できません。')
      });
    } else {
      alert('ブラウザが対応していません！')
    }
  }
}
```

- 「マーカー」の[ドキュメント](https://developers.google.com/maps/documentation/javascript/markers?hl=ja)

## マーカーの色を指定

``` javascript:javascript
var googleMap = {
  init: function() {
    var self = this;
    var latlng = new google.maps.LatLng(35.66, 139.69);
    var options = {
      zoom: 15,
      center: latlng,
      mapTypeId: 'roadmap'
    }
    var map = new google.maps.Map(document.getElementById('map'), options);
    self.currentPosition(map)
  },
  currentPosition(map) {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
        const pinColor = '0068B7'; // マーカーの色を指定
        const pinImage = new google.maps.MarkerImage('http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + pinColor)
        const marker = new google.maps.Marker({
          position: map.getCenter(),
          map: map,
          icon: pinImage
        });
      }, function() {
        alert('現在地を取得できません');
      });
    } else {
      alert('ブラウザが対応していません。');
    }
  }
}
```

- 参考にした[サイト](http://stackoverflow.com/questions/7095574/google-maps-api-3-custom-marker-color-for-default-dot-marker)

## 参考

- ドットインストール [Google Maps API入門](http://dotinstall.com/lessons/basic_google_maps/3501)