グーグルマップの位置指定地図の作成手順

位置とズームレベルの設定

最初に地名や住所を入力し、現れるマーカーをドラック&ドロップして位置を決定して下さい。
さらに、plus minus でズームレベルを決めます。

Loading...

フキダシ&コントロールの設定

マップ表示時にフキダシを開く:
フキダシに入れる文章:(使わない場合は空白)

応用:改行タグ「br」は後で追加して下さい。
リンクを貼るなどタグに「=」を使用する場合は、『 \ 』を使用して下さい。
例)<a href=\"http://リンクURL\"><img src=\"画像URI\" border=\"0\" /></a>

移動とズームのコントロールを表示する: マップタイプ切替のコントロールを表示する:
マップタイプ初期設定: マップの幅:ピクセル, マップの高さ:ピクセル

コードの出力

下のコードをコピーし、貼り付けて下さい。

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Google Map</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=キー"
            type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        var point = new GLatLng;
        map.setCenter(point, );
         
         
        map.setMapType();
        var marker = new GMarker(point);
         
         
        map.addOverlay(marker);
         
      }
    }
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: px; height: px"></div>
  </body>
</html>

※Maps API を使うには、サイト固有のAPIキーを取得して下さい。

キーを取得して、出力したコード、上から7行目「key=キー」のキーの部分に貼り付けてください。


Copyright© 2010 BBFuji.jp