一覧に戻る

マーカーと情報窓付きのGoogleマップを作る(携帯ページにも使えるGoogle Static Mapsはこちら

このウィザードはGoogle Maps APIを使います。

地図の表示、マーカーの位置をカスタマイズする


地図の表示を変えるには:

マップコントロールを使って望みのズームレベルまでズームイン・ズームアウトしましょう。


マーカーを作るには:

望みの住所、場所を入れてボタンを押します。もしマーカーが少しずれていたらドラッグして調整できます。



情報窓と地図のコントロールをカスタマイズする

マーカーをクリックした時に次の文章を表示する(吹き出し不要の場合は空のままにしてください): 


地図が読み込まれたらすぐに情報窓を表示する: 

パン・ズームコントロールを表示する: 

マップの形式のコントロールを表示する: 

地図の幅:        地図の高さ: 

既定の地図の形式: 


コードを作る

Maps API にはあなたのGoogle アカウントとWebサイトのURLに関連付いた 無料のAPIキーが必要です。 Maps APIの利用規約(英語)に同意して使ってください。 APIキーはこちらで作ることができますので、 キーを下のscriptタグの中にある "&key=" パラメーターの後に付け足してください。
(訳注:metaタグでcharset=Shift_JISを設定してあります。UTF-8、EUC-JPなどを使う場合は変更してください。)


<!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=Shift_JIS"/>
    <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 center = new GLatLng;

        map.setCenter(center, );
        
        
        map.setMapType();

        
        
        

        map.addOverlay(marker);

        
      }
    }

    //]]>
    </script>
  </head>

  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: px; height: px"></div>
  </body>
</html>

携帯用にも使えるGoogle Staticマップはこちら


訳者: twk 一部意訳、変更しています。英語原文ページ