Search

Google Maps JavaScript API v3オーバーレイ

  1. オーバーレイの追加・非表示
  2. オーバーレイの削除
  3. オーバーレイを動的に追加
  4. グラウンド オーバーレイ〔地図上に画像を表示〕
  5. 交通レイヤ〔道路の交通情報をリアルタイム表示〕
  6. 自転車レイヤ〔自転車ルート表示〕
  7. GeoRSSレイヤ〔Flickrの投稿写真情報を地図上に表示〕
Google Maps JavaScript API V3

オーバーレイの追加・非表示

2011/6/26

オーバーレイとは、マーカー、ポリライン、情報ウィンドウなど地図上の任意の位置に固定されたオブジェクトのことを指します。 オーバーレイは、地図をドラッグして移動したり、ズームするとオーバーレイも一緒に移動します。

地図上にマーカーを追加するには、setMap()メソッドを使用します。
マーカーオブジェクト.setMap(地図オブジェクト)

地図上に追加したマーカーを非表示にするには、setMap()メソッドで、地図オブジェクトではなくnullを渡します。
マーカーオブジェクト.setMap(null)

設置サンプル

下記のサンプルでは、ボタンクリックで、地図上のマーカーを表示・非表示にします。

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();
            $("#btn_show").click(function(){
                showOverlays();
                $("#btn_show").attr("disabled","disabled");
                $("#btn_clear").attr("disabled",false);
            });
            $("#btn_clear").click(function(){
                clearOverlays();
                $("#btn_clear").attr("disabled","disabled");
                $("#btn_show").attr("disabled",false);
            });
        });
        var map,marker1,marker2,marker3;
        /* 緯度・経度：六本木ヒルズ */
        var myLatlng1  = new google.maps.LatLng(35.660207, 139.729078);
        var myLatlng2  = new google.maps.LatLng(35.665724, 139.731004);
        var myLatlng3  = new google.maps.LatLng(35.662248, 139.730172);
        /* 地図の初期化 */
        function initialize() {
            var mapDiv = document.getElementById('map_canvas');
            var myOptions = {
                zoom: 15,
                center: myLatlng2,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(mapDiv, myOptions);
            /* 指定された境界に合うように地図を設定 */
            var bounds = new google.maps.LatLngBounds(myLatlng1, myLatlng2);
            map.fitBounds(bounds,5);
            /* マーカー */
            marker1 = new google.maps.Marker({
                position: myLatlng1, 
                title:"六本木ヒルズ"
            });
            marker2 = new google.maps.Marker({
                position: myLatlng2, 
                title:"東京ミッドタウン"
            });
            marker3 = new google.maps.Marker({
                position: myLatlng3, 
                title:"国立新美術館‎"
            });
            /* 地図上にマーカーを追加 */
            showOverlays();
        }
        /* 地図上にマーカーを表示 */
        function showOverlays(){
            marker1.setMap(map);
            marker2.setMap(map);
            marker3.setMap(map);
        }
        /* 地図上からマーカーを隠す */
        function clearOverlays(){
            marker1.setMap(null);
            marker2.setMap(null);
            marker3.setMap(null);
        }
    </script> 
</head> 
<body>
    <h3>オーバーレイの表示・非表示</h3>
    <p>下記のボタンをクリックすると、地図上のマーカーを表示・非表示にします。</p>
    <p>
        <input id="btn_clear" type="button" value="オーバーレイを隠す" /> 
        <input id="btn_show" type="button" value="オーバーレイを表示" disabled /> 
    </p>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

オーバーレイの削除

2011/6/26

上記の例のように、setMap()メソッドでnullを渡すだけだと、地図上からマーカーが非表示になるだけです。

オーバーレイを地図上から完全に削除したい場合は、地図上に追加したオーバーレイを配列に格納しておき、各オーバーレイを非表示にしてから、その配列の長さに0を指定します。

下記のサンプルでは、【オーバーレイを削除】ボタンを押すと、【オーバーレイを表示】ボタンを押しても、あらかじめ定義されていたオーバーレイを表示できなくなります。

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();
            $("#btn_show").click(function(){
                showOverlays();
                $("#btn_show").attr("disabled","disabled");
                $("#btn_clear").attr("disabled",false);
            });
            $("#btn_clear").click(function(){
                clearOverlays();
                $("#btn_clear").attr("disabled","disabled");
                $("#btn_show").attr("disabled",false);
            });
            $("#btn_remove").click(function(){
                removeOverlays();
                $("#btn_clear").attr("disabled",false);
                $("#btn_show").attr("disabled",false);
            });
        });
        /* 地図オブジェクトを格納 */
        var map;
        /* 地図上に追加されたマーカーオブジェクトを格納する配列 */
        var markersArray = [];
        /* 緯度・経度：六本木ヒルズ */
        var myLatlng1  = new google.maps.LatLng(35.660207, 139.729078);
        var myLatlng2  = new google.maps.LatLng(35.665724, 139.731004);
        var myLatlng3  = new google.maps.LatLng(35.662248, 139.730172);
        /* 地図の初期化 */
        function initialize() {
            var mapDiv = document.getElementById('map_canvas');
            var myOptions = {
                zoom: 15,
                center: myLatlng2,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(mapDiv, myOptions);
            /* 指定された境界に合うように地図を設定 */
            var bounds = new google.maps.LatLngBounds(myLatlng1, myLatlng2);
            map.fitBounds(bounds,5);
            /* マーカー */
            marker1 = new google.maps.Marker({
                position: myLatlng1, 
                title:"六本木ヒルズ"
            });
            marker2 = new google.maps.Marker({
                position: myLatlng2, 
                title:"東京ミッドタウン"
            });
            marker3 = new google.maps.Marker({
                position: myLatlng3, 
                title:"国立新美術館‎"
            });
            markersArray = [marker1,marker2,marker3];
            /* 地図上にマーカーを追加 */
            showOverlays();
        }
        /* 地図上にマーカーを表示 */
        function showOverlays(){
            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setMap(map);
                }
            }
        }
        /* 地図上からマーカーを隠す */
        function clearOverlays(){
            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setMap(null);
                }
            }
        }
        /* 地図上からマーカーを削除 */
        function removeOverlays(){
            clearOverlays();
            markersArray.length=0;
        }
    </script> 
</head> 
<body>
    <h3>オーバーレイの削除</h3>
    <p>
        下記のボタンをクリックすると、地図上のマーカーを表示・非表示・削除します。<br>※一度、【オーバーレイを削除】ボタンを押すと、【オーバーレイを表示】ボタンを押してもオーバーレイを表示できなくなります。</p>
    <p>
         <input id="btn_show" type="button" value="オーバーレイを表示" disabled /> 
        <input id="btn_clear" type="button" value="オーバーレイを隠す" /> 
        <input id="btn_remove" type="button" value="オーバーレイを削除" /> 
   </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();
            $("#btn_show").click(function(){
                showOverlays();
                $("#btn_show").attr("disabled","disabled");
                $("#btn_clear").attr("disabled",false);
            });
            $("#btn_clear").click(function(){
                clearOverlays();
                $("#btn_clear").attr("disabled","disabled");
                $("#btn_show").attr("disabled",false);
            });
            $("#btn_remove").click(function(){
                removeOverlays();
                $("#btn_clear").attr("disabled","disabled");
                $("#btn_show").attr("disabled",false);
            });
        });
        /* 地図オブジェクトを格納 */
        var map;
        /* 地図上に追加されたマーカーオブジェクトを格納する配列 */
        var markersArray = [];
        /* 緯度・経度（六本木ヒルズ） */
        var myLatlng  = new google.maps.LatLng(35.660207, 139.729078);
        /* 地図の初期化 */
        function initialize() {
            var mapDiv = document.getElementById('map_canvas');
            var myOptions = {
                zoom: 15,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(mapDiv, myOptions);
            google.maps.event.addListener(map, 'click', function(event) {
                addMarker(event.latLng);
            });
        }
        /* 地図上にマーカーを追加 */
        function addMarker(location) {
            marker = new google.maps.Marker({
                position: location,
                map: map
            });
            markersArray.push(marker);
        }
        /* 地図上にマーカーを表示 */
        function showOverlays(){
            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setMap(map);
                }
            }
        }
        /* 地図上からマーカーを隠す */
        function clearOverlays(){
            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setMap(null);
                }
            }
        }
        /* 地図上からマーカーを隠す */
        function removeOverlays(){
            clearOverlays();
            markersArray.length=0;
        }
    </script> 
</head> 
<body>
    <h3>オーバーレイを動的に追加</h3>
    <p>地図をクリックすると、クリックした場所にマーカーを追加します。<br>下記のボタンをクリックすると、地図上に追加されたマーカーを表示・非表示・削除します。</p>
    <p>
         <input id="btn_show" type="button" value="オーバーレイを表示" disabled /> 
        <input id="btn_clear" type="button" value="オーバーレイを隠す" /> 
        <input id="btn_remove" type="button" value="オーバーレイを削除" /> 
   </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();
        });
        /* 地図の初期化 */
        function initialize() {
            /* 緯度・経度 */
            var latlng=new google.maps.LatLng(40.740097,14.251636);
            
            var sw=new google.maps.LatLng(37.278097,9.6150);    /* 南西 */ 
            var ne=new google.maps.LatLng(44.569,18.625);        /* 北東 */
            /* 画像 */
            var imageBounds = new google.maps.LatLngBounds(
                sw,
                ne
            );
            /* 地図のオプション設定 */
            var myOptions={
                /*初期のズーム レベル */
                zoom: 5,
                /* 地図の中心点 */
                center: latlng,
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            /* 地図オブジェクト */
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            /* グラウンドオーバーレイ */
            var oldmap = new google.maps.GroundOverlay(
                "/content/img/ajax/gmapv3/marker/boots.png",
                imageBounds
            );
            oldmap.setMap(map);
        }
    </script>
</head>
<body>
    <h3>グラウンドオーバーレイ</h3>
    <p>地図上に任意の画像を表示します。</p>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

交通レイヤ
道路の交通情報をリアルタイム表示

2011/6/26

自動車の交通情報を地図上にリアルタイム表示します。 交通情報のサポート対象はスプレッドシートの「traffic」をYESにした国だけです。 日本はまだサポートされていません。

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(40.714353,-74.005973);
            /* 地図のオプション設定 */
            var myOptions={
                /*初期のズーム レベル */
                zoom: 13,
                /* 地図の中心点 */
                center: latlng,
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            /* 地図オブジェクト */
            var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            /* グラウンドオーバーレイ */
            var trafficLayer=new google.maps.TrafficLayer();
            trafficLayer.setMap(map);
        }
    </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();
        });
        /* 地図の初期化 */
        function initialize() {
            /* 緯度・経度：表参道駅 */
            var latlng=new google.maps.LatLng(35.665270,139.712330);
            /* 地図のオプション設定 */
            var myOptions={
                /*初期のズーム レベル */
                zoom: 15,
                /* 地図の中心点 */
                center: latlng,
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            /* 地図オブジェクト */
            var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            /* ★自転車レイヤ */
            var bikeLayer = new google.maps.BicyclingLayer();
            bikeLayer.setMap(map);
        }
    </script>
</head>
<body>
    <h3>自転車レイヤ</h3>
    <p>自転車を走らせるのに適したルートを点線で表示します。</p>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

GeoRSSレイヤ
Flickrの投稿写真情報を地図上に表示

2011/6/26

Flickrに投稿された写真のGeoRSS（http://api.flickr.com/services/feeds/geo/?w=all&format=feed-georss）を取得し、投稿写真情報をKmlLayerオブジェクトで地図上に表示します。 地図上に追加したKmlレイヤは、setMap()メソッドにnullを指定すると、地図上から非表示にすることができます。

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();
            $("#btn_hide").click(function(){
                /* Kmlレイヤを非表示にする */
                georssLayer.setMap(null);
            });
            $("#btn_show").click(function(){
                /* Kmlレイヤを表示する */
                georssLayer.setMap(map);
            });
        });
        var map, georssLayer;
        /* 地図の初期化 */
        function initialize() {
            /* 地図のオプション設定 */
            var myOptions = {
                /*初期のズーム レベル */
                zoom: 4,
                /* 地図の中心点 */
                center: new google.maps.LatLng(49.496675,-102.65625),
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            /* 地図オブジェクト */
            map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            /* Kimレイヤオブジェクト */
            georssLayer = new google.maps.KmlLayer('http://api.flickr.com/services/feeds/geo/?w=all&format=feed-georss');
            /* Kimレイヤを地図に追加 */
            georssLayer.setMap(map);
        }
    </script>
    <style type="text/css">
        #map_canvas { width:100%; height:100%; }
    </style>
</head>
<body>
    <h3>オーバーレイ - GeoRSS</h3>
    <p>Flickrに投稿された写真のGeoRSSを取得し、投稿写真情報をKmlLayerオブジェクトで地図上に表示します。</p>
    <p><input type="button" id="btn_show" value="表示" /><input type="button" id="btn_hide" value="非表示" /></p>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

関連コンテンツ

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

投票する 投票結果を見る

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

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

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

Thanks: Material Design 420 free icons

©2023 PHP & JavaScript Room All Rights Reserved.

pagetop

polarized women