あちあち情報局

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。

====== 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>
に変更しています。

あちあち情報局

ユーザ用ツール

サイト用ツール

ページ用ツール