マーカーや吹き出しの付いたオリジナル地図を作る
自分のWebサイトに地図を表示する
Google Maps ウィザード(Wizard) / 簡単・無料地図作成

この機能をフルに使って作成したサンプル地図を見る

 地図の中心点を決めます。地図上にマーカーを立てることができます。

 地図の大きさ、吹き出しの内容、各種コントロールなどを設定します。

• ページを開いた時に表示される地図のタイプ： 　▼ 必ずお選びください...　 　・地図 　・航空写真 　・地図+航空写真 　・地形図
  • それぞれ、
    　地図 ・・・・・・・・ G_NORMAL_MAP
    　航空写真 ・・・・・・ G_SATELLITE_MAP
    　地図 + 航空写真・・・ G_HYBRID_MAP
    　地形図 ・・・・・・・ G_PHYSICAL_MAP　のコードが使われます。
    

    ---

• 地図の横幅：  px      地図の縦幅：   px

  ---

• 吹き出し(InfoWindow = 情報ウィンドウ)に表示する文章を入力する。
  • 何も書かなければ吹き出しは表示されません。
  • 改行をしたい場合は、 <br />　という文字を間に書いてください。
    

  ---

• 地図を開いた時に吹き出しを表示させる：
  • チェックしなければマーカーをクリックした時に表示されます。

  ---

• ズームと移動の矢印を表示する： 小さいサイズ 　 　　 大きいサイズ 　
  　　　　　　　　　　　　　　： 3Dの小さいサイズ 　 3Dの大きいサイズ
  • 大きいサイズを選択した場合は、地図の縦幅を「370px」以上にすることをおすすめします。
  • それぞれ下記のコードが追加されます。
    　・小さいサイズ　　　　 map.addControl(new GSmallMapControl());
    　・大きいサイズ　　　 　map.addControl(new GLargeMapControl());
    　・3Dの小さいサイズ　　map.addControl(new GSmallZoomControl3D());
    　・3Dの大きいサイズ　　map.addControl(new GLargeMapControl3D());
    　

  ---

• 地図タイプ切り換えボタンを表示する：
  • の3タイプを切り換えることができます。
    
    
    • [地形図]ボタンを追加する：
      • さらにこのボタンをチェックすると、『地図/航空写真/地図+写真/地形』と、地形図を追加した4タイプの地図を切り換えて使えます。
        
        
    • [Earth]ボタンを追加する：
      • さらにこのボタンをチェックすると、『地図/航空写真/地図+写真/地形/Earth』と、3Dマップを追加することができ、地形図もチェックしてあれば5タイプの地図を切り換えて使えます。
        
        ・上記、3つをチェックした場合このようなボタンになります。
        
        
        
  • 下記のようにご自身でコードを書き換えることで、ボタンの表示形式を変えることができます。(下の例は、上の3項目全てをチェックした5タイプ表示の場合です)
    
    
  • map.addControl(new GMapTypeControl());　のコードを、
    map.addControl(new GMapTypeControl(true));　と、「true」を入れて書くと、ボタンをコンパクトにすることができます。下がコンパクトになったボタンです。
    
    
    
  • また、
    map.addControl(new GMapTypeControl());　を、
    map.addControl(new GHierarchicalMapTypeControl());　と書くと、下のボタンのようになり、『航空写真』をクリックすると『地名を表示』のチェックボタンが出るようになります。
    
    
    
  • これに、
    map.addControl(new GHierarchicalMapTypeControl(true));　と、
    「true」を入れるとさらに小さくなります。
    
    
  • また、
    map.addControl(new GMapTypeControl());　を、
    map.addControl(new GMenuMapTypeControl());　のように、「Menu」という文字を追加すると、下の図の左側のようにボタンが小さくなって一行で表示され、小さい地図を使う場合などに便利です。
    
    ボタンをクリックすると、右側のように、
    『地図/航空写真/地図+写真/地形/Earth』の項目がリストで表示されるようになります。
    
    
  • これに、
    map.addControl(new GMenuMapTypeControl(true));　と、「true」を入れるとボタンの横幅をさらに小さくすることができます。
    
    右側は、これをクリックし内容がリスト表示されたイメージです。
    

  ---

• 現在地を表示する：
  • この項目をチェックすると、地図右上に、現在地（地図の中心点）を示す地名などが文字で表示されます。いわゆる「パンくずリスト」のようなもので、航空写真や地形図を見る場合などに現在地が分かって便利です。
    　　　
  • map.addControl(new GNavLabelControl());　のコードが追加されます。
  • 通常は「地図タイプ切り換えボタン」の上に重なって表示されます。地図を動かさなければ約15秒で消えますが、「切り替えボタン」と重ならないようにするには、「切り替えボタン」が少し下に表示されるようにコードを書き換えます。

    map.addControl(new GMapTypeControl());　を、下記のように書き換え、コントロールボタンを下に下げるコードを追加します。

    map.addControl(new GMapTypeControl(),
    new GControlPosition(G_ANCHOR_TOP_RIGHT,
    new GSize(6,25)));

  ---

• 左下に、地図スケール(縮尺定規)を表示する：
  • map.addControl(new GScaleControl());　のコードが追加され、このような定規が表示されます。この大きさが標準です。
    　
    
    
  • 地図スケール(縮尺定規)の大きさを変更するには...　
  • map.addControl(new GScaleControl(200));　とコードを変更すると大きいスケールが表示されます。
    　
  • map.addControl(new GScaleControl(50));　とコードを変更すると小さいスケールが表示されます。
    　
  
  
  • 地図スケール(縮尺定規)で、メートル(キロメートル)、フィート(マイル)表記の上下を入れ替えるには...　
  • 地図スケール(縮尺定規)を表示する設定にすると、フィート単位とメートル単位がセットになって表示されます。APIキーを取得したままのコードではフィート単位が上に表示されますが、これを上下入れ替えることができます。
  • 取得したままのコードでは、http://maps.google.com/maps のスクリプトを呼び出すようになっており、フィート(マイル)が上にあります。（画像左）
  • これを、http://maps.google.co.jp/maps のスクリプトを呼び出せばメートル(キロメートル)が上になります。（画像右）
    
  　　
  • この「地図作成プログラム」では、メートル単位が上に来るようにコードが書き出されます（http://maps.google.co.jp/maps）ので、適宜変更して下さい。
    

---

• 右下に、折りたたみ可能な広域表示の小さい地図を表示する：
  • map.addControl(new GOverviewMapControl());　のコードが追加されます。
    このコードを、
    map.addControl(new GOverviewMapControl(new GSize(200,150)));　のように、数字を入れたコードに書き換えるとサイズを変えることができます。数字を入れない場合は120×120で表示されます。下の図はデフォルトの120×120です。
    機能をフルに使ったサンプル地図では、(200,100)と設定してあります。
     

  ---

• マウスホイールでズームする：
  • この項目をチェックすると、マウスホイールでズームイン／ズームアウトができるようになります。
  • map.enableScrollWheelZoom();　のコードが追加されます。

  ---

• ダブルクリックでズームさせない：
  • 通常は、ダブルクリックでズームイン(左ボタン)／ズームアウト(右ボタン)ができますが、ズームさせないでダブルクリック地点をセンターに持ってくるようにしたい場合、このボタンをチェックしてください。
  • map.disableDoubleClickZoom();　のコードが追加されます。

  ---

• 日本の地名を英語(ローマ字)と併記させるには...　
  • 日本の地名や駅名を英語(ローマ字)と併記させることができます。「API キー」の末尾の部分に「&hl=en」というコードを追加します。
  • 「&key=★&hl=en"」と書きます。「★」は、あなたのWebサイトのURLで取得した「マップ API キー」です。
  • ただし、この書き方をするとボタン類も英語表記になってしまいます。また、「中国」の地名も英語になってしまいます。このような地図になります。日本人からすると、中国の地名は漢字の方が感覚的に分かりやすいですね。中国の地名に特化した地図をこちらに用意していますのでご利用下さい。
  • なお、ブラウザなどの言語設定を英語にしている場合は、何もしなくても英語が併記されます。

  ---

• ローディング GIF を表示させるには...　
  • 回線スピードが遅い場合などに、地図が表示されるまでの間、このような くるくる回る画像(Loading GIF)を表示させることができます。
  • 完成したコードの、下から三行目の、 <div id="map" style="width: 500px; height: 400px"></div> のコードに画像へのリンクを書き足します。
  • 例えばこのサイトには、くるくる画像(Loading GIF)を紹介するページがあり、そこに画像が保存されているので、その場所を参照し次のようなコードを書きました。
  • <div id="map" style="width: 500px; height: 400px"><img src="../loading_images/img-popular/FFF-C00-05.gif" width="32" height="32" /></div>
  • これを画像ではなく文字で書くこともできます。 <div id="map" style="width: 500px; height: 400px">読み込み中... Loading...</div> などと画像の代わりに文字を書きます。

 コードをコピーし、Goole APIキーを貼り付け完成させます。

<!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マップ</title>

    <script src="http://maps.google.jp/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);
        
        
        
      }
    }
	window.onload=load;
	window.unload=GUnload;
    //]]>
    </script>
  </head>

  <body>
    <div id="map" style="width: px; height: px"></div>
  </body>
</html>