内容へ移動
あちあち情報局
趣味や日曜プログラムなどを書いています
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
現在位置:
トップページ
»
GoogleMaps APIv3 地図の表示
gmap3_1
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
{{tag>プログラミング関連 Google_Maps_API3}} [[start]]>[[programming_start]] ====== GoogleMaps APIv3 地図の表示====== DokuWiki に Google Maps Javascript API v3 の地図を表示します。 [[https://developers.google.com/maps/documentation/javascript/tutorial?hl=ja |Google Mapsのスタートガイド]]を参考に地図を表示してみます。 ---- ===== デモ ===== <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=AIzaSyBjv8os9QozlDKp4kd6S0dtt8OX-K8WIzw&callback=initMap" async defer></script> </HTML> ===== PR ===== <html> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- respon_0 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-9251612436023685" data-ad-slot="1409739163" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </html> ===== サンプル ===== * 【YOUR_API_KEY】の部分を各自で取得したKEYに書き換えて、このコードを挿入して下さい。 * DokuWikiではHead要素内の編集がページ別にできないため、HTML文法的に正しくないかもしれませんがスタイルシートの設定をbody要素内で行っていますご注意下さい。 <code javascript> <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> </code> スタートガイドではmapスタイルシートが <code> #map{height:100%} </code> となっていますが表示できなかったので <code> #map {width:400px;height:300px;} </code> に変更しています。 ---- [[start]]>[[programming_start]]
gmap3_1.txt
· 最終更新: 2018/05/14 21:32 by
管理者
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ