KeisukeKudo/googleMap.html

## googleMap.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Google Map</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            width: 100%;
            height: 100%;
        }
    </style>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
</head>
<body>
    <div id="map"><!-- Google Map表示 --></div>
    <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() {
        // データがなにもない場合は日本の中央を表示する
        const defaultSettings = {zoom: 15, maxZoom: 15, center: {lat: 40.804365, lng: 141.134867}};
        const map = new google.maps.Map(
          document.querySelector('#map'),
          defaultSettings
        );
        // 現在表示されている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))
          }
        ));

        // 動的に拡大率を変更する方法
        // イベントで処理しないとgetZoom()もsetZoom()も効かない
        const listener = google.maps.event.addListener(map, 'idle', () => {
          map.getZoom() > 15 && map.setZoom(15);
          // 設定が終わったらremove
          google.maps.event.removeListener(listener);
        });
      }
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Google Map</title>
	<style>
	html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	}
	#map {
	width: 100%;
	height: 100%;
	}
	</style>
	<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
	</head>
	<body>
	<div id="map"><!-- Google Map表示 --></div>
	<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() {
	// データがなにもない場合は日本の中央を表示する
	const defaultSettings = {zoom: 15, maxZoom: 15, center: {lat: 40.804365, lng: 141.134867}};
	const map = new google.maps.Map(
	document.querySelector('#map'),
	defaultSettings
	);
	// 現在表示されている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))
	}
	));

	// 動的に拡大率を変更する方法
	// イベントで処理しないとgetZoom()もsetZoom()も効かない
	const listener = google.maps.event.addListener(map, 'idle', () => {
	map.getZoom() > 15 && map.setZoom(15);
	// 設定が終わったらremove
	google.maps.event.removeListener(listener);
	});
	}
	</script>
	</body>
	</html>