Google Map 표시

<div id="map"><!-- Google Map表示 --></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
<script>
  function initMap() {
    // 日本の中央を表示する
    const defaultSettings = {zoom: 15, center: {lat: 40.804365, lng: 141.134867}};
    const map = new google.maps.Map(
      document.querySelector('#map'),
      defaultSettings
    );
  }
</script>

// 表示データ
const data = [
  { name: "東京タワー", lat: 35.6585805, lng: 139.7454329 },
  { name: "京都タワー", lat: 34.9875441, lng: 135.7592164 },
  { name: "通天閣", lat: 34.6524992, lng: 135.5063058 }
];

function initMap() {
  // 省略

  // 現在表示されているinfoWindowオブジェクト
  let currentWindow;

  data.map(d => {
    // マーカーをつける
    const marker = new google.maps.Marker({
      position: {lat: d.lat, lng: d.lng},
      map: map
    });

    // マーカークリックしたら地名をポップアップさせる
    marker.addListener('click', () => {
      currentWindow && currentWindow.close();
      const infoWindow = new google.maps.InfoWindow({content: d.name});
      infoWindow.open(map, marker);
      currentWindow = infoWindow;
    });
  });
}

마커가 화면에 맞도록 합니다.

// マーカーがいい感じに表示できるよう調整
map.fitBounds(new google.maps.LatLngBounds(
  // sw
  {
    lat: Math.min(...data.map(d => d.lat)),
    lng: Math.min(...data.map(d => d.lng))
  },
  // ne
  {
    lat: Math.max(...data.map(d => d.lat)),
    lng: Math.max(...data.map(d => d.lng))
  }
));

function initMap() {
  // 日本の中央を表示する
  const defaultSettings = {zoom: 15, /* これ */ maxZoom: 15, center: {lat: 40.804365, lng: 141.134867}};;
  const map = new google.maps.Map(
    document.querySelector('#map'),
    defaultSettings
  );

  // 以下省略
}

동적으로 확대율을 변경하는 방법

const listener = google.maps.event.addListener(map, 'idle', () => {
  // 実際には何らかの条件で拡大率を取得設定する
  map.getZoom() > 15 && map.setZoom(15);
  google.maps.event.removeListener(listener);
});

참고