programs:gmap3_1

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

--- programs:gmap3_1 [2018/03/30 08:24] – 作成管理者
+++ programs:gmap3_1 [2018/03/30 22:27] (現在) – [デモ] 管理者
@@ 行 1: / 行 1: @@
+====== 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>
+に変更しています。