Google Maps JavaScript API の基本記述

HTML タグ例 ↓　地図表示

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0">
  <title>Simple Map</title>
  <script src="https://maps.googleapis.com/maps/api/js?key=【API キー】&callback=initMap" async defer></script>
  <style>
    html, body { height: 100%; margin: 0; padding: 0; }
    #gmap { width:98%; height:500px; margin: 0 auto; }
  </style>
  <script>
    var mapobj;
    var mark = {lat:35.680929,lng:139.767020 }; // 東京駅(北緯度,東経度)
    function initMap() {
      mapobj = new google.maps.Map(document.getElementById('gmap'), {
        center: mark,      // 地図の中心位置を指定
        zoom: 13           // ズームレベルを指定
      });
      var marker = new google.maps.Marker({
        position: mark,       // マーカーの位置
        label: '＋',          // マーカーラベルの文字
        title: '地図中央',    // マーカーのタイトル
        map: mapobj           // マーカーを mapobj に設定
      });
      const infowindow = new google.maps.InfoWindow({
        content: "東京駅です<br><a href='https://www.jreast.co.jp/estation/stations/1039.html'>駅構内図</a>が見られます"
  });
      marker.addListener("click", function(){
        infowindow.open(mapobj, marker);
      });
    }
  </script>
</head>
<body>
  <div id="gmap"></div>
</body>
</html>

HTML タグの説明　　参考

HTML5 対応の DOCTYPE を指定
<!DOCTYPE html>
　
Google Maps API をロードする
<script src="https://maps.googleapis.com/maps/api/js?key=【API キー】&callback=initMap" async defer></script>
async 属性を指定して、API が使用できるようになったら callback 関数 initMap()を呼び出します
　
マップの DOM 要素の #gmap のサイズを指定する
<style> #gmap { width:98%; height:500px; margin: 0 auto; } </style>
　
「mapobj」オブジェクトを作成する JavaScript 関数を記述
<script> function initMap() { ～ }</script>
　
地図のプロパティを持つ JavaScript オブジェクトを作成
mapobj = new google.maps.Map(document.getElementById("gmap"),{ ～ });
　
「mapobj」のオプションパラメータ { ～ } 内を指定
- 地図の中心位置の指定
  center: mark, // 地図の中心位置を指定
- ズームレベルの指定
  zoom: 13 // ズームレベルを指定
  　
マーカーを記述
var marker = new google.maps.Marker({ ～ });
　
マーカーのオプションパラメータ { ～ } 内を指定
- マーカーの位置を指定
  position: mark, // マーカーの位置
- マーカーラベルの文字を指定
  label: '＋', // マーカーラベルの文字
- マーカーのタイトルを指定
  title: '地図中央', // マーカーのタイトル
- マーカーを mapobj に設定
  map: mapobj // マーカーを mapobj に設定
  　
infowindow を記述
const infowindow = new google.maps.InfoWindow({ ～ });
　
マーカークリックで動作 (infowindow が開く)を設定
marker.addListener("click", function(){ ～ });
　
mappbj オブジェクトの操作要素を body タブ内に記述
<body>
<div id="gmap"></div>
</body>