Google Maps JavaScript API v3オーバーレイ
- オーバーレイの追加・非表示
- オーバーレイの削除
- オーバーレイを動的に追加
- グラウンド オーバーレイ〔地図上に画像を表示〕
- 交通レイヤ〔道路の交通情報をリアルタイム表示〕
- 自転車レイヤ〔自転車ルート表示〕
- GeoRSSレイヤ〔Flickrの投稿写真情報を地図上に表示〕
オーバーレイの追加・非表示
2011/6/26
オーバーレイとは、マーカー、ポリライン、情報ウィンドウなど地図上の任意の位置に固定されたオブジェクトのことを指します。 オーバーレイは、地図をドラッグして移動したり、ズームするとオーバーレイも一緒に移動します。
地図上にマーカーを追加するには、setMap()メソッドを使用します。
マーカーオブジェクト.setMap(地図オブジェクト)
地図上に追加したマーカーを非表示にするには、setMap()メソッドで、地図オブジェクトではなくnullを渡します。
マーカーオブジェクト.setMap(null)
設置サンプル
下記のサンプルでは、ボタンクリックで、地図上のマーカーを表示・非表示にします。



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



<!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
ユーザーが地図をクリックした位置にマーカーを立てるサンプルです。



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



<!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
自転車情報を地図に取り込み、自転車を走らせるのに適したルートを点線で表示します。



<!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を指定すると、地図上から非表示にすることができます。



<!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>