|
|
|
12/22(Sun) 00:05
■ Googleマップ V3 設置法 〜 Google Maps API V2 から V3 への移行方法
2009/5/27に Google Maps API V3 が公開され、V2 の正式サポートは 2010/5/19に終了しましたが、2013/5/19(※1)までは引き続き機能するとのことで、長い間 Google Maps API V2 のまま手つかずだった「Googleマップを活用しよう」「GPSロガー旅記録」「湯巡りマップ」地図表示ページを V3 に移行することにしました。（2013.3.19作成）
（※1）（2013.5.1追記）2013/5/1に2013/11/19まで半年間延期のアナウンス。この日以降は V2 を使っている地図は、JavaScript ラッピングによる下位互換機能を持たせた V3 の地図に自動的に切り替わる。大部分のシンプルな地図は機能するそうですが(※2)、この間に V3 へ移行することを強く推奨しています。
（※2-1）（2013.11.20追記）当ホームページ内の Googleマップ V2地図 は 2013.11.19までは表示できましたが、11.20には全て表示できなくなりました。V3 の JavaScript wrapperで「大部分のシンプルな地図は表示できる」はずですが、原因は不明です。
（※2-2）（2013.11.21追記）翌11/21日に V2 ソースで V3 で表示されるようになりました。マーカーや情報ウィンドウの影画像が表示されない(※3)、地図拡大時の V2/V3 の仕様差（V2は情報ウィンドウの位置固定で拡大、V3は地図中心固定で拡大）による情報ウィンドウの配置ずれや、マーカー数が多いとラッピングにより表示に時間が掛かるなどありますが。
(※3)（2013.11.26追記）2013.11.15に、地図の外観を一新した（ビジュアル リフレッシュ）v3.14が正式リリースされ、旧ビジュアル（v3.13）で表示されていたマーカーや情報ウィンドウの影画像は、設定しても全て無視されるようになりました。→ 詳細はこちら
【 目 次 】
- Google Maps API V3の主な変更点
- V3で基本的な地図を表示する手順
- サイドバー付き Googleマップ v3 地図
- 知っていると便利な Tips
- 地図のコントロール
- 情報ウィンドウを常に1つのみ表示
- 情報ウィンドウを複数表示
- 地図上クリックで情報ウィンドウを非表示 etc
- カスタムアイコンの作成方法
- XMLファイルの読み込みライブラリー
- Google Maps visual refresh（新ビジュアル）（v3.14）
（公式ドキュメント）
・Upgrading Your Google Maps JavaScript Application To v3：v2からv3への変更方法（英文）
・Google Maps JavaScript API v3（日本語）
（参考ドキュメント）
・Google Maps API Version3 日本語ドキュメント、Google Maps入門(Google Maps JavaScript API V3)、Google Maps 活用講座、逆引きGoogle Maps APIリファレンス ver 3
・「サイドバー付き Googleマップ v3 地図」は、the Google Maps API v3 サンプルリンク集の Mike Williams' tutorial Part 25 Marker Categories をv3へ移行したサンプル translated to v3 を参考にしています（英文）
（当ページを参考に V3地図を作成されたサイト様の紹介）
・宮崎ITブログの月極駐車場マップ
スポンサーリンク
■ Google Maps API V3の主な変更点
- APIキーが不要
V2までは、Google Maps API を使うためには APIキー を取得する必要がありましたが、V3では不要になりました。
- スマートフォン向け機能の充実
スマートフォンアプリには利用者の位置情報を使用するものがあり、位置検知センサー(GPSなど)を使用するかどうかを「sensor」パラメータで指定します。
- Google Maps API の利用が一部有料化（2012/1/1より）〜Internet Watch（2011/10/28）
1日あたりのAPI呼び出しが 25,000ビュー/サイト を超える場合、超過分に対して課金が行われるというものですが、個人サイトでの使用であれば今まで通り無料で使用できると考えて差し支えないでしょう。
- プログラミング関連の変更
| 項目 | 変更点 |
|---|
| google.maps名前空間の導入 | V2まではグローバル空間に GMap2、GMarker というクラスが配置されていたが、V3からはそれぞれ google.maps.Map、 google.maps.Marker となっている。これにあわせていくつかメソッドやプロパティも変更されている。 |
| マップの描画方法が簡略化された | 従来のようにプロパティを一つ一つ設定していく方法から、各種オプションを一括して設定する方法に変わった。 |
| マーカー/情報ウィンドウの描画方法も簡略化された | マップ描画と同様、各種オプションを一括して設定する方法に変わった。 |
| メソッド名が変わったもの | GMap2() → google.maps.Map()
GLatLng() → google.maps.LatLng()
GIcon() → google.maps.MarkerImage()
GMarker() → google.maps.Marker()
GMarker.getLatLng() → marker.getPosition()
marker.setPoint()/getPoint() → marker.setPosition()/getPosition()
GInfoWindow() → google.maps.InfoWindow()
openInfoWindowHtml() → google.maps.InfoWindow()
closeInfoWindow() → infoWindow.close()
GEvent.addListener() → google.maps.event.addListener()
GEvent.trigger() → google.maps.event.trigger()
Gmapload() → google.maps.event.addDomListener(window, 'load', initialize)
GPolyLine() → google.maps.Polyline()
GeocoderClient.getLocations() → Geocoder.geocode() など |
| メソッド名が同じもの | map.setCenter()、map.getCenter()
map.setZoom()、map.getZoom()
map.setBounds()、map.getBounds() |
| パラメータが変わったもの | map.setCenter(中心座標,ズーム) → map.setCenter(中心座標)＋map.setZoom(ズーム) |
| メソッドが無くなったもの | GBrowserIsCompatible()（ブラウザがGoogleマップAPIを利用できるかを判定）
GUnload()（終了時にメモリを開放）この2つはV3では使用しないので問題ない。 |
map.showControls()、map.hideControls()（マップコントロールの表示/非表示）
addOverlays()、clearOverlays()（下記参照）
GDownloadUrl()、GXml.parse()（下記参照） |
| マップ上のオブジェクトを削除するメソッドが廃止された | V2の描画済のマーカーや情報ウィンドウなどを一括削除するメソッド clearOverlays() が廃止された。代わりに、個々にマーカーを非表示（marker.setVisible(false)）、情報ウィンドウをクローズ（infoWindow.close()）などして同様の処理を実現する。 |
| XMLファイルの読み込み関数とXMLパーサーのライブラリーがなくなった | V2の、GDownloadUrl関数 や GXml.parse などがなくなった。データベースからマーカーを立てたい場合などは jQuery のJavaScriptライブラリーを利用し JSONファイル等を読み込み処理する（当ページでは XMLファイルの読み込みライブラリー downloadxml.js を利用し、地図データの XMLファイルを読み込み処理している）。 |
| 複数の情報ウィンドウ表示 | V2では地図上に1つしか情報ウィンドウを表示できなかったが、V3からは複数の情報ウィンドウを表示できるようになった。 |
| マップコントロール | V2で使用できたナビゲーションコントロールはサポート終了となり、ズームコントロールと移動コントロールに分割された。 |
| ストリートViewの導入が簡単になった | google.maps.MapクラスがストリートViewをサポートするので、Mapクラスの初期化時にプロパティで「streetViewControl: true」を指定するだけでストリートViewが使用できるようになった。 |
（注）オブジェクトには、クラス（＝オブジェクトの種類）とインスタンス（＝クラスに属するオブジェクトの具体例）があり、メソッドは関数、プロパティはオブジェクト固有のデータを表します。
■ V3で基本的な地図を表示する手順
- V3の組み込み
HTMLのヘッダー部に Google Maps API V3のライブラリを組み込みます。V3からはAPIキー指定が不要になり、Google Maps API V3のライブラリ組み込みと sensor/region パラメータ指定に変更となりました。
- sensor= には、iPhone/Android/タブレット端末など位置検知センサー（GPSなど）を持ったサイト向けなら true、一般的なパソコンサイト向けに地図を表示する場合は falseを指定します（必須）
- region= は対象地域を指定するもので、デフォルトではAPIのロード元のドメイン国を使用しますが、region 指定をすると指定した region を対象地域にします（任意）
- 地図の表示
続いて、ページロード時に実行するメソッド「addDomListener()」の中に、地図を表示するためのJavaScriptを追加します。コード内の「div要素のID」には、手順4で作る div要素のID名を入れます。ズームレベル（0〜19）、地図の中心位置（緯度と経度）、マップタイプの3つは必須項目です。
- マーカーと情報ウィンドウの表示
地図上のマーカーをクリックしたときに情報ウィンドウを表示するには、「地図の表示」の次に「マーカーの表示」と「マーカークリックで情報ウィンドウを開く」のJavaScriptを追加します。
- 表示エリア（V2 と同じ記述）
次に、ページのHTMLの中に、地図を表示するための 表示エリア（div要素）を追加します。div要素にはID属性を設定し、スタイルシートのwidthとheightで地図のサイズを指定します。
以上をまとめると以下になります（地図は右図）。ソース内のコメント番号は上記手順の項目番号と対応しています。
- 地図サイズ250x210なので、「移動コントロール」「ズーム コントロール」「マップタイプ コントロール」はそれぞれ「非表示」「ボタン」「プルダウン」が自動選択されます。
- 情報ウィンドウの最大幅の設定をしてないので、地図の横幅いっぱいまで広がっても表示しきれない時は、自動的に折り返しが行われ、それでもオーバーフローする場合は、縦自動スクロールで表示されます。
|
<![CDATA[
<html>
<head><title>V3で基本的な地図を表示する手順</title>
<!--（1）V3の組み込み -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=true または false"></script>
<script type="text/javascript">
//ページロード時に実行するメソッド
google.maps.event.addDomListener(window, 'load', function() {
/*（2）地図の表示 */
var map = new google.maps.Map(document.getElementById('div要素のID'),{
zoom: ズームレベル, //地図のズームレベル
center: new google.maps.LatLng(緯度, 経度), //地図の中心座標
mapTypeId: google.maps.MapTypeId.ROADMAP //マップタイプ
});
/*（3-1）マーカーの表示 */
var marker = new google.maps.Marker({
map: map, //マーカーを表示する地図名
position: new google.maps.LatLng(緯度, 経度) //マーカーの表示位置
});
/*（3-2）マーカークリックで情報ウィンドウを開く */
var infowindow = new google.maps.InfoWindow({
content: '情報ウィンドウ内に表示するHTML'
});
google.maps.event.addListener(marker,'click',function(){infowindow.open(map,marker);});
}); //end of load
</script>
</head>
<body>
<!--（4）表示エリア（V2 と同じ記述）-->
<div id="map_canvas" style="width:地図の幅; height:地図の高さ"></div>
</body>
</html>
]]>
|
■ 複数のマーカーと情報ウィンドウの表示
１つのマーカーに情報ウィンドウを表示する時は上記手順になりますが、複数のマーカーを作成しそれぞれに情報ウィンドウを表示する場合は、個々のマーカーの情報ウインドウが別々のインスタンスになる様に「（3-2）マーカークリックで情報ウィンドウを開く」をひとつの関数として独立させる必要があります。
関数として独立させないで forループ内で addListener() を呼ぶと、各マーカーは表示されますが、clickイベントが呼ばれた時には、既にforループは終わっているので常に forループの最後の値となり、どのマーカーをクリックしても最後のマーカーにその情報ウインドウが表示されてしまいます。
この地図は Maps API 新ビジュアル（v3.14以降）で表示しています。→ 詳細はこちら
（注）イベントリスナでクロージャを使用する方法で表示しています
■ 関数を定義しその関数を呼び出す方法
「（3-2）マーカークリックで情報ウィンドウを開く」を独立させ関数として定義し、元の場所からこの関数を呼び出します。また複数のマーカー情報を配列で定義しています。
|
<![CDATA[
<html>
<head><title>複数のマーカーと情報ウィンドウの表示</title>
<!--（1）V3の組み込み -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var data = [ //マーカー情報の配列
{ name: "東京スカイツリー", lat: 35.71008, lng: 139.810695,
html: "2012年5月に開業した東京都墨田区押上にある電波塔。観光・商業施設やオフィスビルが"
+ "併設され、ツリーを含めた周辺施設は東京スカイツリータウンと呼ばれる。"},
{ name: "横浜ベイブリッジ", lat: 35.455557, lng: 139.674572,
html: "1989年に開通した横浜市中区本牧ふ頭〜鶴見区大黒ふ頭間にある長さ860mの吊り橋。"},
{ name: "富士山", lat: 35.362859, lng: 138.730883,
html: "標高3,776m、日本最高峰の独立峰で、その優美な風貌は日本の象徴として広く知られている。"}
];
//関数（3-2）マーカークリックで情報ウィンドウを開く
function createInfoWin(map,marker,i){
var infoWindow = new google.maps.InfoWindow({ //マーカー毎にinfoWindowを作成
maxWidth: 250, //情報ウィンドウの最大幅をピクセルで設定
content: '<b>'+ data[i].name +'</b><br />'+ data[i].html //情報ウィンドウ内に表示するHTML
});
google.maps.event.addListener(marker,'click',function(){infoWindow.open(map,marker);});
}
//ページロード時に実行するメソッド
google.maps.event.addDomListener(window, 'load', function() {
/*（2）地図の表示 */
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 8, //地図のズームレベル
center: new google.maps.LatLng(35.713704,139.394533), //地図の中心座標
mapTypeId: google.maps.MapTypeId.ROADMAP //マップタイプ
});
//複数のマーカーと情報ウィンドウの表示
for (i = 0; i < data.length; i++) {
/*（3-1）マーカーの表示 */
var marker = new google.maps.Marker({
map: map, //マーカーを表示する地図名
position: new google.maps.LatLng(data[i].lat, data[i].lng), //マーカーの表示位置
title: data[i].name //オンマウスで表示させる文字
});
/*（3-2）マーカークリックで情報ウィンドウを開く */
createInfoWin(map,marker,i); //関数の呼び出し
} //end of for
}); //end of load
</script>
</head>
<body>
<!--（4）表示エリア（V2 と同じ記述）-->
<div id="map_canvas" style="width: 500px; height: 380px"></div>
</body>
</html>
]]>
|
■ （参考）イベントリスナでクロージャを使用する方法 〜Google Developers-イベント クロージャ
クロージャとは関数オブジェクトの一種で、無名関数、関数内関数、戻り値として関数を返す関数、とも呼ばれ、( function(){...} ) は {...} 内の関数の参照を値に持ち、( function(){...} ) にカッコ()を付けることでその関数を実行します。また、関数の中に定義した内部関数が外側の関数のローカル変数を参照できる特性を持ちます。
「関数を定義しその関数を呼び出す方法」の「関数（3-2）マーカークリックで情報ウィンドウを開く」を削除し、「関数の呼び出し」を下のコードと入れ替えます。
|
<![CDATA[
/*（3-2）マーカークリックで情報ウィンドウを開く */
google.maps.event.addListener(marker, 'click', (function(marker,i) {
return function() {
var infoWindow = new google.maps.InfoWindow({ //マーカー毎にinfoWindowを作成
maxWidth: 250, //情報ウィンドウの最大幅をピクセルで設定
content:'<b>'+data[i].name+'</b><br />'+data[i].html//情報ウィンドウ内に表示するHTML
});
infoWindow.open(map,marker); //情報ウィンドウを表示
}
})(marker,i));
]]>
|
■ サイドバー付き Googleマップ v3 地図
ページトップに表示した「湯巡りマップv3」で作成した Googleマップの、地図とサイドバーのメイン部のコードを抜き出し地図表示したものです。画像URLのみの簡易アイコン設定なので、アイコンと影の位置が少し左にずれてます。
- 複数のカスタムアイコンを使い、
- XMLファイルから地図データを読み込み、
- サイドバー付きのマップを作成しています。
この地図は Maps API 旧ビジュアル（v3.13）で表示しています。→ 詳細はこちら
■ 「サイドバー付き Googleマップ v3 地図」のソースコード
このソースは外部ファイルとして、
が必要です。それぞれを自分のサーバにアップして利用します。
|
<![CDATA[
<html>
<head><title>サイドバー付き Googleマップ v3 地図</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript" src="./downloadxml.js"></script>
<script type="text/javascript">
//グローバル変数宣言
var gmarkers = [];
var map;
var infoWindow = new google.maps.InfoWindow();
//マーカーオブジェクトの作成
function createMarker(name,point,hpurl,imgurl,category){
//カスタムアイコン設定
var customIcons = {
温泉地: {icon: './mm_20_red.png'}, //カテゴリー温泉地のアイコン設定
小旅行: {icon: './mm_20_white.png'}, //カテゴリー小旅行のアイコン設定
食道楽: {icon: './mm_20_green.png'}, //カテゴリー食道楽のアイコン設定
車中泊: {icon: './mm_20_yellow.png'} //カテゴリー車中泊のアイコン設定
};
var gicons = customIcons[category] || {}; //指定なしの時は標準アイコンを使用
//マーカー設定
var marker = new google.maps.Marker({
map: map, //マーカーを表示する地図名
position: point, //マーカーの表示位置
icon: gicons.icon, //マーカーアイコンの設定
title: name //オンマウスで表示させる文字
});
//マーカー情報をグローバル配列に保存
gmarkers.push(marker);
//情報ウィンドウに表示するHTML文
var html = "<table border=1 cellspacing=1 cellpadding=3 bordercolor=#b98bba
style='font-size:15px;'"
+" width=195px><tr><td bordercolor=#f2eaf2 width=90px><img src='"
+ imgurl +"' width='90'" +" height='67' border='0'></td>
<td bordercolor=#f2eaf2><a href='"+ hpurl +"' target=_blank>"
+"<b>"+ name +"</b></a><br /><br /><a href='javascript:zoomInOut(+3);'>"
+"<img src='./zoom-plus-mini.png' width='18' height='18' alt='plus'
title='3倍zoom-in'"
+" border='0' align='top' /></a><a href='javascript:zoomInOut(-3);'>"
+"<img src='./zoom-minus-mini.png' width='18' height='18' alt='minus'
title='3倍zoom-out'"
+" border='0' align='top' /></a></td></tr></table>";
//マーカークリックで情報ウィンドウを開く
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html); //情報ウィンドウの内容
infoWindow.open(map,marker); //情報ウィンドウを表示
map.panTo(point); //マーカーを地図の中心位置に移動
});
} //end of createMarker
//サイドバークリックで情報ウィンドウを開く(マーカーを擬似クリック)
function myclick(num) {
google.maps.event.trigger(gmarkers[num], "click");
}
//3倍ズームイン・アウト
function zoomInOut(value) {
map.setZoom(map.getZoom()+value);
}
//地図オブジェクトの作成
function initialize() {
var sidebarList = '';
map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 8,
center: new google.maps.LatLng(35.969115,139.372559),
mapTypeId: google.maps.MapTypeId.ROADMAP, //上記3つは必須項目
scrollwheel: false //マウスホイールでのズームを無効にする
});
//XMLファイルからのデータ読み込み
downloadUrl("./samplev3.xml", function(data){
var xmlDoc = xmlParse(data);
var markers = xmlDoc.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++){
var name = markers[i].getAttribute("name");
var point = new google.maps.LatLng(markers[i].getAttribute("lat"),
markers[i].getAttribute("lng"));
var hpurl = markers[i].getAttribute("hpurl");
var imgurl = markers[i].getAttribute("imgurl");
var category = markers[i].getAttribute("category");
//マーカー作成
createMarker(name,point,hpurl,imgurl,category);
//サイドバーリストにサイドバーを追加
sidebarList += '<a href="javascript:myclick('+ i +')">'+ name +'</a><br />';
} //end of for
//サイドバーの表示
document.getElementById("side_bar").innerHTML = sidebarList;
}); //end of downloadUrl
//地図上クリックで情報ウィンドウを非表示
google.maps.event.addListener(map, "click", function(){
infoWindow.close();
});
} //end of initialize
//ページロード時に実行するメソッド
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" style="font-size: 15px;">
<tr><td valign="top">
<div id="map_canvas" style="width: 520px; height: 510px"><br><br><br>
<center>地図 読込み中・・・しばらくお待ちください</center></div>
</td><td valign="top">
<div id="side_bar" style="border: solid 1px #808080; width: 140px; height: 510px;
overflow: auto; margin: 0px 0px 0px 3px;"></div>
</td></tr></table>
</body>
</html>
]]>
|
■ 地図データの XMLファイル（samplev3.xml）
<marker name='名前' lat='緯度' lng='経度' hpurl='HPurl' imgurl='画像url' category='カテゴリ名' />形式の XMLファイルです。XMLファイルは Shift-JIS ではなく UTF-8 で保存します。データは動作確認用に「リンク先URL」「画像URL」「category」を意図的にブランクにしたものもあります。成田空港の例のように category をブランクにすると標準アイコンが表示されます。
|
<![CDATA[
<markers>
<marker name='東京スカイツリー' lat='35.71008' lng='139.810695'
hpurl='http://www.tokyo-skytree.jp/'
imgurl='skytree.jpg' category='温泉地' />
<marker name='東京タワー' lat='35.658545' lng='139.745683'
hpurl='http://www.tokyotower.co.jp/'
imgurl='tokyotower.jpg' category='温泉地' />
<marker name='横浜ベイブリッジ' lat='35.455557' lng='139.674572'
hpurl='http://www.shutoko.jp/fun/lightup/baybridge'
imgurl='baybridge.jpg' category='小旅行' />
<marker name='水戸偕楽園' lat='36.373055' lng='140.449523'
hpurl='http://www.kairakuen.u-888.com/'
imgurl='kairakuen.jpg' category='小旅行' />
<marker name='成田空港' lat='35.773552' lng='140.388244'
hpurl='http://www.narita-airport.jp/jp/'
imgurl='narita.jpg' category='' />
<marker name='富士山' lat='35.362859' lng='138.730883'
hpurl=''
imgurl='fujisan.jpg' category='食道楽' />
<marker name='相模湖' lat='35.602818' lng='139.200892'
hpurl='http://www.sagamiko-resort.jp/illumillion/illumi/'
imgurl='' category='車中泊' />
</markers>
]]>
|
■ （応用１）カテゴリ毎にマーカーの表示/非表示を切り替える
「温泉地」や「小旅行」など、マーカーをカテゴリ分けして、特定のカテゴリだけ表示させたいというニーズは結構あると思います。以下はチェックボックスを ON/OFF することで、カテゴリ毎にマーカーの表示/非表示を切り替える方法です。
- 下段＜カテゴリ＞のチェックボックスの ON/OFF で地図に表示するカテゴリを選択します。
- アイコンを「影なし日本語ピン」にし、
- サイドバー オンマウスで選択項目の背景色を変えるようにしています。
- マーカー情報にマーカー名、カテゴリーを設定しグローバル配列に保存
|
<![CDATA[
//マーカー情報をグローバル配列に保存
marker.myname = name;
marker.mycategory = category;
gmarkers.push(marker);
]]>
|
- カテゴリー関連処理の以下の関数を、createMarker() の後に追加
|
<![CDATA[
//表示マーカーのサイドバーリスト作成
function makeSidebar() {
var sidebarList = '';
for (var i = 0; i < gmarkers.length; i++) {
if (gmarkers[i].getVisible()) {
sidebarList += '<a href="javascript:myclick('+ i
+')" onmouseover=this.style.backgroundColor="#ffeac0"'
+' onmouseout=this.style.backgroundColor="">'
+ gmarkers[i].myname +'</a><br />';
}
} //end of for
//サイドバーを表示
document.getElementById("side_bar").innerHTML = sidebarList;
} //end of makeSidebar
//表示カテゴリのマーカーを表示する
function show(category) {
for (var i = 0; i < gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {gmarkers[i].setVisible(true);}
}
document.getElementById(category+"box").checked = true;
}
//非表示カテゴリのマーカーを非表示にする
function hide(category) {
for (var i = 0; i < gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {gmarkers[i].setVisible(false);}
}
document.getElementById(category+"box").checked = false;
infoWindow.close();
}
//チェックボックスのクリック処理
function boxclick(box,category) {
if (box.checked) { show(category); } else { hide(category); }
//表示マーカーのサイドバーリスト作成
makeSidebar();
}
]]>
|
- downloadUrl()中の「サイドバーリストにサイドバーを追加」「サイドバーの表示」を以下に変更
|
<![CDATA[
//カテゴリ毎のマーカー表示/非表示の初期設定
show("温泉地");
hide("小旅行");
hide("食道楽");
hide("車中泊");
//表示マーカーのサイドバーリスト作成
makeSidebar();
]]>
|
- チェックボックスのインプットフォームを地図表示エリアの下に追加
|
<![CDATA[
<form>＜カテゴリ＞
<input type="checkbox" id="温泉地box" onclick=boxclick(this,"温泉地") /> 温泉地
<input type="checkbox" id="小旅行box" onclick=boxclick(this,"小旅行") /> 小旅行
<input type="checkbox" id="食道楽box" onclick=boxclick(this,"食道楽") /> 食道楽
<input type="checkbox" id="車中泊box" onclick=boxclick(this,"車中泊") /> 車中泊
</form>
]]>
|
■ 「（応用１）カテゴリ毎にマーカーの表示/非表示を切り替える」のソースコード
|
<![CDATA[
<html>
<head><title>（応用１）カテゴリ毎にマーカーの表示/非表示を切り替える</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript" src="./downloadxml.js"></script>
<script type="text/javascript">
//グローバル変数宣言
var gmarkers = [];
var map;
var infoWindow = new google.maps.InfoWindow();
//マーカーオブジェクトの作成
function createMarker(name,point,hpurl,imgurl,category){
//文字付ピンアイコンの作成
var customIcons = {
温泉地: {icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='
+ encodeURI("温") +'|FF0000|000000'},
小旅行: {icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='
+ encodeURI("旅") +'|0000FF|FFFFFF'},
食道楽: {icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='
+ encodeURI("食") +'|00FF00|000000'},
車中泊: {icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='
+ encodeURI("車") +'|FFFF00|000000'}
};
var gicons = customIcons[category] || {}; //指定なしの時は標準アイコンを使用
//マーカー設定
var marker = new google.maps.Marker({
map: map, //マーカーを表示する地図名
position: point, //マーカーの表示位置
icon: gicons.icon, //マーカーアイコンの設定
title: name //オンマウスで表示させる文字
});
//マーカー情報をグローバル配列に保存
marker.myname = name;
marker.mycategory = category;
gmarkers.push(marker);
//情報ウィンドウに表示するHTML文
var html = "<table border=1 cellspacing=1 cellpadding=3 bordercolor=#b98bba
style='font-size:15px;'" +" width=195px>
<tr><td bordercolor=#f2eaf2 width=90px><img src='"+ imgurl +"' width='90'"
+" height='67' border='0'></td><td bordercolor=#f2eaf2>
<a href='"+ hpurl +"' target=_blank>"
+"<b>"+ name +"</b></a><br /><br /><a href='javascript:zoomInOut(+3);'>"
+"<img src='./zoom-plus-mini.png' width='18' height='18' alt='plus'
title='3倍zoom-in'" +" border='0' align='top' /></a>
<a href='javascript:zoomInOut(-3);'>" +"<img src='./zoom-minus-mini.png'
width='18' height='18' alt='minus' title='3倍zoom-out'"
+" border='0' align='top' /></a></td></tr></table>";
//マーカークリックで情報ウィンドウを開く
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html); //情報ウィンドウの内容
infoWindow.open(map,marker); //情報ウィンドウを表示
map.panTo(point); //マーカーを地図の中心位置に移動
});
} //end of createMarker
//表示マーカーのサイドバーリスト作成
function makeSidebar() {
var sidebarList = '';
for (var i = 0; i < gmarkers.length; i++) {
if (gmarkers[i].getVisible()) {
sidebarList += '<a href="javascript:myclick('+ i
+')" onmouseover=this.style.backgroundColor="#ffeac0"'
+' onmouseout=this.style.backgroundColor="">'+ gmarkers[i].myname
+'</a><br />';
}
} //end of for
//サイドバーを表示
document.getElementById("side_bar").innerHTML = sidebarList;
} //end of makeSidebar
//表示カテゴリのマーカーを表示する
function show(category) {
for (var i = 0; i < gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {gmarkers[i].setVisible(true);}
}
document.getElementById(category+"box").checked = true;
}
//非表示カテゴリのマーカーを非表示にする
function hide(category) {
for (var i = 0; i < gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {gmarkers[i].setVisible(false);}
}
document.getElementById(category+"box").checked = false;
infoWindow.close();
}
//チェックボックスのクリック処理
function boxclick(box,category) {
if (box.checked) { show(category); } else { hide(category); }
//表示マーカーのサイドバーリスト作成
makeSidebar();
}
//サイドバークリックで情報ウィンドウを開く(マーカーを擬似クリック)
function myclick(num) {
google.maps.event.trigger(gmarkers[num], "click");
}
//3倍ズームイン・アウト
function zoomInOut(value) {
map.setZoom(map.getZoom()+value);
}
//地図オブジェクトの作成
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 8,
center: new google.maps.LatLng(35.969115,139.372559),
mapTypeId: google.maps.MapTypeId.ROADMAP, //上記3つは必須項目
scrollwheel: false //マウスホイールでのズームを無効にする
});
//XMLファイルからのデータ読み込み
downloadUrl("./samplev3.xml", function(data){
var xmlDoc = xmlParse(data);
var markers = xmlDoc.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++){
var name = markers[i].getAttribute("name");
var point = new google.maps.LatLng(markers[i].getAttribute("lat"),
markers[i].getAttribute("lng"));
var hpurl = markers[i].getAttribute("hpurl");
var imgurl = markers[i].getAttribute("imgurl");
var category = markers[i].getAttribute("category");
//マーカー作成
createMarker(name,point,hpurl,imgurl,category);
} //end of for
//カテゴリ毎のマーカー表示/非表示の初期設定
show("温泉地");
hide("小旅行");
hide("食道楽");
hide("車中泊");
//表示マーカーのサイドバーリスト作成
makeSidebar();
}); //end of downloadUrl
//地図上クリックで情報ウィンドウを非表示
google.maps.event.addListener(map, "click", function(){
infoWindow.close();
});
} //end of initialize
//ページロード時に実行するメソッド
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" style="font-size: 15px;">
<tr><td valign="top">
<div id="map_canvas" style="width: 520px; height: 510px"><br><br><br>
<center>地図 読込み中・・・しばらくお待ちください</center></div>
</td><td valign="top">
<div id="side_bar" style="border: solid 1px #808080; width: 140px; height: 510px;
overflow: auto; margin: 0px 0px 0px 3px;"></div>
</td></tr>
<tr><td colspan="2">
<form>＜カテゴリ＞
<input type="checkbox" id="温泉地box" onclick=boxclick(this,"温泉地") /> 温泉地
<input type="checkbox" id="小旅行box" onclick=boxclick(this,"小旅行") /> 小旅行
<input type="checkbox" id="食道楽box" onclick=boxclick(this,"食道楽") /> 食道楽
<input type="checkbox" id="車中泊box" onclick=boxclick(this,"車中泊") /> 車中泊
</form>
</td></tr></table>
</body>
</html>
]]>
|
■ （応用２）マウスオーバーで情報ウィンドウを表示しクリックでリンク先を開く
今までのサンプルは、サイドバーをクリックして情報ウィンドウを開き、ウィンドウ内のリンクをクリックしてリンク先を表示するものですが、サイドバーオンマウスで情報ウィンドウを開き、サイドバークリックでリンク先を表示する方法です。
- アイコンを「影付きアイコンピン」に変更
- マップタイプを地形にし、地図縮尺（ズームレベル）で地図の種類を自動で切り替え
- 地図の右下に表示される折りたたみ可能な概観地図を開いた状態で表示
- マーカーの情報ウィンドウ表示を「常に1つのみ表示」から「複数表示する」に変更し、地図上クリックで「全ての」マーカーの情報ウィンドウを非表示にする
- 「地図表示時に情報ウィンドウを表示する」を追加しています。
- マーカー情報にリンクURLを設定しグローバル配列に保存
|
<![CDATA[
//マーカー情報をグローバル配列に保存
marker.myhpurl = hpurl;
gmarkers.push(marker);
]]>
|
- function myclick2(num) を function myclick(num) の次に追加
|
<![CDATA[
//サイドバーがクリックされたらリンクページを開く
function myclick2(num) {
var w=window.open();
w.location.href = gmarkers[num].myhpurl;
}
]]>
|
- 「サイドバーリストにサイドバーを追加」を以下に置き換え
|
<![CDATA[
//サイドバーリストにサイドバーを追加
sidebarList += '<a href="javascript:myclick2('+ i +')"
onmouseover="myclick('+ i +')">' + name +'</a><br />';
]]>
|
■ 「（応用２）マウスオーバーで情報ウィンドウを表示しクリックでリンク先を開く」のソースコード
|
<![CDATA[
<html>
<head><title>（応用２）マウスオーバーで情報ウィンドウを表示しクリックでリンク先を開く</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript" src="./downloadxml.js"></script>
<script type="text/javascript">
//グローバル変数宣言
var gmarkers = [];
var map;
//マーカーオブジェクトの作成
function createMarker(name,point,hpurl,imgurl,category){
//アイコンピンの作成
var customIcons = {
温泉地: {icon: 'http://chart.apis.google.com/
chart?chst=d_map_pin_icon_withshadow&chld=parking|FF0000'},
小旅行: {icon: 'http://chart.apis.google.com/
chart?chst=d_map_pin_icon_withshadow&chld=train|FFFFFF'},
食道楽: {icon: 'http://chart.apis.google.com/
chart?chst=d_map_pin_icon_withshadow&chld=petrol|00FF00'},
車中泊: {icon: 'http://chart.apis.google.com/
chart?chst=d_map_pin_icon_withshadow&chld=home|FFFF00'}
};
var gicons = customIcons[category] || {}; //指定なしの時は標準アイコンを使用
//マーカー設定
var marker = new google.maps.Marker({
map: map, //マーカーを表示する地図名
position: point, //マーカーの表示位置
icon: gicons.icon, //マーカーアイコンの設定
title: name //オンマウスで表示させる文字
});
//マーカー情報をグローバル配列に保存
marker.myhpurl = hpurl;
gmarkers.push(marker);
//情報ウィンドウに表示するHTML文
var html = "<table border=1 cellspacing=1 cellpadding=3 bordercolor=#b98bba
style='font-size:15px;'" +" width=195px>
<tr><td bordercolor=#f2eaf2 width=90px><img src='"+ imgurl +"' width='90'"
+" height='67' border='0'></td><td bordercolor=#f2eaf2>
<a href='"+ hpurl +"' target=_blank>"
+"<b>"+ name +"</b></a><br /><br /><a href='javascript:zoomInOut(+3);'>"
+"<img src='./zoom-plus-mini.png' width='18' height='18' alt='plus'
title='3倍zoom-in'" +" border='0' align='top' /></a>
<a href='javascript:zoomInOut(-3);'>" +"<img src='./zoom-minus-mini.png'
width='18' height='18' alt='minus' title='3倍zoom-out'"
+" border='0' align='top' /></a></td></tr></table>";
//マーカークリックで情報ウィンドウを開く
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html); //情報ウィンドウの内容
infoWindow.open(map,marker); //情報ウィンドウを表示
map.panTo(point); //マーカーを地図の中心位置に移動
});
//地図上クリックで情報ウィンドウを非表示
google.maps.event.addListener(map, "click", function(){
infoWindow.close();
});
} //end of createMarker
//サイドバーオンマウスで情報ウィンドウを開く(マーカーを擬似クリック)
function myclick(num) {
google.maps.event.trigger(gmarkers[num], "click");
}
//サイドバークリックでリンクページを開く
function myclick2(num) {
var w=window.open();
w.location.href = gmarkers[num].myhpurl;
}
//3倍ズームイン・アウト
function zoomInOut(value) {
map.setZoom(map.getZoom()+value);
}
//地図オブジェクトの作成
function initialize() {
var sidebarList = '';
map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 8,
center: new google.maps.LatLng(35.969115,139.372559),
mapTypeId: google.maps.MapTypeId.TERRAIN, //上記3つは必須項目
overviewMapControl: true, //地図の右下に表示される折りたたみ可能な概観地図を表示する
overviewMapControlOptions:{opened: true}, //概観地図を開いた状態で表示する(デフォルトは閉)
scrollwheel: false //マウスホイールでのズームを無効にする
});
//XMLファイルからのデータ読み込み
downloadUrl("./samplev3.xml", function(data){
var xmlDoc = xmlParse(data);
var markers = xmlDoc.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++){
var name = markers[i].getAttribute("name");
var point = new google.maps.LatLng(markers[i].getAttribute("lat"),
markers[i].getAttribute("lng"));
var hpurl = markers[i].getAttribute("hpurl");
var imgurl = markers[i].getAttribute("imgurl");
var category = markers[i].getAttribute("category");
//マーカー作成
createMarker(name,point,hpurl,imgurl,category);
//サイドバーリストにサイドバーを追加
sidebarList += '<a href="javascript:myclick2('
+ i +')" onmouseover=\'this.style.backgroundColor="#ffeac0"; myclick('
+ i +');\' onmouseout=\'this.style.backgroundColor=""\'>'+ name +'</a><br />';
} //end of for
//サイドバーの表示
document.getElementById("side_bar").innerHTML = sidebarList;
}); //end of downloadUrl
//地図表示時に情報ウィンドウを表示
var infoWindow = new google.maps.InfoWindow({
position: new google.maps.LatLng(36.031332,139.026489),
content: "<center>
<table border=1 cellspacing=1 cellpadding=5 bordercolor=#b98bba width=250px>"
+ "<tr style='font-size:13px;'><td bordercolor=#f2eaf2>今までのサンプルは、"
+ "サイドバーをクリックして情報ウィンドウを開き、ウィンドウ内のリンクを"
+ "クリックしてリンク先を表示するものですが、サイドバーオンマウスで"
+ "情報ウィンドウを開き、サイドバークリックでリンク先を表示する方法です。"
+ "</td></tr></table></center>"
});
infoWindow.open(map);
//ズームレベルで地図の種類を自動で切り替える
google.maps.event.addListener(map, 'zoom_changed', function() {
if(map.getZoom() <= 10){
map.setMapTypeId(google.maps.MapTypeId.TERRAIN); //地形
} else {
map.setMapTypeId(google.maps.MapTypeId.ROADMAP); //地図
}
});
} //end of initialize
//ページロード時に実行するメソッド
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" style="font-size: 15px;">
<tr><td valign="top">
<div id="map_canvas" style="width: 520px; height: 510px"><br><br><br>
<center>地図 読込み中・・・しばらくお待ちください</center></div>
</td><td valign="top">
<div id="side_bar" style="border: solid 1px #808080; width: 140px; height: 510px;
overflow: auto; margin: 0px 0px 0px 3px;"></div>
</td></tr></table>
</body>
</html>
]]>
|
■ 知っていると便利な Tips
各Tipsのコードの挿入・変更箇所は、「サイドバー付き Googleマップ v3 地図」のソースコードを参照するか、各地図のサイドバーエリアを右クリックして「ソースの表示」をしてください。
■ 地図のコントロール
デフォルトで表示されるマップ コントロールは、以下の4つです。小さな地図では、「移動コントロール」「ズーム コントロール」「マップタイプ コントロール」はそれぞれ「非表示」「ボタン」「プルダウン」が自動選択されます。
移動コントロール
panControl | 地図を移動するボタン。地図の左上に表示される
地図の高さ(370px)に応じて表示/非表示を自動選択 |  |
ストリートビュー コントロール
streetViewControl | 人形の形をしたペグマン アイコン。地図の左上に表示される
|  |
ズーム コントロール
zoomControl | 地図のズーム レベル。地図の左上に表示される
地図の高さ(370px)に応じてスライダ/ボタンを自動選択 |  |
マップタイプ コントロール
mapTypeControl | マップ タイプを切り替える。地図の右上に表示される
地図の幅(300px)に応じて水平バー/プルダウンを自動選択 |  |
これらのコントロールやプロパティの設定は、地図の MapOptions フィールドで行い以下の設定が可能です。
- 地図コントロールの表示/非表示
- 地図コントロールのプロパティの変更
- マウス操作のコントロール
|
<![CDATA[
var map = new google.maps.Map(document.getElementById("map_canvas"), {
//必須項目
zoom: 5, //ズームレベル（0〜19）
center: new google.maps.LatLng(38.651198,137.021484), //地図の中心位置（緯度と経度）
mapTypeId: google.maps.MapTypeId.ROADMAP, //マップタイプ
//地図コントロールの表示/非表示
panControl: false, //移動コントロールを非表示
streetViewControl: false, //ストリートビューコントロールを非表示
zoomControl: false, //ズームコントロールを非表示
mapTypeControl: false, //マップタイプコントロールを非表示
scaleControl: true, //地図の左下に表示されるスケールコントロールを表示する
overviewMapControl: true, //地図の右下に表示される折りたたみ可能な概観地図を表示する
RotateControl: true, //地図の左上に表示される回転コントロールを表示する
disableDefaultUI: true, //全てのコントロールを無効化する
//地図コントロールのプロパティの変更
zoomControlOptions: {style: google.maps.ZoomControlStyle.SMALL},
//ズームコントロールをSMALLにする
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
//プルダウンメニュー型にする
overviewMapControlOptions:{opened: true}, //コントロールを開いた状態で表示する場合はtrue、
//折りたたまれた(最小化された)状態で表示する場合はfalseを指定
//マウス操作のコントロール
scrollwheel: false, //マウスホイールでのズームを無効にする
disableDoubleClickZoom: true, //ダブルクリックによるズームと中央揃えを無効にする
draggable: false //地図のドラッグを無効にする
});
]]>
|
■ 情報ウィンドウの最大幅の設定
情報ウィンドウには文字列やHTMLタグなどを記述することができますが、非常に長い文字列を表示した場合などは情報ウィンドウの幅も自動的に広がって表示されます。そして地図の横幅いっぱいまで広がっても表示しきれない時は、自動的に折り返しが行われ、それでもオーバーフローする場合は、縦自動スクロールで表示されます（基本的地図参照）。情報ウィンドウの最大幅を設定するには「maxWidth」プロパティで設定します。
|
<![CDATA[
//マーカークリックで情報ウィンドウを開く
var infowindow = new google.maps.InfoWindow({
maxWidth: 250, //情報ウィンドウの最大幅をピクセルで設定
content: '情報ウィンドウ内に表示するHTML'
});
google.maps.event.addListener(marker,'click',function(){infowindow.open(map,marker);});
]]>
|
■ 情報ウィンドウを常に1つのみ表示する
V3からは複数の情報ウィンドウを表示できるようになりましたが、V2と同じように、同時には1つのウィンドウのみ表示したい場合、infoWindow をグローバル変数として文頭で宣言して情報ウィンドウを1つだけ作成し、マップ イベント（クリックなど）により別の地点や、マーカーに再割り当てします。
|
<![CDATA[
//グローバル変数宣言
var infoWindow = new google.maps.InfoWindow();
............................
//マーカークリックで情報ウィンドウを開く
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html); //情報ウィンドウの内容
infoWindow.open(map,marker); //情報ウィンドウを表示
});
]]>
|
■ 情報ウィンドウを複数表示する
「情報ウィンドウを常に1つのみ表示する」では、infoWindow をグローバル変数として宣言し情報ウィンドウを1つだけ作成していますが、情報ウィンドウを複数表示したい場合は「マーカークリックで情報ウィンドウを開く」の中で infoWindow をローカル宣言し infoWindow の再割り当てを行わず、マーカー毎に情報ウィンドウを作成するようにします。関数内に記述されているので、個々のマーカーの情報ウインドウが別々のインスタンスになります。
|
<![CDATA[
//マーカークリックで情報ウィンドウを開く
var infoWindow = new google.maps.InfoWindow(); //マーカー毎にinfoWindowを作成
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html); //情報ウィンドウの内容
infoWindow.open(map,marker); //情報ウィンドウを表示
});
]]>
|
■ 地図上クリックで情報ウィンドウを非表示にする
情報ウィンドウを閉じるには、右上隅の「閉じる」アイコンをクリックする必要がありますが、地図をクリックして情報ウィンドウを閉じる方がなにかと便利です。
|
<![CDATA[
//地図上クリックで情報ウィンドウを非表示
google.maps.event.addListener(map, "click", function(){
infoWindow.close();
});
]]>
|
■ 地図表示時に情報ウィンドウを表示
地図表示時に最初から情報ウィンドウを表示するには、以下のコードを「XMLファイルからのデータ読み込み」の後に追加します。
|
<![CDATA[
//地図表示時に情報ウィンドウを表示
infoWindow = new google.maps.InfoWindow({
position: new google.maps.LatLng(緯度, 経度), //情報ウィンドウの地図上の表示位置
content: '情報ウィンドウ内に表示するHTML'
});
infoWindow.open(map);
]]>
|
■ 情報ウィンドウのプロパティの再設定
情報ウィンドウのプロパティの再設定を行うには「setOptions」メソッドを使います。この設定は情報ウィンドウを開く前に行います。後から「setOptions」メソッドを使って新しいプロパティの値を設定する場合は、いったん「close」メソッドで情報ウィンドウを閉じ「setOptions」でプロパティを設定してから情報ウィンドウを開きます。
|
<![CDATA[
infowindow.close();
infowindow.setOptions({
position: new google.maps.LatLng(緯度, 経度), //情報ウィンドウの地図上の表示位置
maxWidth: 300, //情報ウィンドウの最大幅をピクセルで設定
content: '情報ウィンドウ内に表示するHTML',
disableAutoPan: true, //地図位置の自動調整を無効にする(デフォルトはfalse)
zIndex: 1 //情報ウィンドウの重なり順序を指定
//(数字が大きい方が前面に表示、デフォルトは緯度が低いものがより前面に表示)
});
infowindow.open(map);
]]>
|
■ 地図縮尺（ズームレベル）で地図の種類を自動で切り替える
温泉地などの表示では、広域地図では山間部 or 平野部などが見易い「地形図」、市街地図ではルートや近隣のランドマークを調べ易い「地図（ロードマップ）」で表示したいことがあります。サンプルはズームレベル 10 以下で地形図、11 以上で地図に自動で切り替えて表示します。「XMLファイルからのデータ読み込み」の後ろに以下のコードを追加します。
|
<![CDATA[
//ズームレベルで地図の種類を自動で切り替える
google.maps.event.addListener(map, 'zoom_changed', function() {
if(map.getZoom() <= 10){
map.setMapTypeId(google.maps.MapTypeId.TERRAIN); //地形
} else {
map.setMapTypeId(google.maps.MapTypeId.ROADMAP); //地図
}
});
]]>
|
■ サイドバー オンマウスで選択項目の背景色を変える
項目選択を明確にするために、サイドバー オンマウスで選択した項目の背景色を変えるには、「サイドバーリストにサイドバーを追加」を以下のコードに置き換えます。
|
<![CDATA[
//サイドバーリストにサイドバーを追加
sidebarList += '<a href="javascript:myclick('+ i
+')" onmouseover=this.style.backgroundColor="#ffeac0"'
+' onmouseout=this.style.backgroundColor="">'+ name +'</a><br />';
]]>
|
■ 複数のカスタムアイコンでマーカーを作成する（createMarker()）
「サイドバー付き Googleマップ v3 地図」では、category のマーカーアイコンとして、温泉地は赤アイコン、小旅行は白アイコン、食道楽は緑アイコン、車中泊は黄アイコンの複数のカスタムアイコンを使用します。複数のカスタムアイコンの設定とマーカの作成方法を以下に示します。
- カスタムアイコンの入手方法はこちらを参照。
- Dynamic Icons 機能を使ってデフォルトのマーカーをカスタムアイコンにする方法はこちらを参照。
|
<![CDATA[
//グローバル変数宣言
var gmarkers = [];
var map;
var infoWindow = new google.maps.InfoWindow();
//マーカーオブジェクトの作成
function createMarker(name,point,hpurl,imgurl,category){
//カスタムアイコン設定
var customIcons = {
温泉地: {icon: '赤アイコンのURL'}, //カテゴリー温泉地のアイコン設定
小旅行: {icon: '白アイコンのURL'}, //カテゴリー小旅行のアイコン設定
食道楽: {icon: '緑アイコンのURL'}, //カテゴリー食道楽のアイコン設定
車中泊: {icon: '黄アイコンのURL'} //カテゴリー車中泊のアイコン設定
};
var gicons = customIcons[category] || {}; //指定なしの時は標準アイコンを使用
//マーカー設定
var marker = new google.maps.Marker({
map: map, //マーカーを表示する地図名
position: point, //マーカーの表示位置
icon: gicons.icon, //マーカーアイコンの設定
title: name //オンマウスで表示させる文字
});
//マーカー情報をグローバル配列に保存
gmarkers.push(marker);
var html = "情報ウィンドウに表示するHTML文";
//マーカークリックで情報ウィンドウを開く
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html); //情報ウィンドウの内容
infoWindow.open(map,marker); //情報ウィンドウを表示
map.panTo(point); //マーカーを地図の中心位置に移動
});
} //end of createMarker
]]>
|
■ Dynamic Icons 機能を使ってデフォルトのマーカーをカスタムアイコンにする 〜Google Developers-Dynamic Icons
デフォルトのマーカーを利用して、Google Chart API の Dynamic Icons 機能を使ってアイコンを作成する方法です。画像は Googleサーバで自動生成され、自分で画像ファイルを作らなくても簡単にカスタムアイコンが作れるので便利です。
- 作成例（リンク方法の記述で Googleサーバーから画像を読み込み表示しています）
- 文字ピン：
- アイコンピン：
 (ホーム)
 (駐車場)
 (GS)
 (食堂)
 (空港)
 (駅)
 (遊園地)
■ 文字ピン
|
<![CDATA[
//日本語ピンの作成（関数encodeURI()を使う）
var customIcons = {
温泉地: {icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='
+ encodeURI("温") +'|FF0000|000000'},
小旅行: {icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='
+ encodeURI("旅") +'|0000FF|FFFFFF'},
食道楽: {icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='
+ encodeURI("食") +'|00FF00|000000'},
車中泊: {icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='
+ encodeURI("車") +'|FFFF00|000000'}
};
//日本語ピンの作成（UTF-8でURLエンコードした文字列を使う）
var customIcons = {
温泉地: {icon: 'http://chart.apis.google.com/
chart?chst=d_map_pin_letter&chld=%e6%b8%a9|FF0000|000000'},
小旅行: {icon: 'http://chart.apis.google.com/
chart?chst=d_map_pin_letter&chld=%e6%97%85|0000FF|FFFFFF'},
食道楽: {icon: 'http://chart.apis.google.com/
chart?chst=d_map_pin_letter&chld=%e9%a3%9f|00FF00|000000'},
車中泊: {icon: 'http://chart.apis.google.com/
chart?chst=d_map_pin_letter&chld=%e8%bb%8a|FFFF00|000000'}
};
//英語ピンの作成
var customIcons = {
温泉地: {icon: 'http://chart.apis.google.com/
chart?chst=d_map_pin_letter&chld=A|FF0000|000000'},
小旅行: {icon: 'http://chart.apis.google.com/
chart?chst=d_map_pin_letter&chld=B|0000FF|FFFFFF'},
食道楽: {icon: 'http://chart.apis.google.com/
chart?chst=d_map_pin_letter&chld=C|00FF00|000000'},
車中泊: {icon: 'http://chart.apis.google.com/
chart?chst=d_map_pin_letter&chld=D|FFFF00|000000'}
};
]]>
|
■ アイコンピン
|
<![CDATA[
//アイコンピンの作成
var customIcons = {
温泉地: {icon: 'http://chart.apis.google.com/
chart?chst=d_map_pin_icon&chld=parking|FF0000'},
小旅行: {icon: 'http://chart.apis.google.com/
chart?chst=d_map_pin_icon&chld=train|FFFFFF'},
食道楽: {icon: 'http://chart.apis.google.com/
chart?chst=d_map_pin_icon&chld=petrol|00FF00'},
車中泊: {icon: 'http://chart.apis.google.com/
chart?chst=d_map_pin_icon&chld=home|FFFF00'}
};
]]>
|
■ 設置法
- 「サイドバー付き Googleマップ v3 地図」のソースコードの「カスタムアイコン設定」を「日本語ピンの作成」or「英語ピンの作成」or「アイコンピンの作成」に入れ替えます。
- URLエンコード
日本語文字などの非アスキー文字は、そのままではURLとして使えません。URLに日本語を使うためには、
- encodeURI() というJavaScript関数を使って記述する or
- UrlEncode.netで日本語文字を文字コード UTF-8 でURLエンコードし、URLで使える文字列に変換して記述します。（温は %e6%b8%a9、旅は %e6%97%85、食は %e9%a3%9f、車は %e8%bb%8a など）
- リンク方法とパラメータの説明（色付きの箇所を自分の用途に合わせて変更）
- 文字ピン：
＜リンク方法＞
http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%e6%b8%a9|FF0000|000000
＜パラメータの説明＞
?chst=d_map_pin_letter ：アイコンの形状(letter＝文字ピン)を指定
（?chst=d_map_pin_letter_withshadow ：影付きアイコンにする場合）
&chld=%e6%b8%a9|FF0000|000000 ：文字(%e6%b8%a9＝温)、背景色(RGB)、文字色(RGB) を指定
- 文字を指定しない（encodeURI("") or &chld=|FF0000|にする）と文字なしのアイコン（背景色FF0000＝赤）になります。
- アイコンピン：
＜リンク方法＞
http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=home|FFFF00
＜パラメータの説明＞
?chst=d_map_pin_icon ：アイコンの形状(icon＝アイコンピン)を指定
（?chst=d_map_pin_icon_withshadow ：影付きアイコンにする場合）
&chld=home|FF0000 ：アイコン名、背景色(RGB) を指定
- 使用できるアイコンとアイコン名はこちらを参照
■ XMLファイルの読み込みライブラリー
V3 のGoogle Maps API に XMLファイルを読み込む方法は、一般的には JavaScript のライブラリー jQuery が使われますが、本プログラムでは downloadxml.js というライブラリーを使ってXMLファイルの読み込みを行います。
■ downloadxml.jsのダウンロード（2014.1.23現在の最新版は r44）
Google Project Hosting ページ右欄の「File info」→「View raw file」をクリックしてソースページを開き、コピー＆貼り付けで downloadxml.jsファイルを作成します。作成した downloadxml.js を自分のサーバにアップして利用します。
■ downloadxml.jsの組み込み
HTMLのヘッダー部に以下の行を追加し、downloadxml.jsを組み込みます
|
<![CDATA[
<script type="text/javascript" src="downloadxml.jsのURL"></script>
]]>
|
■ XMLファイルの読み込み（downloadUrl()）
|
<marker name='名前' lat='緯度' lng='経度' hpurl='HPurl' imgurl='画像url' category='カテゴリ名' />
|
形式の、要素（markerタグ）に属性と値（name='東京スカイツリー'、lat='35.71008' ・・・ category='小旅行'）を記述したXMLファイルを処理します。
（重要）XMLファイルは Shift-JIS ではなく UTF-8 で保存しないと読み込めないので注意します。
|
<![CDATA[
//XMLファイルからのデータ読み込み
downloadUrl("XMLファイルのURL", function(data){
var xmlDoc = xmlParse(data);
var markers = xmlDoc.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++){
var name = markers[i].getAttribute("name"); //name属性の値(名前)を変数nameに格納
var point = new google.maps.LatLng(markers[i].getAttribute("lat"),
markers[i].getAttribute("lng")); //マーカーの座標値(緯度,経度)を変数pointに格納
var hpurl = markers[i].getAttribute("hpurl"); //hpurl属性の値(HPurl)を変数hpurlに格納
var imgurl = markers[i].getAttribute("imgurl");
//imgurl属性の値(画像url)を変数imgurlに格納
var category = markers[i].getAttribute("category");
//category属性の値(カテゴリ名)を変数categoryに格納
//マーカー作成
createMarker(name,point,hpurl,imgurl,category);
//サイドバーリストにサイドバーを追加
sidebarList += '<a href="javascript:myclick('+ i +')">'+ name +'</a><br />';
} //end of for
//サイドバーの表示
document.getElementById("side_bar").innerHTML = sidebarList;
}); //end of downloadUrl
]]>
|
■ Google Maps visual refresh（新ビジュアル） 〜Google Maps JS API v3 Notify(英文)
（2014.2.18追記）2014.2.18に v3.15 が正式リリースされ、旧ビジュアル（v3.13）は使えなくなりました。
2013.11.15に、地図の外観を一新した（ビジュアル リフレッシュ）v3.14が正式リリースされ、旧ビジュアル（v3.13）で表示されていたマーカーや情報ウィンドウの影画像は、設定しても全て無視されるようになりました。
正式リリース以降は、新ビジュアル（v3.14）に完全に切り替わったため、旧ビジュアル（v3.13）の地図は表示できなくなり、旧ビジュアルで地図表示したい場合は、HTMLヘッダー部の「V3の組み込みパラメータ」に、組込むライブラリのバージョン指定（&v=3.13）を追加します（※将来v3.15が正式リリースされるとv3.13は使えなくなるので、影がどうしても必要な地図はそれまでにDynamic Iconsの影付きアイコンに切換えるなどの対処が必要です）。
Google Maps visual refresh（新ビジュアル）（v3.14）では、次の４つの大きな変更が行われています。
- 新しいベースマップ（高速道路が緑からオレンジ、国道がオレンジから黄色、県道が黄色から一般道と同じ色なしに）
- 新デフォルトマーカー（サイズが少し大きくなり色も鮮やかに。影なし）
- 情報ウィンドウのスタイル（吹き出し矢印の変更と影なし。文字サイズの縮小）
- コントロールのスタイル（ボタン等のパーツが影なしとなり全般にすっきりしたものに）
【新ビジュアル（v3.14）の地図】
 | ← | 【旧ビジュアル（v3.13）の地図】
 |
|
|
