Search

Google Maps JavaScript API v3

Google Maps JavaScript API V3

Google Maps API v3について

2011/6/26

Google Maps JavaScript API V3

Google Maps JavaScript APIのバージョン2は廃止され、バージョン3に移行しました。

バージョン3からはAPIキーなしで利用できます。

また、パソコンだけでなく、スマートフォン等の携帯端末でも高速に動作するようになり、Google Mapと端末のGPS機能を連動させたアプリなども作成できるようになりました。

基本的な地図の埋め込み方法

2011/6/26

地図の埋め込み例として、「表参道駅」を中心とした地図をPC、スマートフォンで表示する流れを説明します。

  1. Google Maps APIを読み込む

    head要素内でGoogle Maps APIを読み込みます。 

    <meta name='viewport' content='initial-scale=1.0, user-scalable=no' />
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script>

    「metaタグのviewport」は、スマートフォン向けの指定です。 スマートフォンで地図を全画面表示させる場合、地図サイズを端末の画面いっぱいに表示されるよう幅・高さ共に100%で指定するため、ユーザーが端末の画面を拡大・縮小できないようにviewportでスケールを固定にします。

    「sensor」パラメータは、ユーザーの位置情報を取得するのにセンサーを使用するかどうかの有無を指定します。 PCサイトで使う場合は、PCにはGPS機能がないので、「false」を指定します。 AndroidやiPhoneなどスマートフォン向けのサイトで使う場合は、端末にGPS機能があるので「true」を指定します。

    ※この「sensor」パラメータは必須です。指定しないとおこられます。

  2. 地図の表示領域と地図サイズを指定

    地図を表示する領域は、body要素内にdiv要素で指定します。
    div要素には任意のID名を付け、地図のサイズを定義します。 このID名は、地図を生成する際、Mapオブジェクトの第1引数に指定します。

    スマートフォン向けの地図で画面いっぱいに表示する場合は、div要素の幅・高さに100%を指定します。 

    <style>
html, body { height:100%; margin:0; padding:0; }
#map { height:100%; }
</style>
<div id='map'></div>

    PC向けの地図で画面いっぱいに表示しない場合は、div要素に任意の幅・高さを指定します。 

    <style>
#map { width:500px; heght:400px; }
</style>
<div id='map'></div>
  3. 緯度・経度を取得

    場所の緯度・経度は、住所を地理上の座標（緯度・経度等）に変換するGeocoding APIで取得できます。 ここでは、表参道駅の緯度・経度を取得してみます。

    ◆ジオコード
    Geocoding APIのaddressパラメータに「表参道駅」を指定し、下記のURLにブラウザでアクセスすると、XML形式で場所の位置情報が返ります。

    http://maps.google.com/maps/api/geocode/xml?address=%E8%A1%A8%E5%8F%82%E9%81%93&sensor=false

    XMLのGeocodeResponse/result/geometry/locationノード内のlat、lngノードの値が、緯度・経度になります。 

    <?xml version="1.0" encoding="utf-8"?>
<GeocodeResponse>
  <status>OK</status>
  <result>
    <type>train_station</type>
    <type>transit_station</type>
    <formatted_address>日本, 表参道駅（東京）</formatted_address>
    <address_component>
      <long_name>表参道駅（東京）</long_name>
      <short_name>表参道駅（東京）</short_name>
      <type>train_station</type>
      <type>transit_station</type>
    </address_component>
    <address_component>
      <long_name>日本</long_name>
      <short_name>JP</short_name>
      <type>country</type>
      <type>political</type>
    </address_component>
    <geometry>
      <location>
        <lat>35.6652470</lat>
        <lng>139.7123140</lng>
      </location>
      <location_type>APPROXIMATE</location_type>
      <viewport>
        <southwest>
          <lat>35.6573860</lat>
          <lng>139.7030010</lng>
        </southwest>
        <northeast>
          <lat>35.6724400</lat>
          <lng>139.7210990</lng>
        </northeast>
      </viewport>
      <bounds>
        <southwest>
          <lat>35.6573860</lat>
          <lng>139.7030010</lng>
        </southwest>
        <northeast>
          <lat>35.6724400</lat>
          <lng>139.7210990</lng>
        </northeast>
      </bounds>
    </geometry>
  </result>
</GeocodeResponse>

    ◆Googleマップ検索
    Googleマップからも場所の緯度・経度を取得可能です。 「表参道駅」で地図を検索し、右上の「リンク」をクリックされてると表示される「このリンクをメール・・・」のURLに含まれる「sllパラメータ」の値が表参道駅の緯度・経度になります。 

    http://maps.google.co.jp/maps?
q=%E8%A1%A8%E5%8F%82%E9%81%93%E9%A7%85
&hl=ja
&ie=UTF8
&sll=36.5626,136.362305
&sspn=68.192218,117.773438
&brcurrent=3,0x60188c99569a36dd:0xb9034c9751b5b2e2,0
&z=16
  4. 地図オブジェクトを生成

    地図オブジェクトを作成し、地図の表示領域となるdiv要素のID名と地図オプションを渡します。 この処理は関数化しておきます。

    地図オプションには、地図タイプ、ズームレベル、地図の中心地点を指定します。 地図の中心地点には、3.で取得した緯度・経度のLatlng値を指定します。 

    <script type='text/javascript'>
/* ページ読み込み時に地図を初期化 */
function initialize() {
  /* 緯度・経度：日本, 表参道駅（東京）*/
  var latlng=new google.maps.LatLng(35.6652470, 139.7123140);
  /* 地図のオプション設定 */
  var myOptions = {
    zoom: 14, /*初期のズーム レベル */
    center: latlng, /* 地図の中心地点 */
    mapTypeId: google.maps.MapTypeId.HYBRID /* 地図タイプ */
  };
  /* 地図オブジェクト生成 */
  var map=new google.maps.Map(document.getElementById('map'), myOptions);
}
</script>
  5. 地図の読み込み

    ページロード時に、地図オブジェクトを生成する関数を呼びます。 

    <body onload='initialize()'>
  <div id='map'></div>
</body>

設置サンプル

「表参道駅」（lat:35.6652470, lng:139.7123140）を中心とした地図を表示。

iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        function initialize() {
            /* 緯度・経度：日本, 表参道駅（東京）*/
            var latlng=new google.maps.LatLng(35.6652470, 139.7123140);
            /* 地図のオプション設定 */
            var myOptions = {
                /*初期のズーム レベル */
                zoom: 18,
                /* 地図の中心点 */
                center: latlng,
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map=new google.maps.Map(document.getElementById("map"), myOptions);
        }
    </script>
    <style type="text/css">
        html, body { margin:0; padding:0; }
        #map { width:100%; height:100%; }
    </style>
</head>
<body onload="initialize()">
    <!-- 地図の埋め込み表示 -->
    <div id="map"></div>
</body>
</html>

緯度・経度の地理的な座標位置
LatLngクラス

2011/6/26

Google Maps JavaScript API V3 - LatLngクラス

LatLng(緯度, 経度[, noWrapフラグ])

LatLngは、指定した緯度と経度の地理的な座標位置を生成します。

noWrapフラグがtreの場合、緯度・経度の数値がそのまま使用されます。 falseの場合は、緯度は-90～+90度の範囲、経度は、-180～+180度の範囲に収まるよう修正されます。

地図またはマーカーがクリックされた時に、イベントが発生した位置の緯度・経度を取得する場合は、LatLngクラスのメソッドを使用します。 詳細はこちら。

地図オプション
MapOptionsオブジェクト

2011/6/26

google.maps.MapOptionsオブジェクト

地図には、下記のオプションを指定可能です。

以下の3つは必須指定項目です。
・地図の中心地点（center）
・地図タイプ（mapTypeId）
・ズームレベル（zoom）

地図のオプション設定は、setOptionsメソッドで変更できます。

MapOptionsオブジェクトのプロパティ
プロパティ説明
backgroundColor 地図を描画するDIV要素の背景色を指定。
読み込みや移動時など地図のレンダリング中に表示されます。
このオプションは地図を初期化した時のみ設定可能。
center 地図の中心地点を緯度・経度をLatLngオブジェクトで指定。
※必須
disableDefaultUI 地図上のすべてのデフォルトUIを無効にする場合はtrueを指定。
デフォルトはfalse（有効）。
disableDoubleClickZoom 地図のダブルクリック時に、ズームとセンターを無効にする場合はtrueを指定。
デフォルトはfalse（有効）。
draggable 地図上でのドラッグ操作を無効にする場合はfalseを指定。
デフォルトはtrue（有効）。
draggableCursor ドラッグ可能な地図上に表示されるカーソルを名前またはURLで指定。
例：draggableCursor:'crosshair'
draggingCursor 地図がドラッグされている時に表示されるカーソルを名前またはURLで指定。
例：draggingCursor:'url(/content/img/cur/qoo-n_02.cur)'
heading カメラの方角を指定。
北からの相対角度（北が0°、東が90°、南が180°、西は270°）
keyboardShortcuts 地図上でのキーボード操作を無効にする場合はfalseを指定。
デフォルトはtrue（有効）。
mapMaker 地図メーカーのタイルでなく、通常のタイルを使用する場合はtrueを指定。
デフォルトはfalse。
mapTypeControl 地図タイプコントロールを初期表示しない場合はfalseを指定。
デフォルトはtrue（表示）。
mapTypeControlOptions 地図タイプコントロールの初期表示オプションを指定。
mapTypeId 初期の地図タイプを指定。
※必須
maxZoom 地図の最大ズームレベルを指定。
省略したりnullを指定した場合は、現在の地図タイプから最大ズームが代用されます。
minZoom 地図の最小ズームレベルを指定。
省略したりnullを指定した場合は、現在の地図タイプから最小ズームが代用されます。
noClear 地図を描画するDIV要素の内容を消去しない場合はtrueを指定。
デフォルトはfalse（消去）。
overviewMapControl 概観地図コントロールを無効にする場合はfalseを指定。
デフォルトはtrue（有効）。
overviewMapControlOptions 概観地図コントロールの表示オプションを指定。
panControl 移動コントロールを無効にする場合はfalseを指定。
デフォルトはtrue（有効）。
panControlOptions 移動コントロールの表示オプションを指定。
rotateControl 回転コントロールを無効にする場合はfalseを指定。
デフォルトはtrue（有効）。
rotateControlOptions 回転コントロールの表示オプションを指定。
scaleControl スケールコントロールを初期表示しない場合はfalseを指定。
デフォルトはtrue（有効）。
scaleControlOptions スケールコントロールの初期表示オプションを指定。
scrollwheel 地図上上で、マウスホイールによるズームスクロール（地図の拡大・縮小）を無効にするにはfalseを指定。 デフォルトはtrue（有効）。
streetView ストリートビューでペグマンが地図上にドロップされた時に表示するストリートビューパノラマを指定。 パノラマが指定されていない場合は、デフォルトのストリートビューパノラマが地図のDIV要素内に表示されます。
streetViewControl ストリートビューペグマンコントロールを初期表示しない場合はfalseを指定。 このコントロールはデフォルトUIの一部で、ストリートビューのストリートオーバーレイが表示されない地図タイプを表示するときにはfalseに設定する必要があります。
streetViewControlOptions ストリートビューペグマンコントロールの初期表示オプションを指定。
styles デフォルトの地図タイプにそれぞれ適用するスタイルを指定。
スタイルは地図タイプがSATELLITE、HYBRIDの場合のみ適用されます。
tilt 地図の傾きを指定。
0または45のいずれかを指定可能。
地図が45度の傾きに対応していない場所では適用されません。
zoom 地図の初期のズームレベルを指定。
※必須
zoomControl ズームコントロールを非表示にする場合はfalseを指定。
デフォルトはtrue（表示）。
zoomControlOptions ズームコントロールの表示オプションを指定。

地図タイプ
MapTypeIdクラス

2011/6/26

google.maps.MapTypeIdクラス

Googleマップで指定可能な地図タイプは下記の4種類。
地図オプションの設定で、地図タイプのIDを下記のように指定します。 

{
  mapTypeId: google.maps.MapTypeId.HYBRID
}

地図タイプは、setMapTypeIdメソッドで変更できます。

MapTypeIdクラス
表示イメージ定数
ROADMAP

ROADMAP

デフォルトの道路地図。2Dタイル。

SATELLITE

SATELLITE

Google Earthの航空写真。写真タイル。

HYBRID

HYBRID

デフォルト＋航空写真の組合せ。

TERRAIN

TERRAIN

起伏、高度、山、河川など地形情報に基づいて物理的なマップタイルを表示。

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて / RSS

©2026 PHP & JavaScript Room All Rights Reserved.

pagetop