全国地名読み方目次 県庁所在地 ・ここは何県? 形で当てよう都道府県  ジグソーパズル・日本地図を作ろう
地図上で距離を測る 地図上で直線距離を測る 緯度経度を調べる[10進数]  緯度経度を調べる[60進数]  地図で見る世界の国 世界の首都
環状鉄道[日本] 環状鉄道[国外] クイズ/ここはどこ? 面積を測る 地図クリックで住所  地図クリックで標高
ルート検索[徒歩] ルート検索[車] 世界の言語で距離計測 自治体などの境界表示 天体写真 距離指定半径内情報 原発列島

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

 地図作成補助ツール
 (地図の大きさを確認しながら
座標[緯度経度]を取得)
 世界の言語で見る
このページは、 Google Maps API の「Version 2」 の仕様に沿って書いています。
Google Maps API は、現在、「Version 3」にアップデートされており、「マップ API キー」の取得の必要がなくなるなど、変更が生じています。
「Version 3」に対応した内容に改める予定ですが、更新日は未定です。どうぞご了承ください。
  この機能をフルに使って作成したサンプル地図を見る
  

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

  • 住所、駅名、キーワード、座標などを入力し、[中心点にする]のボタンを押してください。
  • マーカーの位置を微調整したい場合は、マーカーを摘んで移動してください。
  • 地図のズームレベルを決めます。のボタンを操作してください。

    * 必ず、「ここを中心点にする」をクリックしてから「2」の作業に移ってください。 ▼操作[2]へ
 *この地図上の操作で設定に反映されるのはマーカーの位置と、「+」「-」でのズームレベルのみです。 
 *その他の各種コントロールは下記項目で設定します。 
 *この地図は各種コントロールを設定したサンプルとしてご覧ください。 *この地図の大きさは630x370です。

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

▼操作[3]へ ▲操作[1]へ ▲ページ先頭へ

  • ページを開いた時に表示される地図のタイプ:
      • それぞれ、
         地図 ・・・・・・・・ G_NORMAL_MAP
         航空写真 ・・・・・・ G_SATELLITE_MAP
         地図 + 航空写真・・・ G_HYBRID_MAP
         地形図 ・・・・・・・ G_PHYSICAL_MAP のコードが使われます。

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

    • チェックしなければマーカーをクリックした時に表示されます。

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

    • 地図/航空写真/地図+写真 の3タイプを切り換えることができます。

        • さらにこのボタンをチェックすると、『地図/航空写真/地図+写真/地形』と、地形図を追加した4タイプの地図を切り換えて使えます。

        • さらにこのボタンをチェックすると、『地図/航空写真/地図+写真/地形/Earth』と、3Dマップを追加することができ、地形図もチェックしてあれば5タイプの地図を切り換えて使えます。

          ・上記、3つをチェックした場合このようなボタンになります。
          地図/航空写真/地図+写真/地形/Earth

    • 下記のようにご自身でコードを書き換えることで、ボタンの表示形式を変えることができます。(下の例は、上の3項目全てをチェックした5タイプ表示の場合です)

    • map.addControl(new GMapTypeControl()); のコードを、
      map.addControl(new GMapTypeControl(true)); と、「true」を入れて書くと、ボタンをコンパクトにすることができます。下がコンパクトになったボタンです。
      地図/写真/両方/地形/Earth

    • また、
      map.addControl(new GMapTypeControl()); を、
      map.addControl(new GHierarchicalMapTypeControl()); と書くと、下のボタンのようになり、『航空写真』をクリックすると『地名を表示』のチェックボタンが出るようになります。
      地図/航空写真/地形/Earth

    • これに、
      map.addControl(new GHierarchicalMapTypeControl(true)); と、
      「true」を入れるとさらに小さくなります。地図/写真/地形/Earth

    • また、
      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キーを取得したままのコードではフィート単位が上に表示されますが、これを上下入れ替えることができます。
    • 取得したままのコードでは、https://maps-api-ssl.google.com/maps のスクリプトを呼び出すようになっており、フィート(マイル)が上にあります。(画像左)
    • これを、https://maps-api-ssl.google.com/maps のスクリプトを呼び出せばメートル(キロメートル)が上になります。(画像右)
    •   
    • この「地図作成プログラム」では、メートル単位が上に来るようにコードが書き出されます(https://maps-api-ssl.google.com/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 くるくる回る画像(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キーを貼り付け完成させます。

  • この地図をあなたのWebサイトに表示するには、あなたのWebサイトのURLで取得した「マップ API キー」が必要です。「API キー」を取得するには、 「Google アカウント 」を取得している必要があります。「API キー」は、ここから取得することができます。「Google アカウント」および「マップ API キー」の取得及びこの地図の利用は基本的に無料です。
  • 取得したキーを、コードの中の「&key=★"」の「★」の部分に書きます。
<!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>

・行間が空いた部分は、ペーストした際に削除しても結構です。
・更に詳しい説明や高度なテクニックなどは、Google Maps APIのページにあります。

こちらもオススメです…
ちょっと便利帳目次へ
お気付きの点,情報などがごさいましたら,こちらからお知らせください
ご質問にはお答え致しかねます。ご了承ください。
掲載しているデータの,法律上の “引用” の範囲を超えての無断転載・無断転用を禁じます - 見解と取り組み。
カスタム検索