GoogleAPIを用いた地図の表示

headに記述するもの

<meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

bodyの中にある　div id=”map”　の中にマップを挿入するためのスクリプト

<script>
    function initMap(){
      let map;
      let location_list= new Array();
      map = new google.maps.Map(document.getElementById('map'),{
        center:{lat: 35.397, lng: 139.644},zoom: 8  // ここで初期の座標とズームが指定できます。
      });
    }
</script>

もう一つのスクリプトタグ

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"async defer></script>

この3つをhtml文書のそれぞれのタグの中に入れればGoogleMapを表示することができた。

プロットする

１つ目のスクリプト部分を以下のように変更する

function initMap(){
      let location_list= new Array();
      let map;
      let markers=new Array();
      map = new google.maps.Map(document.getElementById('map'),{
        center:{lat: 35.397, lng: 139.644},zoom: 8
      });
        location_list.push({lat:'35.4665497',lng:'139.6159829',name:'HOTEL　PLUMM'});   //この部分は自由に
        location_list.push({lat:'35.4576137',lng:'139.6371994',name:'ヨコハマグランドインターコンチネンタルホテル'});
        location_list.push({lat:'35.4552687',lng:'139.6311037',name:'横浜ロイヤルパークホテル'});
        for(let i=0;i<location_list.length;i++){
          markers[i]= new google.maps.Marker({
            position: new google.maps.LatLng(location_list[i].lat,location_list[i].lng),
            map:map
          });
        }
    }

これで複数のプロットが出来ました。