あちあち情報局

趣味や日曜プログラムなどを書いています

ユーザ用ツール

サイト用ツール


サイドバー

メニュー

現在リニューアル中

タグ一覧

programs:gmap3_1

GoogleMaps APIv3 地図の表示

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

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

デモ

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

に変更しています。

programs/gmap3_1.txt · 最終更新: 2018/03/30 22:27 by 管理者