まずGCPへ登録する Gmailでログインする

Google Cloud

GCPでプロジェクト作成

上の赤い囲みがプロジェクト

ライブラリから Maps JavaScript APIを追加

APIキーを追加

サンプルコードを公式サイトより利用してみる

Simple MAPのコードを使う

initMapの関数名を切り替えること!

ソースをCDNから読み込むと、内部関数の同じ名前の initMapが呼ばれるので、うまく表示されない

サイトはこちら

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script src="./index.js"></script>
  </head>
  <body>

//このid=map のdivタグが必要
    <div id="map"></div>

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script

//callbackをtestMapに変更する
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=testMap&libraries=&v=weekly"
      async
    ></script>
  </body>
</html>

JavaScript

let map;

//testMapに関数名を変更する
function testMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

参考サイト:GoogleMap 公式