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 管理者