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

map topへ  page topへ