差分

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

--- html:googlemapsapi [2013/07/22 00:20] – 作成 king
+++ html:googlemapsapi [2013/07/24 22:07] (現在) – [宣言] king
@@ 行 18: / 行 18: @@
 ===== サイトへの埋め込み方法 =====
-　埋め込みはJavaScriptです。仕組みは今ひとつよくわかってないので恐縮なのですが、表示が変わるたびにページがリロードされているみたいです（ようするに全部が書き換えられる）。
+　埋め込みは[[JavaScript]]です。仕組みは今ひとつよくわかってないので恐縮なのですが、表示が変わるたびにページがリロードされているみたいです（ようするに全部が書き換えられる）。
 ==== 宣言 ====
-　まず、ページのヘッダ＜head＞部にこのキーを使いますよってのを記述します。下記。PukiWikiの都合で記号に全角を使っていますので、ご注意。
+　まず、ページのヘッダ＜head＞部にこのキーを使いますよってのを記述します。下記。[[:wiki:PukiWiki]]の都合で記号に全角を使っていますので、ご注意。
-<code>
+<code html>
 <script src="http://maps.google.com/maps？file=api＆v=2＆key=取得したAPIキー" type="text/javascript" charseet="utf-8"></script>
 </code>
@@ 行 30: / 行 30: @@
 ==== Bodyに直接埋め込む(最も簡単な方法) ====
 　下記のようにbodyに記載する事でいけます。
-<code>
+<code html>
-    <div id="map" style="width: 400px; height: 400px;"></div>
+<div id="map" style="width: 400px; height: 400px;"></div>
-    <script type="text/javascript">
+ <script type="text/javascript">
-    //<![CDATA[
+ //<![CDATA[
-        var map = new GMap2(document.getElementById("map"));
+     var map = new GMap2(document.getElementById("map"));
-        map.setCenter(new GLatLng(36.147786,138.015919), 12);
+     map.setCenter(new GLatLng(36.147786,138.015919), 12);
-    //]]>
+ //]]>
-    </script>
+ </script>
 </code>
   - まず、1行目で、divレイヤーをID='map'で宣言し領域を確保
   - 2行目で、mapをid=で宣言。
@@ 行 45: / 行 46: @@
 これだけで地図は表示できます。でも、これでは面白く有りません。次に倍率などのコントロールを入れてみます。map.setCenterの後に続けて下記記載します。
 <code>
-        map.addControl(new GSmallMapControl());
+   map.addControl(new GSmallMapControl());
-        map.addControl(new GMapTypeControl());
+   map.addControl(new GMapTypeControl());
 </code>
   - 1行目は、倍率などのコントロールを左に表示します。SmallのところをLargeとするとメモリのついた大きなコントロールになります。
   - 2行目は、地図のタイプを左上に表示します。
@@ 行 59: / 行 61: @@
 さらに、マーカーをクリックしたら吹き出しが飛び出るようにします。
 <code>
-        GEvent.addListener(map, 'click', function(overlay, point) {
+   GEvent.addListener(map, 'click', function(overlay, point) {
-        if (overlay) {
+   if (overlay) {
-          overlay.openInfoWindow(
+     overlay.openInfoWindow(
-               document.createTextNode("薬師平ホテル（入浴可）"));
+         document.createTextNode("薬師平ホテル（入浴可）"));
-        }
+    }
-      });
+ });
 </code>