Google Maps API sample

googlemaps.js

// npm i google-maps
import GoogleMapsLoader from 'google-maps';

GoogleMapsLoader.KEY = 'AIzaSyA9aGnRJDU1DRIXl5urposeU0p6qXr0LWM';

GoogleMapsLoader.LIBRARIES = [
  // ルート描画に必要
  'places'
];

const mapElement = document.getElementById('map');
const viewElement = document.getElementById('view');

GoogleMapsLoader.load(({ maps }) => {

  // オプション設定
  const mapOptions = {
    zoom: 17,
    center: new maps.LatLng(34.6823045, 137.8988098),
    mapTypeId: maps.MapTypeId.ROADMAP,
    scaleControl: true,
    streetview: true
  };

  // マップを描画
  const map = new maps.Map(mapElement, mapOptions);

  // ルート描画
  // writeRoute(maps, map);

  // ストリートビュー描画
  writeStreetView(maps, map);
});

// ルート描画
function writeRoute(maps, map) {
  const directionsService = new maps.DirectionsService();

  const request = {
    origin: new maps.LatLng(34.6823045, 137.8988098),
    destination: new maps.LatLng(34.725217, 137.875005),
    /** only WALKING or DRIVING in JAPAN */
    // travelMode: maps.DirectionsTravelMode.WALKING // 歩き
    travelMode: maps.DirectionsTravelMode.DRIVING    // 車
    // travelMode: maps.DirectionsTravelMode.TRANSIT // 交通機関
  };

  directionsService.route(request, (result, _status) => {
    const directionsDisplay = new maps.DirectionsRenderer();
    directionsDisplay.setDirections(result); //取得した情報をset
    directionsDisplay.setMap(map); //マップに描画
  });
}

// ストリートビュー描画
function writeStreetView(maps, map) {
  // 地図にかぶせてレンダリング
  // map.setStreetView(new maps.StreetViewPanorama(mapElement, {
  // 別のとこにレンダリング
  map.setStreetView(new maps.StreetViewPanorama(viewElement, {
    // アドレスコントロール非表示 地図にかぶせるなら、ないと不便
    addressControl: false,
    // 閉じるボタン非表示 地図にかぶせるなら、ないとダメ
    enabbleCloseButton: false,
    // 画像取得日時表示
    imageDateControl: true,
    // カメラアングル
    pov: {
      // 北を0としての角度
      heading: 120,
      // 車から見たカメラアングル
      pitch: 0
    },
    // 表示位置
    position: map.getCenter()
  }));
}