目次

GoogleMaps APIv3 地図の表示

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

Google Mapsのスタートガイドを参考に地図を表示してみます。

デモ

PR

サンプル

<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;}

に変更しています。