Google Maps JavaScript APIを使用して表題の通りのことをやってみる。

■ 環境

• Google Maps JavaScript API v3

■ Getting Started

先日のエントリでAPIキーを作成したのでまずは実際に地図を表示する。

Getting Started
https://developers.google.com/maps/documentation/javascript/tutorial

JavaScriptのコードは下記の通り。Tutotialのものままである。

<script>
var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key={API_KEY};callback=initMap" async defer></script>

HTMLもそのままなのでここでは割愛。

■ 結果

確かに地図が表示された。

※ エントリ別の記事でなければ地図が表示されない…。

以上。

■ 関連

• Google APIキーを作成