【javascript】GoogleMapの基本的な使い方まとめておく

GoogleMap使う機会があったので簡単な地図アプリならこれくらいわかれば作れるだろうということを簡単にまとめておく。っていっても本当に基本的なことだけだけど。

地図を埋め込む要素を用意

<script src="https://maps.googleapis.com/maps/api/js?key=APIキー"></script>                                                                                                                                                                   
<!-- ライブラリを使う場合は、librariesパラメータも設定-->
<!-- <script src="https://maps.googleapis.com/maps/api/js?key=APIキー&libraries=&geometry"</script> -->
<div id="map" />

地図表示

// 地図のオプションを1つずつ指定して生成
var map = new google.maps.Map(
  document.getElementById("map"), {
    zoom: 16,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    fullscreenControl: false,
    zoomControl: false,
    streetViewControl: false,
    streetViewControlOptions: false
  }
);

// 地図のオプションを一括で設定して生成
var map = new google.maps.Map(
  target, {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true
  }
);

マーカーを置く

var marker = new google.maps.Marker({
  position: new google.maps.LatLng({
    lat: 緯度
    lng: 経度
  }),
  map: map
});

マーカーを移動させる

marker.setPosition(
  new google.maps.LatLng(緯度, 経度)
);

マーカーに画像を設定する

// マーカー作成時に画像を設定
marker = new google.maps.Marker({
  position: new google.maps.LatLng(
    緯度,
    経度
  ),
  map: map,
  icon: {
    url: 画像URL
    scaledSize: new google.maps.Size(
      幅,
      高さ
    )
  }
});

// 既存のマーカに画像を設定
marker.setIcon({
  url: 画像URL,
  size: {
    width: 幅
    height: 高さ
  }
});

マーカーの表示・非表示

marker.setVisible(true);
marker.setVisible(false);

マーカーへのクリックイベントを制御

marker.addListener('click', function(e) {
  // クリックされると呼ばれる
});

マーカーの削除

marker.setMap(null);

複数マーカーがあるときの位置調整

全ての位置が地図に表示されるように

var latLngs = [
  [緯度, 経度],
  [緯度, 経度],
  [緯度, 経度],
  ・・・
];
var bounds = new google.maps.LatLngBounds();
latLngs.forEach(function(latLng) {
  bounds.extend(
    new google.maps.LatLng(
      latLng[0],
      latLng[1]
    )
  );
});
map.fitBounds(bounds);

円を描画

var circle = new google.maps.Circle({
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35,
  map: map,
  center: {
    lat: 緯度,
    lng: 経度
  },
  radius: 半径(メートル)
);

2点間の距離を求める

var distance = google.maps.geometry.spherical.computeDistanceBetween(
  new google.maps.LatLng(緯度, 経度),
  new google.maps.LatLng(緯度, 経度)
);

2点間の角度を求める

var direction = google.maps.geometry.spherical.computeHeading(
  new google.maps.LatLng(緯度, 経度),
  new google.maps.LatLng(緯度, 経度)
);

ざっくり、こんなところ。以上です。