あちあち情報局

趣味や日曜プログラムなどを書いています

ユーザ用ツール

サイト用ツール

現在位置: トップページ » GoogleMaps APIv3 地図の表示

サイドバー

メニュー

現在リニューアル中

トップページ

ブログ
コンテンツ
その他
連絡方法
関係者用
旧コンテンツは下部

旧コンテンツ

* ここは旧トップページ

タグ一覧

タグ#
3
1
1
5
3
3
1
1
1
5
2
3
2
1
3
3
12
3
9
5
1
1
4
15
12
4
1
3
3
1
2
1
1
1
1
4
29
8
2
4
3
1
1
8
1
1
1

PV : 2202810

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;}

に変更しています。

ここは旧トップページ＞日曜プログラミング

gmap3_1.txt · 最終更新: 2018/05/14 21:32 by 管理者

ページ用ツール

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki