GoogleMaps APIv3 地図の表示

DokuWiki に Google Maps Javascript API v3 の地図を表示します。

デモ

PR

サンプル

【YOUR_API_KEY】の部分を各自で取得したKEYに書き換えて、このコードを挿入して下さい。
DokuWikiではHead要素内の編集がページ別にできないため、HTML文法的に正しくないかもしれませんがスタイルシートの設定をbody要素内で行っていますご注意下さい。

<HTML>
<style>
#map {width:400px;height:300px;}
</style>
<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>
<script src="https://maps.googleapis.com/maps/api/js?key=【YOUR_API_KEY】&callback=initMap" async defer></script>
</HTML>

スタートガイドではmapスタイルシートが

#map{height:100%}

となっていますが表示できなかったので

#map {width:400px;height:300px;}

に変更しています。

目次

GoogleMaps APIv3 地図の表示

デモ

PR

サンプル