More than 5 years have passed since last update.

GooglemapのAPIをjavascriptでサイト内に埋め込む

Posted at 2018-03-06

まずGooglemapのAPIのサイトから自分のAPIキーを取得します。
https://developers.google.com/maps/documentation/javascript/?hl=ja
英語が多いです。

次にコードを書きます。

googlemap.html

<!DOCKTYPE html>
<head>
<meta charset="utf-8" name="viewport" content="width=300">
<style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            height: 500px;
            width: 50%;
        }
    </style>

</head>
<body>
 <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    </script>
//グーグルマップのAPI登録から自分のキーを作る
//それを下のURLのところに貼る
<script src="https://maps.googleapis.com/maps/api/js?key="ここに自分のgooglemapのAPIキーを貼る"&callback=initMap"
    async defer></script>
    
</body>
</html>

以上で表示されるはずです。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up