Search

Google Maps JavaScript API v3地図のコントロール

  1. コントロールの種類と表示設定
  2. コントロールの無効化
  3. ナビゲーションコントロール〔※廃止〕
  4. 地図タイプコントロール〔MapTypeControlOptions / MapTypeControlStyle〕
  5. 外観地図コントロール〔OverviewMapControlOptions〕
  6. 移動コントロール〔PanControlOptions〕
  7. 回転コントロール〔RotateControlOptions〕
  8. スケールコントロール〔ScaleControlOptions / ScaleControlStyle〕
  9. ストリートビューコントロール〔StreetViewControlOptions〕
  10. ズームコントロール〔ZoomControlOptions / ZoomControlStyle〕
  11. コントロールの表示位置〔ControlPosition〕
  12. カスタムコントロールの指定〔描画、イベント処理〕
Google Maps JavaScript API V3

コントロールの種類と表示設定

2012/5/6

Googleマップ上に表示可能なコントロールは下記のとおりです。 地図上に表示するコントロールにはデフォルトで表示されるものと、明示的に指定しないと表示されないものがあります。 地図のオプション設定のプロパティに表示・非表示を設定することで地図上に表示されるコントロールを制御できます。

プロパティ名説明
mapTypeControll地図タイプコントロール。
デフォルトで地図の右上に表示されるボタン。
overviewMapControl概要地図コントロール。地図に折りたたみ可能な概観地図を追加します。デフォルトでは表示されません。
panControl移動コントロール。
デフォルトで地図の左上に表示される地図を移動するためのコントロール。
RotateControl回転コントロール。
scaleControllスケールコントロール。
地図の左下に表示される地図の縮尺。デフォルトはは表示されません。
streetViewControlストリートビュー。
地図の左上に表示されるペグマンコントロール。地図にドラッグ&ドロップするとストリートビューを表示します。
zoomControlズームコントロール。
デフォルトで地図の左上に表示される±スケール。

※ナビゲーションコントロールは廃止されました。

各コントロールの表示位置は各コントロールのオプション設定で変更可能です。詳細はこちら。

設置サンプル

下記のサンプルでは、全てのコントロールを表示します。

iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html> 
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
        });
        function initialize() {
            /* 緯度・経度：日本, 表参道駅（東京）*/
            var latlng=new google.maps.LatLng(35.665270, 139.712330);
            /* 地図のオプション設定 */
            var myOptions = {
                /*初期のズーム レベル */
                zoom: 18,
                /* 地図の中心点 */
                center: latlng,
                /* ★コントロールの追加 */
                navigationControl: true,
                zoomControl: true,
                zoomControlOptions:{
                    style:google.maps.ZoomControlStyle.SMALL
                },
                mapTypeControl: true,
                scaleControl: true,
                streetViewControl: true,
                overviewMapControl:true,
                overviewMapControlOptions:{
                    opened: true
                },
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }
    </script>
</head>
<body>
    <h3>各種コントロールの表示</h3>
    <p>地図にコントロールを明示的に追加します。</p>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

コントロールの無効化

2011/6/26

Googleマップ上に表示される全てのコントロールを無効化するには、MapOptionsオブジェクトのdisableDefaultUIプロパティに「true」を指定します。 

{
  disableDefaultUI: true
}
iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html> 
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
        });
        function initialize() {
            /* 緯度・経度：日本, 表参道駅（東京）*/
            var latlng=new google.maps.LatLng(35.665270, 139.712330);
            /* 地図のオプション設定 */
            var myOptions = {
                /*初期のズーム レベル */
                zoom: 18,
                /* 地図の中心点 */
                center: latlng,
                /* ★デフォルトのUI設定 */
                disableDefaultUI: true,
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }
    </script>
</head>
<body>
    <p>地図のデフォルトのUIを無効化します。</p>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

ナビゲーションコントロール
※廃止

2011/6/26

ナビゲーションコントロールは廃止され、ズームコントロールと移動コントロールに分割されました。 参照：Controls Overview

ナビゲーションコントロールには4種類のスタイルがあります。

コントロールのスタイルを変更するには、MapOptionsオブジェクトのnavigationControlプロパティに「true」を指定し、 下記のいずれかをnavigationControlOptionsのstyleプロパティに指定します。 

{
  navigationControl: true,
  navigationControlOptions: {
    style:google.maps.NavigationControlStyle.SMALL
  }
}
ナビゲーションコントロールの種類
表示イメージ説明・サンプル
google.maps.NavigationControlStyle.SMALL
ミニサイズのズームコントロールを表示。
※スマートフォン端末では、＋－ボタンが表示されます。
google.maps.NavigationControlStyle.ANDROID
AndroidのGoogleマップアプリのコントロールを表示。
google.maps.NavigationControlStyle.ZOOM_PAN
Googleマップの標準コントロールを表示。
※スマートフォン端末では、＋－ボタンが表示されます。
- google.maps.NavigationControlStyle.DEFAULT
地図サイズと端末に応じて最適なコントロールが表示されます。

ナビゲーションコントロール（ズームパン）を追加

style:google.maps.NavigationControlStyle.ZOOM_PAN

Googleマップで表示される標準コントロール（ズームスライダーコントロールと移動コントロール）を表示します。

iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html> 
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
        });
        function initialize() {
            /* 緯度・経度：日本, 表参道駅（東京）*/
            var latlng=new google.maps.LatLng(35.665270, 139.712330);
            /* 地図のオプション設定 */
            var myOptions = {
                /*初期のズーム レベル */
                zoom: 18,
                /* 地図の中心点 */
                center: latlng,
                /* ★ナビゲーションコントロール */
                disableDefaultUI: true, /* 一旦全てのUIを無効化 */
                navigationControl: true,
                navigationControlOptions: {
                    style:google.maps.NavigationControlStyle.ZOOM_PAN
                },
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }
    </script>
</head>
<body>
    <h3>ナビゲーションコントロールの指定</h3>
    <p>地図にナビゲーションコントロール（ZOOM_PAN）を追加します。Googleマップで表示される標準コントロール（ズームスライダコントロールや移動コントロール）が表示されます。</p>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

ナビゲーションコントロール（小）を追加

style:google.maps.NavigationControlStyle.SMALL

±ボタンのみのミニズーム コントロールを表示します。省スペースでボタンも押しやすいので、スマートフォンに最適なコントロールです。

iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html> 
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
        });
        function initialize() {
            /* 緯度・経度：日本, 表参道駅（東京）*/
            var latlng=new google.maps.LatLng(35.665270, 139.712330);
            /* 地図のオプション設定 */
            var myOptions = {
                /*初期のズーム レベル */
                zoom: 18,
                /* 地図の中心点 */
                center: latlng,
                /* ★ナビゲーションコントロール */
                disableDefaultUI: true, /* 一旦全てのUIを無効化 */
                navigationControl: true,
                navigationControlOptions: {
                    style:google.maps.NavigationControlStyle.SMALL
                },
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }
    </script>
</head>
<body>
    <h3>ナビゲーションコントロールの指定</h3>
    <p>地図にナビゲーションコントロール（小）を追加します。</p>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

ナビゲーションコントロール（Android）を追加

style:google.maps.NavigationControlStyle.ANDROID

Android端末のGoogleマップアプリで使用されている小さなズームコントロールを表示します。iPhoneでもAndroid野コントロールが表示されます。

iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html> 
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
        });
        function initialize() {
            /* 緯度・経度：日本, 表参道駅（東京）*/
            var latlng=new google.maps.LatLng(35.665270, 139.712330);
            /* 地図のオプション設定 */
            var myOptions = {
                /*初期のズーム レベル */
                zoom: 18,
                /* 地図の中心点 */
                center: latlng,
                /* ★ナビゲーションコントロール */
                disableDefaultUI: true, /* 一旦全てのUIを無効化 */
                navigationControl: true,
                navigationControlOptions: {
                    style:google.maps.NavigationControlStyle.ANDROID
                },
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }
    </script>
</head>
<body>
    <h3>ナビゲーションコントロールの指定</h3>
    <p>地図にナビゲーションコントロール（ANDROID）を追加します。Android端末のGoogleマップアプリで使用されている小さなズームコントロールが表示されます。</p>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

ナビゲーションコントロール（デフォルト）を追加

style:google.maps.NavigationControlStyle.DEFAULT

地図サイズと、デバイスに応じて最適なナビゲーションを表示します。

設置サンプルサンプルを見る
<!DOCTYPE html> 
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
        });
        function initialize() {
            /* 緯度・経度：日本, 表参道駅（東京）*/
            var latlng=new google.maps.LatLng(35.665270, 139.712330);
            /* 地図のオプション設定 */
            var myOptions = {
                /*初期のズーム レベル */
                zoom: 18,
                /* 地図の中心点 */
                center: latlng,
                /* ★ナビゲーションコントロール */
                disableDefaultUI: true, /* 一旦全てのUIを無効化 */
                navigationControl: true,
                navigationControlOptions: {
                    style:google.maps.NavigationControlStyle.DEFAULT
                },
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }
    </script>
    <style type="text/css">
        #map_canvas { width:100%; height:100%; }
    </style>
</head>
<body>
    <h3>ナビゲーションコントロールの指定</h3>
    <p>地図にナビゲーションコントロール（デフォルト）を追加します。</p>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

地図タイプコントロール
MapTypeControlOptions / MapTypeControlStyle

2011/6/26

地図タイプを制御するコントロールです。

デフォルトで有効になっています。 地図コントロールを無効にするには、MapOptionsオブジェクトのmapTypeControlプロパティに「false」を指定します。

地図タイプコントロールのスタイルを変更するには、MapOptionsオブジェクトのmapTypeControlプロパティに「true」を指定し、 mapTypeControlOptionsオブジェクトのstyleプロパティに表示スタイルを指定します。 

mapTypeControl: true,
mapTypeControlOptions: {
  style:google.maps.MapTypeControlStyle.HORIZONTAL_BAR 
},
MapTypeControlOptionsオブジェクトのプロパティ
プロパティ説明
mapTypeIds コントロールに表示する地図タイプのID。
position 地図タイプコントロールの表示位置をControlPositionクラスの定数で指定。
デフォルトはTOP_RIGHT。 ※指定可能な定数はこちら。
style

地図タイプコントロールの表示スタイルを指定。
指定可能な定数はこちら。

MapTypeControlStyleクラスの定数
定数説明
DEFAULT google.maps.MapTypeControlStyle.DEFAULT
デフォルトの地図タイプを使用。
地図のサイズやデバイスに応じて、最適な地図タイプコントロールが表示されます。
HORIZONTAL_BAR google.maps.MapTypeControlStyle.HORIZONTAL_BAR
横並びのラジオボタンバー。
DROPDOWN_MENU google.maps.MapTypeControlStyle.DROPDOWN_MENU
ドロップダウンメニュー型の1ボタン。

地図タイプのスタイル表示切り替え

設置サンプルサンプルを見る
<!DOCTYPE>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>MapTypeControlOptionsオブジェクト | 設置サンプル</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">
        var map;
        /* 初期設定 */
        function initialize() {
            /* 緯度・経度：日本, 表参道駅（東京）*/
            var latlng=new google.maps.LatLng(35.6652470, 139.7123140);
              /* 地図のオプション設定 */
            var myOptions = {
                /* 地図の中心点 */
                center:latlng,
                /* 初期のズームレベル */
                zoom: 16,
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControlOptions:{
                    position: google.maps.ControlPosition.TOP_CENTER,    /* 地図タイプコントロールの表示位置 */
                    style: google.maps.MapTypeControlStyle.DEFAULT /* 地図タイプコントロールのスタイル */
                }
            };
            /* 地図オブジェクト */
            map=new google.maps.Map(document.getElementById("map"), myOptions);
        }
        //チェック
        function chgStyle(){
            var obj=document.getElementsByName("style");
            var o;
            for(var i=0; i<obj.length; i++){
                if(obj[i].checked){
                    console.log(obj[i].value);
                    switch(obj[i].value){
                        case "DEFAULT":
                            o=google.maps.MapTypeControlStyle.DEFAULT;
                            break;
                        case "DROPDOWN_MENU":
                            o=google.maps.MapTypeControlStyle.DROPDOWN_MENU;
                            break;
                        case "HORIZONTAL_BAR":
                            o=google.maps.MapTypeControlStyle.HORIZONTAL_BAR;
                            break;
                        default:
                            break;
                    }
                    map.setOptions({
                        mapTypeControlOptions:{
                            style:o
                        }
                    });
                    return false;
                }
            }
        }
        function chgPosition(){
            var obj=document.getElementsByName("position");
            var o;
            for(var i=0; i<obj.length; i++){
                if(obj[i].checked){
                    console.log(obj[i].value);
                    switch(obj[i].value){
                        case "TOP_RIGHT":
                            o=google.maps.ControlPosition.TOP_RIGHT;
                            break;
                        case "LEFT_CENTER":
                            o=google.maps.ControlPosition.LEFT_CENTER;
                            break;
                        case "TOP_CENTER":
                            o=google.maps.ControlPosition.TOP_CENTER;
                            break;
                        default:
                            break;
                    }
                    map.setOptions({
                        mapTypeControlOptions:{
                            position:o
                        }
                    });
                    return false;
                }
            }
        }
    </script>
    <style type="text/css">
        * { margin:0; padding:0; font-size:12px; }
        html, body { margin:0; padding:0; }
        h1, p { margin:10px; }
        #map { width:100%; height:400px; }
    </style>
</head>
<body onload="initialize()">
    <h1>MapTypeControlOptionsオブジェクト</h1>
    <p>地図タイプの表示オプションを切り替えるサンプルです。</p>
    <hr />
    <form>
        <p>
            地図タイプのスタイル：
            <label for="style_1"><input type="radio" name="style" id="style_1" onclick="chgStyle()" value="DEFAULT" checked />DEFAULT</label>
            <label for="style_2"><input type="radio" name="style" id="style_2" onclick="chgStyle()" value="DROPDOWN_MENU"  />DROPDOWN_MENU</label>
            <label for="style_3"><input type="radio" name="style" id="style_3" onclick="chgStyle()" value="HORIZONTAL_BAR" />HORIZONTAL_BAR</label>
        </p>
        <p>
            地図タイプの表示位置：
            <label for="position_1"><input type="radio" name="position" id="position_1" onclick="chgPosition()" value="TOP_RIGHT" checked />TOP_RIGHT</label>
            <label for="position_2"><input type="radio" name="position" id="position_2" onclick="chgPosition()" value="LEFT_CENTER"  />LEFT_CENTER</label>
            <label for="position_3"><input type="radio" name="position" id="position_3" onclick="chgPosition()" value="TOP_CENTER" />TOP_CENTER</label>
        </p>
    </form>
    <!-- 地図の埋め込み表示 -->
    <div id="map"></div>
</body>
</html>

地図タイプコントロール（横並びボタン）を追加

style:google.maps.MapTypeControlStyle.HORIZONTAL_BAR

Googleマップのように地図タイプコントロールを横並びのボタンで表示します。

iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html> 
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
        });
        function initialize() {
            /* 緯度・経度：日本, 表参道駅（東京）*/
            var latlng=new google.maps.LatLng(35.665270, 139.712330);
            /* 地図のオプション設定 */
            var myOptions = {
                /*初期のズーム レベル */
                zoom: 18,
                /* 地図の中心点 */
                center: latlng,
                /* ★地図タイプコントロール */
                disableDefaultUI: true, /* 一旦全てのUIを無効化 */
                mapTypeControl: true,
                mapTypeControlOptions: {
                    style:google.maps.MapTypeControlStyle.HORIZONTAL_BAR 
                },
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }
    </script>
</head>
<body>
    <h3>地図タイプコントロールの指定</h3>
    <p>Googleマップのように地図タイプコントロールを横並びのボタンで表示します。</p>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

地図タイプコントロール（ドロップダウンメニュー型の1ボタン）を追加

style:google.maps.MapTypeControlStyle.DROPDOWN_MENU

地図タイプコントロールを1つのボタンにまとめ、ドロップダウンメニューで選択可能な形式で表示します。

iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html> 
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <title>設置サンプル</title>
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
        });
        function initialize() {
            /* 緯度・経度：日本, 表参道駅（東京）*/
            var latlng=new google.maps.LatLng(35.665270, 139.712330);
            /* 地図のオプション設定 */
            var myOptions = {
                /*初期のズーム レベル */
                zoom: 18,
                /* 地図の中心点 */
                center: latlng,
                /* ★地図タイプコントロール */
                disableDefaultUI: true, /* 一旦全てのUIを無効化 */
                mapTypeControl: true,
                mapTypeControlOptions: {
                    style:google.maps.MapTypeControlStyle.DROPDOWN_MENU  
                },
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }
    </script>
</head>
<body>
    <h3>地図タイプコントロールの指定</h3>
    <p>地図タイプコントロールを1つのボタンにまとめ、ドロップダウンメニューで選択可能な形式で表示します。</p>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

地図タイプコントロール（デフォルト）を追加

style:google.maps.MapTypeControlStyle.DEFAULT

地図サイズに応じて最適な地図タイプコントロールが表示されます。 例えば、下記のサンプルのように地図サイズが小さい（200x200）の場合は、ドロップダウンメニュー型の1ボタンで表示されます。

iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html> 
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
        });
        function initialize() {
            /* 緯度・経度：日本, 表参道駅（東京）*/
            var latlng=new google.maps.LatLng(35.665270, 139.712330);
            /* 地図のオプション設定 */
            var myOptions = {
                /*初期のズーム レベル */
                zoom: 18,
                /* 地図の中心点 */
                center: latlng,
                /* ★地図タイプコントロール */
                disableDefaultUI: true, /* 一旦全てのUIを無効化 */
                mapTypeControl: true,
                mapTypeControlOptions: {
                    style:google.maps.MapTypeControlStyle.DEFAULT 
                },
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }
    </script>
    <style type="text/css">
        #map_canvas { width:200px; height:200px; }
    </style>
</head>
<body>
    <h3>地図タイプコントロールの指定</h3>
    <p>地図サイズに応じて最適な地図タイプコントロールが表示されます。 例えば、下記のサンプルのように地図サイズが小さい（200x200）の場合は、ドロップダウンメニュー型の1ボタンになります。</p>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

外観地図コントロール
OverviewMapControlOptions

2011/6/26

概要地図コントロールは、地図の右下に表示される折りたたみ可能な概観地図です。

デフォルトでは無効になっています。 概要地図コントロールを有効にするには、MapOptionsオブジェクトのoverviewMapControlプロパティに「true」を指定します。

コントロールの開閉状態についてはoverviewMapControlOptionsオブジェクトのopenedプロパティで指定します。

OverviewMapControlOptionsオブジェクトのプロパティ
プロパティ名説明
opened コントロールを開いた状態で表示する場合はtrue、折りたたまれた（最小化された）状態で表示する場合はfalseを指定。デフォルトはfalse。 
{
  overviewMapControl:true,
  overviewMapControlOptions:{
    opened: true
  }
}
iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html> 
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
        });
        function initialize() {
            /* 緯度・経度：日本, 表参道駅（東京）*/
            var latlng=new google.maps.LatLng(35.665270, 139.712330);
            /* 地図のオプション設定 */
            var myOptions = {
                /*初期のズーム レベル */
                zoom: 17,
                /* 地図の中心点 */
                center: latlng,
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                /* コントロール */
                disableDefaultUI: true, /* 一旦全てのUIを無効化 */
                overviewMapControl:true,
                overviewMapControlOptions:{
                    opened: true
                }
                
              };
            var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }
    </script>
</head>
<body>
    <h3>オーバービューマップコントロールの指定</h3>
    <p>地図の右下に折りたたみ可能な概観地図を表示します。</p>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

移動コントロール
PanControlOptions

2011/6/26

移動コントロールは、地図を上下左右に移動できるコントロールです。 デフォルトで有効になっており、地図の左上に表示されます。

デフォルトで有効になっており、地図の左上に表示されます。 移動コントロールを無効にするには、MapOptionsオブジェクトのpanControlプロパティに「false」を指定します。

移動コントロールの表示位置は、PanControlOptionsオブジェクトのpositionプロパティで変更可能です。 

{
  panControl: true,
  panControlOptions: {
    position: google.maps.ControlPosition.TOP_LEFT
  },
}
iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html> 
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>panControl | 設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
        });
        function initialize() {
            /* 緯度・経度：日本, 表参道駅（東京）*/
            var latlng=new google.maps.LatLng(35.665270, 139.712330);
            /* 地図のオプション設定 */
            var myOptions = {
                /*初期のズーム レベル */
                zoom: 18,
                /* 地図の中心点 */
                center: latlng,
                disableDefaultUI: true, /* 一旦全てのUIを無効化 */
                /* ★移動コントロールを有効化 */
                panControl: true,
                /* ★移動コントロールの表示位置 */
                panControlOptions: {
                    position: google.maps.ControlPosition.TOP_LEFT
                },
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }
    </script>
</head>
<body>
    <h3>移動コントロールの指定</h3>
    <p>地図に移動コントロールを明示的に追加します。</p>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

回転コントロール
RotateControlOptions

2011/6/26

回転コントロールは、地図の傾きを制御します。
クリックすると、表示されている地図の画像を90度ずつ回転できます。

回転コントロールは、デフォルトでは無効になっています。 有効化するには、MapOptionsオブジェクトのrotateControlプロパティに「true」を指定します。

回転コントロールの表示位置は、RotateControlOptions オブジェクトのpositionプロパティで変更可能です。 

{
  rotateControl: true,
  rotateControlOptions: {
    position: google.maps.ControlPosition.TOP_LEFT
  }
}

※地図の傾きが45度に対応していない場所では表示されません。

設置サンプルサンプルを見る
<!DOCTYPE html> 
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>RotateControl | 設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        function initialize() {
            /* 緯度・経度：サンタ・クルーズ・ビッグ・ツリーズ & パシフィック・レイルウェイ＝ボードウォーク駅 3rd St, サンタクルーズ カリフォルニア 95060 アメリカ合衆国 */
            var latlng=new google.maps.LatLng(36.964758,-122.015539);
            /* 地図のオプション設定 */
            var myOptions = {
                /*初期のズーム レベル */
                zoom: 18,
                /* 地図の中心点 */
                center: latlng,
                disableDefaultUI:true, /* 一旦全てのUIを無効化 */
                /* ★移動コントロールを有効化 */
                rotateControl: true,
                /* ★移動コントロールの表示位置 */
                rotateControlOptions: {
                    position: google.maps.ControlPosition.TOP_LEFT
                },
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.SATELLITE,
                setTile:45
            };
            var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }
    </script>
</head>
<body onload="initialize();">
    <h3>回転コントロールの指定</h3>
    <p>地図に回転コントロールを明示的に追加します。</p>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

スケールコントロール
ScaleControlOptions / ScaleControlStyle

2011/6/26

地図のズームレベルを制御するコントロールです。

デフォルトで無効になっています。 スケールコントロールを有効にするには、MapOptionsオブジェクトのscaleControlプロパティに「true」を指定します。

スケールコントロールの表示位置は、ScaleControlOptionsオブジェクトのpositionプロパティで変更可能です。 

{
  scaleControl: true,
  scaleControlOptions: {
    position: google.maps.ControlPosition.BOTTOM_LEFT
  }
}
iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html> 
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>scaleControl | 設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- 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.665270, 139.712330);
            /* 地図のオプション設定 */
            var myOptions = {
                /*初期のズーム レベル */
                zoom: 18,
                /* 地図の中心点 */
                center: latlng,
                disableDefaultUI: true, /* 一旦全てのUIを無効化 */
                /* ★スケールコントロールを有効化 */
                scaleControl: true,
                /* ★スケールコントロールの表示位置 */
                scaleControlOptions: {
                    position: google.maps.ControlPosition.BOTTOM_LEFT
                },
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }
    </script>
</head>
<body onload="initialize();">
    <h3>スケールコントロールの指定</h3>
    <p>スケールコントロールを表示。</p>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

ストリートビューコントロール
StreetViewControlOptions

2011/6/26

ストリートビューコントロールは、地図の左上に表示されるペグマンコントロールです。

デフォルトで有効になっています。 コントロールを無効にするには、MapOptionsオブジェクトのstreetViewControlプロパティに「false」を指定します。

ストリートビューコントロールの表示位置は、StreetViewControlOptionsオブジェクトのpositionプロパティで変更可能です。 

{
  streetViewControl: true,
  streetViewControlOptions: {
    position: google.maps.ControlPosition.TOP_LEFT
 }
}

下記のサンプルでは、ストリートビューコントロールを無効にします。

iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html> 
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>streetViewControl | 設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
        });
        function initialize() {
            /* 緯度・経度：日本, 表参道駅（東京）*/
            var latlng=new google.maps.LatLng(35.665270, 139.712330);
            /* 地図のオプション設定 */
            var myOptions = {
                /*初期のズーム レベル */
                zoom: 18,
                /* 地図の中心点 */
                center: latlng,
                /* ★ストリートビューコントロールを無効化 */
                streetViewControl: false,
                /* ★ストリートビューコントロールの表示位置 */
                streetViewControlOptions: {
                    position: google.maps.ControlPosition.TOP_LEFT
                },
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }
    </script>
</head>
<body>
    <h3>ストリートビューコントロールの指定</h3>
    <p>地図のストリートビューコントロールを無効にする。</p>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

ズームコントロール
ZoomControlOptions / ZoomControlStyle

2011/6/26

ズームコントロールは地図のズームレベルを制御するコントロールです。 デフォルトで有効になっています。 コントロールを無効にするには、MapOptionsオブジェクトのzoomControlプロパティに「false」を指定します。

ズームコントロールの表示位置は、ZoomControlOptionsオブジェクトのpositionプロパティで変更可能です。

ズームコントロールのスタイルを変更するには、MapOptionsオブジェクトのzoomControlプロパティに「true」を指定し、下記のいずれかをzoomControlOptionsのstyleプロパティに指定します。 

{
  zoomControl: true,
  zoomControlOptions: {
    position: google.maps.ControlPosition.TOP_LEFT,
    style:google.maps.ZoomControlStyle.SMALL
  }
}
ZoomControlStyleクラスの定数
定数説明・サンプル
LARGE google.maps.ZoomControlStyle.LARGE
Googleマップの標準コントロールを表示。
※スマートフォン端末では、＋－ボタンが表示されます。
SMALL google.maps.ZoomControlStyle.SMALL
ミニサイズのズームコントロールを表示。
※スマートフォン端末では、＋－ボタンが表示されます。
DEFAULT google.maps.ZoomControlStyle.DEFAULT
地図サイズとデバイスに応じて最適なコントロールが表示されます。

ズームコントロール（デフォルト）

style:google.maps.ZoomControlStyle.DEFAULT
設置サンプルサンプルを見る
<!DOCTYPE html> 
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- 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.665270, 139.712330);
            /* 地図のオプション設定 */
            var myOptions = {
                /*初期のズーム レベル */
                zoom: 18,
                /* 地図の中心点 */
                center: latlng,
                /* ★ズームコントロール */
                disableDefaultUI: true, /* 一旦全てのUIを無効化 */
                zoomControl: true,
                zoomControlOptions: {
                    position: google.maps.ControlPosition.TOP_LEFT,
                    style:google.maps.ZoomControlStyle.DEFAULT
                },
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }
    </script>
    <style type="text/css">
        #map_canvas { width:100%; height:100%; }
    </style>
</head>
<body onload="initialize();">
    <h3>ズームコントロールの指定</h3>
    <p>地図にズームコントロール（デフォルト）を追加します。</p>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

ズームコントロール（大）

style:google.maps.ZoomControlStyle.LARGE
iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html> 
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
        });
        function initialize() {
            /* 緯度・経度：日本, 表参道駅（東京）*/
            var latlng=new google.maps.LatLng(35.665270, 139.712330);
            /* 地図のオプション設定 */
            var myOptions = {
                /*初期のズーム レベル */
                zoom: 18,
                /* 地図の中心点 */
                center: latlng,
                /* ★ズームコントロール */
                disableDefaultUI: true, /* 一旦全てのUIを無効化 */
                zoomControl: true,
                zoomControlOptions: {
                    style:google.maps.ZoomControlStyle.LARGE
                },
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }
    </script>
</head>
<body>
    <h3>ズームコントロールの指定</h3>
    <p>地図にズームコントロール（大）を追加します。</p>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

ズームコントロール（小）

style:google.maps.ZoomControlStyle.SMALL
iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html> 
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
        });
        function initialize() {
            /* 緯度・経度：日本, 表参道駅（東京）*/
            var latlng=new google.maps.LatLng(35.665270, 139.712330);
            /* 地図のオプション設定 */
            var myOptions = {
                /*初期のズーム レベル */
                zoom: 18,
                /* 地図の中心点 */
                center: latlng,
                /* ★ズームコントロール */
                disableDefaultUI: true, /* 一旦全てのUIを無効化 */
                zoomControl: true,
                zoomControlOptions: {
                    style:google.maps.ZoomControlStyle.SMALL
                },
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }
    </script>
</head>
<body>
    <h3>ズームコントロールの指定</h3>
    <p>地図にズームコントロール（小）を追加します。</p>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

コントロールの表示位置
ControlPosition

2011/6/26

参照：google.maps.ControlPositionクラス

各種コントロールの表示位置は、それぞれのコントロールオプションのpositionプロパティで変更できます。 

zoomControl: true,
zoomControlOptions: {
	position:google.maps.ControlPosition.TOP_RIGHT
},
streetViewControl: true,
streetViewControlOptions: {
	position: google.maps.ControlPosition.LEFT_CENTER
},
panControl: true,
panControlOptions: {
	position: google.maps.ControlPosition.RIGHT_CENTER
},
mapTypeControl: true,
mapTypeControlOptions: {
	position:google.maps.ControlPosition.TOP_LEFT
},
scaleControl: true,
scaleControlOptions: {
	position:google.maps.ControlPosition.BOTTOM_LEFT
}

positionプロパティに指定可能な表示位置は下記の8つです。

各種コントロールの表示位置を変更

下記のサンプルでは、ズームコントロールを右上に、ストリートビューコントロールを左中央に、パンコントロールを右中央に、地図タイプコントロールを左上に、スケールコントロールを左下に表示しています。

iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html> 
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
        });
        function initialize() {
            /* 緯度・経度：日本, 表参道駅（東京）*/
            var latlng=new google.maps.LatLng(35.665270, 139.712330);
            /* 地図のオプション設定 */
            var myOptions = {
                /*初期のズーム レベル */
                zoom: 18,
                /* 地図の中心点 */
                center: latlng,
                disableDefaultUI: true, /* 一旦全てのUIを無効化 */
                /* ズームコントロール */
                zoomControl: true,
                zoomControlOptions: {
                    position:google.maps.ControlPosition.TOP_RIGHT,
                    style: google.maps.ZoomControlStyle.SMALL
                },
                /* ストリートビューコントロール */
                streetViewControl: true,
                streetViewControlOptions: {
                    position: google.maps.ControlPosition.LEFT_CENTER
                },
                /* 移動コントロール */
                panControl: true,
                panControlOptions: {
                    position: google.maps.ControlPosition.RIGHT_CENTER
                },
                /* 地図タイプコントロール */
                mapTypeControl: true,
                mapTypeControlOptions: {
                    position:google.maps.ControlPosition.TOP_LEFT,
                    style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
                },
                /* スケールコントロール */
                scaleControl: true,
                scaleControlOptions: {
                    position:google.maps.ControlPosition.BOTTOM_LEFT
                },
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }
    </script>
</head>
<body>
    <h3>コントロール - 各種コントロールの表示位置を変更</h3>
    <p>ズームコントロールを右上に、ストリートビューコントロールを左中央に、移動コントロールを右中央に、地図タイプコントロールを左上に、スケールコントロールを左下に表示。</p>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

カスタムコントロールの指定
描画、イベント処理

2011/6/26

独自のコントロールを地図上に描画し、イベントを設定して制御することができます。

設置サンプル

地図上に「表参道ヒルズ」ボタン、「六本木ヒルズ」ボタンを設置します。各ボタンをクリックすると該当する場所に移動します。

iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- 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 map;
        /* 緯度・経度：表参道ヒルズ */
        var omotesando_hills = new google.maps.LatLng(35.667651, 139.707673);
        /* 緯度・経度：六本木ヒルズ */
        var roppongi_hills = new google.maps.LatLng(35.660207, 139.729078);

        function HomeControl(controlDiv, map) {
            /* ボタン枠 */
            controlDiv.style.padding = '5px';
            controlDiv.style.backgroundColor = '#ffffcc';
            controlDiv.style.border = '1px solid #000';
            controlDiv.style.cursor = 'pointer';
            controlDiv.style.textAlign = 'center';

            /* 表参道ヒルズボタン */
            var controlUI = document.createElement('DIV');
            controlUI.style.backgroundColor = '#ffffff';
            controlUI.style.border = '1px solid #000';
            controlUI.style.float = 'left';
            controlUI.style.cursor = 'pointer';
            controlUI.style.textAlign = 'center';
            controlUI.style.marginRight = '5px';
            controlUI.title = '表参道ヒルズに移動';
            controlDiv.appendChild(controlUI);

            var controlText = document.createElement('div');
            controlText.style.fontFamily = 'Arial,sans-serif';
            controlText.style.fontSize = '11px';
            controlText.style.padding = '2px 5px';
            controlText.innerHTML = '<b>表参道ヒルズ</b>';
            controlUI.appendChild(controlText);

            /* 六本木ヒルズボタン */
            var controlUI2 = document.createElement('DIV');
            controlUI2.style.float = 'left';
            controlUI2.style.backgroundColor = '#ffffff';
            controlUI2.style.border = '1px solid #000';
            controlUI2.style.cursor = 'pointer';
            controlUI2.style.textAlign = 'center';
            controlUI2.title = '六本木ヒルズに移動';
            controlDiv.appendChild(controlUI2);

            var controlText2 = document.createElement('div');
            controlText2.style.fontFamily = 'Arial,sans-serif';
            controlText2.style.fontSize = '11px';
            controlText2.style.padding = '2px 5px';
            controlText2.innerHTML = '<b>六本木ヒルズ</b>';
            controlUI2.appendChild(controlText2);

            /* 表参道ヒルズボタンをクリックした時 */
            google.maps.event.addDomListener(controlUI, 'click', function() {
                map.setCenter(omotesando_hills)
            });
            /* 六本木ヒルズボタンをクリックした時 */
            google.maps.event.addDomListener(controlUI2, 'click', function() {
                map.setCenter(roppongi_hills)
            });
        }
        /* 地図の初期化 */
        function initialize() {
            var mapDiv = document.getElementById('map_canvas');
            var myOptions = {
                zoom: 18,
                center: omotesando_hills,
                disableDefaultUI: true, /* 一旦デフォルトUIを無効化 */
                zoomControl:true,
                zoomControlOptions:{
                    style:google.maps.ZoomControlStyle.SMALL,
                    position:google.maps.ControlPosition.RIGHT_TOP
                },
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(mapDiv, myOptions);

            /* 地図上にカスタムコントロールを追加 */
            var homeControlDiv = document.createElement('DIV');
            var homeControl = new HomeControl(homeControlDiv, map);
            homeControlDiv.index = 1;
            /* カスタムコントロールを地図の右上に配置 */
            map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
        }
    </script> 
</head> 
<body>
    <h3>コントロールのカスタマイズ</h3>
    <p>地図上に「表参道ヒルズ」ボタン、「六本木ヒルズ」ボタンを設置します。各ボタンをクリックすると該当する場所に移動します。</p>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

関連コンテンツ

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

投票する 投票結果を見る

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

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

Valid: HTML検証, CSS検証, RSS検証

Thanks: Material Design 420 free icons

©2024 PHP & JavaScript Room All Rights Reserved.

pagetop

polarized women