html:googlemapsapi
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
html:googlemapsapi [2013/07/22 00:21] – [宣言] king | html:googlemapsapi [2013/07/24 22:07] (現在) – [宣言] king | ||
---|---|---|---|
行 18: | 行 18: | ||
===== サイトへの埋め込み方法 ===== | ===== サイトへの埋め込み方法 ===== | ||
- | 埋め込みはJavaScriptです。仕組みは今ひとつよくわかってないので恐縮なのですが、表示が変わるたびにページがリロードされているみたいです(ようするに全部が書き換えられる)。 | + | 埋め込みは[[JavaScript]]です。仕組みは今ひとつよくわかってないので恐縮なのですが、表示が変わるたびにページがリロードされているみたいです(ようするに全部が書き換えられる)。 |
==== 宣言 ==== | ==== 宣言 ==== | ||
- | まず、ページのヘッダ<head>部にこのキーを使いますよってのを記述します。下記。PukiWikiの都合で記号に全角を使っていますので、ご注意。 | + | まず、ページのヘッダ<head>部にこのキーを使いますよってのを記述します。下記。[[:wiki:PukiWiki]]の都合で記号に全角を使っていますので、ご注意。 |
<code html> | <code html> | ||
<script src=" | <script src=" | ||
行 30: | 行 30: | ||
==== Bodyに直接埋め込む(最も簡単な方法) ==== | ==== Bodyに直接埋め込む(最も簡単な方法) ==== | ||
下記のようにbodyに記載する事でいけます。 | 下記のようにbodyに記載する事でいけます。 | ||
- | < | + | < |
- | <div id=" | + | <div id=" |
- | <script type=" | + | < |
- | //< | + | //< |
- | var map = new GMap2(document.getElementById(" | + | |
- | map.setCenter(new GLatLng(36.147786, | + | |
- | //]]> | + | // |
- | </ | + | </ |
</ | </ | ||
+ | |||
- まず、1行目で、divレイヤーをID=' | - まず、1行目で、divレイヤーをID=' | ||
- 2行目で、mapをid=で宣言。 | - 2行目で、mapをid=で宣言。 | ||
行 45: | 行 46: | ||
これだけで地図は表示できます。でも、これでは面白く有りません。次に倍率などのコントロールを入れてみます。map.setCenterの後に続けて下記記載します。 | これだけで地図は表示できます。でも、これでは面白く有りません。次に倍率などのコントロールを入れてみます。map.setCenterの後に続けて下記記載します。 | ||
< | < | ||
- | | + | map.addControl(new GSmallMapControl()); |
- | map.addControl(new GMapTypeControl()); | + | |
</ | </ | ||
+ | |||
- 1行目は、倍率などのコントロールを左に表示します。SmallのところをLargeとするとメモリのついた大きなコントロールになります。 | - 1行目は、倍率などのコントロールを左に表示します。SmallのところをLargeとするとメモリのついた大きなコントロールになります。 | ||
- 2行目は、地図のタイプを左上に表示します。 | - 2行目は、地図のタイプを左上に表示します。 | ||
行 59: | 行 61: | ||
さらに、マーカーをクリックしたら吹き出しが飛び出るようにします。 | さらに、マーカーをクリックしたら吹き出しが飛び出るようにします。 | ||
< | < | ||
- | | + | GEvent.addListener(map, |
- | if (overlay) { | + | |
- | overlay.openInfoWindow( | + | |
- | | + | |
- | } | + | } |
- | }); | + | |
</ | </ | ||
html/googlemapsapi.txt · 最終更新: 2013/07/24 22:07 by king