gmap3_1
差分
この文書の現在のバージョンと選択したバージョンの差分を表示します。
|
gmap3_1 [2018/05/14 21:32] 管理者 作成 |
gmap3_1 [2018/05/14 21:32] (現在) 管理者 作成 |
||
|---|---|---|---|
| ライン 1: | ライン 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 管理者
