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

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

準備

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

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

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」のドキュメント
「marker」のドキュメント

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

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

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」のドキュメント

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

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

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('エラーです！');
    }
  }
}

「ジオコーディング」のドキュメント

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

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

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

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

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

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('ブラウザが対応していません！')
    }
  }
}

「マーカー」のドキュメント

マーカーの色を指定

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('ブラウザが対応していません。');
    }
  }
}

参考にしたサイト

参考

ドットインストール Google Maps API入門