Google Maps JavaScript API v3マーカー、アイコン
- 地図にマーカーを立てる〔Markerクラス〕
- マーカーイベント
- マーカーのオプション設定〔MarkerOptionsオブジェクト〕
- マーカーのマウスやタッチイベントを有効・無効にする〔clickable〕
- マーカーにマウスオーバーした時のアイコンを変更する〔cursor〕
- マーカーをドラッグさせる〔draggable〕
- マーカーに影を付けなくする〔flat〕
- マーカーに自作アイコンを使用する〔icon〕
- 自作アイコンに影を付ける〔icon+shadow〕
- 自作アイコンクリックでアイコンを切替〔ペンギンバージョン〕
- 自作アイコンクリックでアイコン+影をセットで切替〔play for japanバージョン〕
- マーカーをドラッグした時のアニメーションを変更〔raiseOnDrag〕
- マーカーのクリック&ドロップ可能な範囲をイメージマップで指定〔shape〕
- マーカーの表示・非表示を切り替える〔visible〕
- マーカーをアニメーションさせる〔Animationクラス、getAnimation / SetAnimationメソッド〕
- XMLファイルを読み込んでマーカーを表示
地図にマーカーを立てる
Markerクラス
2012/5/5
マーカーは地図上の場所を示すオーバーレイです。 マーカーを作成するには、Markerクラスを使用します。 マーカーの設定は、MarkerOptionsオブジェクトのプロパティで設定します。
下記のサンプルでは、表参道駅(35.665270, 139.712330)にマーカーを立てます。



<!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" /> <!-- 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, /* 地図タイプ */ mapTypeId: google.maps.MapTypeId.ROADMAP }; /* 地図オブジェクト */ var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions); /* ★マーカーオブジェクト */ var marker = new google.maps.Marker({ position: latlng, /* マーカーを立てる場所の緯度・経度 */ map: map, /*マーカーを配置する地図オブジェクト */ title: '表参道駅' }); } /* ロード時に初期化 */ google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <h3>マーカー</h3> <p>表参道駅の場所にマーカーを立てます。</p> <!-- 地図の埋め込み表示 --> <div id="map_canvas"></div> </body> </html>
マーカーイベント
2012/5/5
マーカーで発生するイベント。
イベント | 説明 | |
---|---|---|
animation_changed | マーカーのアニメーションプロパティが変更された時に発生。 | サンプル |
click | マーカーアイコンがクリックされた時に発生。 | サンプル |
clickable_changed | マーカーのclickableプロパティが変更された時に発生。 ※マーカーのクリックがが無効になっている場合は発生しません。 |
|
cursor_changed | マーカーのcursorプロパティが変更された時に発生。 | サンプル |
dblclick | マーカーアイコンがダブルクリックされた時に発生。 | サンプル |
drag | ユーザーがマーカーをドラッグしている間、このイベントが繰り返し発生。 | サンプル |
dragend | ユーザーがマーカーのドラッグを終了した時に発生。 | |
draggable_changed | マーカーのdraggableプロパティが変更された時に発生。 | |
dragstart | ユーザーがマーカーのドラッグを開始した時に発生。 | |
flat_changed | マーカーのflatプロパティが変更された時に発生。 | サンプル |
icon_changed | マーカーのiconプロパティが変更された時に発生。 | サンプル |
mousedown | マーカー上でマウスが押された時に発生。 | サンプル |
mouseout | マーカーアイコン領域からマウスが離れた時に発生。 | |
mouseover | マーカーアイコン領域からマウスが乗った時に発生。 | |
mouseup | マーカー上で押されていたマウスを離した時に発生。 | |
position_changed | マーカーのpositionプロパティが変更された時に発生。 | サンプル |
rightclick | マーカーが右クリックされた時に発生。 | サンプル |
shadow_changed | マーカーのshadowプロパティが変更された時に発生。 | サンプル |
shape_changed | マーカーのshapeプロパティが変更された時に発生。 | サンプル |
title_changed | マーカーのtitleプロパティが変更された時に発生。 | |
visible_changed | マーカーのvisibleプロパティが変更された時に発生。 | サンプル |
zindex_changed | マーカーのzIndexプロパティが変更された時に発生。 |
マーカーのマウスやタッチイベントを有効・無効にする
clickable
2012/5/5
マーカーはデフォルトでマウスイベントやタッチイベントが有効になっています。 これらを無効にするには、MarkerOptionsオブジェクトのclickableプロパティに「false」を指定します。
マーカーアイコンをクリックした時には、clickイベントが発生します。
マーカーアイコンをダブルクリックした時には、dblclickイベントが発生します。
マーカーが右クリックされた時には、rightclickイベントが発生します。
マーカーのclickableプロパティが変更された時には、clickable_changedイベントが発生します。

<!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" /> <script type="text/javascript" src="/content/js/console.js"></script> <!-- Google Maps APIの読み込み --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> var marker; /* 地図の初期化 */ function initialize() { /* 緯度・経度:日本, 表参道駅(東京)*/ var latlng=new google.maps.LatLng(35.665270, 139.712330); /* 地図のオプション設定 */ var myOptions = { /*初期のズーム レベル */ zoom: 18, /* 地図の中心点 */ center: latlng, /* 地図タイプ */ mapTypeId: google.maps.MapTypeId.ROADMAP }; /* 地図オブジェクト */ var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions); /* ★マーカーオブジェクト */ marker = new google.maps.Marker({ position: latlng, /* マーカーを立てる場所の緯度・経度 */ map: map, /*マーカーを配置する地図オブジェクト */ animation: google.maps.Animation.DROP, /* アニメーション(ドロップ) */ title: '表参道駅' }); /* マーカーアイコンがクリックされた時(クリックでアニメション開始・停止) */ google.maps.event.addListener(marker, 'click', toggleBounce); document.getElementById("res").innerHTML=marker.getClickable(); /* マーカーのclickableプロパティが変更された時 */ google.maps.event.addListener(marker, 'clickable_changed', function(e){ dbg("clickable_changed"); }); /* マーカーアイコンがダブルクリックされた時 */ google.maps.event.addListener(marker, 'dblclick', function(e){ dbg("dblclick"); }); /* マーカーが右クリックされた時 */ google.maps.event.addListener(marker, 'rightclick', function(e){ dbg("rightclick"); }); } function toggleBounce() { if (marker.getAnimation() != null) { /* アニメーション無効化 */ marker.setAnimation(null); } else { /* アニメーション(飛び跳ねる) */ marker.setAnimation(google.maps.Animation.BOUNCE); } dbg("click"); } function chk(){ marker.setOptions({ clickable:!document.getElementById("flag_1").checked }); document.getElementById("res").innerHTML=marker.getClickable(); } /* ロード時に初期化 */ google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <h3>clickable</h3> <p>表参道駅付近のスポット(こどもの城、表参道ヒルズ、スパイラルビルにドロップアニメーション付きでマーカーを立てます。マーカーをクリックすると飛び跳ねるアニメーションを行います。</p> <p>※console.logにログを出力。</p> <hr /> <form> ▼下記にチェックを入れると、マーカーのクリックイベントが無効になります。<br> <label for="flag_1"><input type="checkbox" name="flag" id="flag_1" onclick="chk()" />マーカーのクリックを無効にする</label>(clickable状態:<span id="res"></span>)</p> </form> <!-- 地図の埋め込み表示 --> <div id="map_canvas"></div> </body> </html>
マーカーにマウスオーバーした時のアイコンを変更する
cursor
2012/5/5
マーカーにマウスオーバーした時はデフォルトで手の形をしたカーソル('hand')が表示されます。 任意のカーソルを指定したい場合は、カーソルの名前をMarkerOptionsオブジェクトのcursorプロパティに指定します。
カーソルは、MarkerクラスのsetOptionsメソッドで変更可能です。 現在設定されているカーソルは、MarkerクラスのgetCursorメソッドで取得可能です。
マーカーのカーソルが変更された時は、cursor_changedイベントが発生します。
下記は、マーカーにマウスオーバーした時のカーソルを変更するサンプルです。

<!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" /> <script type="text/javascript" src="/content/js/console.js"></script> <!-- Google Maps APIの読み込み --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> var marker; /* 地図の初期化 */ function initialize() { /* 緯度・経度:日本, 表参道駅(東京)*/ var latlng=new google.maps.LatLng(35.665270, 139.712330); /* 地図のオプション設定 */ var myOptions = { /*初期のズーム レベル */ zoom: 18, /* 地図の中心点 */ center: latlng, /* 地図タイプ */ mapTypeId: google.maps.MapTypeId.ROADMAP }; /* 地図オブジェクト */ var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions); /* ★マーカーオブジェクト */ marker = new google.maps.Marker({ position: latlng, /* マーカーを立てる場所の緯度・経度 */ map: map, /*マーカーを配置する地図オブジェクト */ animation: google.maps.Animation.DROP, /* アニメーション(ドロップ) */ title: '表参道駅' }); review(); /* マーカーのcursorプロパティが変更された時 */ google.maps.event.addListener(marker, 'cursor_changed', function(e){ dbg("cursor_changed"); }); } function review(){ var idx=document.getElementById("cursor").selectedIndex; marker.setOptions({ cursor:document.getElementById("cursor").options[idx].value }); document.getElementById("res").innerHTML=marker.getCursor(); } /* ロード時に初期化 */ google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <h3>cursor</h3> <p>マーカーにマウスオーバーした時のカーソルを変更します。</p> <p>※console.logにログを出力。</p> <hr /> <form> <label for="cursor"> <select id="cursor" name="cursor" onchange="review()"> <option value="crosshair" selected>crosshair</option> <option value="move">move</option> <option value="wait">wait</option> <option value="help">help</option> <option value="hand">hand</option> </select> </label> (cursor状態:<span id="res"></span>)</p> </form> <!-- 地図の埋め込み表示 --> <div id="map_canvas"></div> </body> </html>
マーカーをドラッグさせる
draggable
2012/5/5
マーカーはデフォルトではドラッグできませんが、MarkerOptionsオブジェクトのdraggableプロパティに「true」を指定して、マーカーがドラッグ可能になります。 マーカーのドラッグ開始時にはdragstartイベント、ドラッグ中にはdragイベント、ドラッグ終了時にはdragendイベントが発生します。 マーカーのpositionプロパティが変更された時(ドラッグなどでマーカーの位置が変わった時)は、position_changedイベントが発生します。
下記のサンプルでは、マーカーをドラッグすると、ドラッグが終了した時、ドラッグ開始位置と終了位置の緯度・経度を情報ウィンドウで表示します。

<!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" /> <script type="text/javascript" src="/content/js/console.js"></script> <!-- 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"> var map, marker, infowindow; /* 地図の初期化 */ function initialize() { /* 緯度・経度:日本, 表参道駅(東京)*/ var omotesando=new google.maps.LatLng(35.665270, 139.712330); /* 地図のオプション設定 */ var myOptions = { /*初期のズーム レベル */ zoom: 15, /* 地図の中心点 */ center: omotesando, /* 地図タイプ */ mapTypeId: google.maps.MapTypeId.ROADMAP }; /* 地図オブジェクト */ map=new google.maps.Map(document.getElementById("map_canvas"), myOptions); /* ★マーカーオブジェクト */ marker = new google.maps.Marker({ position: omotesando, /* マーカーを立てる場所の緯度・経度 */ map: map, /*マーカーを配置する地図オブジェクト */ title: '表参道駅', draggable:true /* マーカーをドラッグ可能に */ }); $("#st").val(omotesando.lat()+","+omotesando.lng()); /* 地図がクリックされた時 */ google.maps.event.addListener(map, 'click', function(event) { if(infowindow){ infowindow.close(); } }); /* マーカーのドラッグが開始された時 */ google.maps.event.addListener(marker, 'dragstart', function(event) { if(infowindow){ infowindow.close(); } $("#st").val(event.latLng.lat()+","+event.latLng.lng()); dbg("dragstart"); }); /* マーカーのドラッグが終了した時 */ google.maps.event.addListener(marker, 'dragend', function(event) { $("#ed").val(event.latLng.lat()+","+event.latLng.lng()); infowindow=new google.maps.InfoWindow({ content:$("#st").val()+"<br>から<br>"+$("#ed").val()+"<br>に移動しました" }); infowindow.open(map,marker); dbg("dragend"); }); /* マーカーがドラッグされている時 */ google.maps.event.addListener(marker, 'drag', function(e){ dbg("drag"); }); /* マーカーのpositionプロパティが変更された時 */ google.maps.event.addListener(marker, 'position_changed', function(e){ dbg("position_changed"); }); /* マーカーのdraggableプロパティが変更された時 */ google.maps.event.addListener(marker, 'draggable_changed', function(e){ dbg("draggable_changed"); }); } /* マーカーのドラッグを有効にするかを設定 */ function review(){ var obj=document.getElementById("drag"); marker.setOptions({draggable:obj.checked}); } /* ロード時に初期化 */ google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <h3>drag</h3> <p>マーカーをドラッグすると、ドラッグ開始位置と終了位置の緯度・経度を情報ウィンドウで表示します。</p> <p>※console.logにログを出力。</p> <hr /> <form> <label for="drag"><input type="checkbox" name="drag" id="drag" checked onclick="review()" />マーカーのドラッグを有効にする</label> </form> <!-- 地図の埋め込み表示 --> <div id="map_canvas"></div> <input type="hidden" id="st" value="" /> <input type="hidden" id="ed" value="" /> </body> </html>
マーカーに影を付けなくする
flat
2012/5/5
マーカーはデフォルトで影が付くようになっています。 影なしのマーカーにするには、MarkerOptionsオブジェクトのflatプロパティに「true」を指定します。
既存のマーカーの影の設定は、setOptionsメソッドで変更できます。
marker.setOptions({flat:true}); marker.setOptions({flat:false});
マーカーのflatプロパティが変更された時は、flat_changedイベントが発生します。

<!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" /> <script type="text/javascript" src="/content/js/console.js"></script> <!-- Google Maps APIの読み込み --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> var marker; /* 地図の初期化 */ function initialize() { /* 緯度・経度:表参道駅 */ var latlng=new google.maps.LatLng(35.665270, 139.712330); /* 地図のオプション設定 */ var myOptions = { /*初期のズーム レベル */ zoom: 14, /* 地図の中心点 */ center: latlng, /* 地図タイプ */ mapTypeId: google.maps.MapTypeId.ROADMAP, /* デフォルトUI無効 */ disableDefaultUI:true }; /* 地図オブジェクト */ map=new google.maps.Map(document.getElementById("map_canvas"), myOptions); /* マーカーオブジェクト */ marker = new google.maps.Marker({ position: latlng, animation: google.maps.Animation.BOUNCE, map: map, title: '表参道駅', flat:true }); /* マーカーのflatプロパティが変更された時 */ google.maps.event.addListener(marker, 'flat_changed', function(e){ dbg("flat_changed"); }); } function review(){ var obj=document.getElementsByName("flat"); for(var i=0; i<obj.length; i++){ if(obj[i].checked){ if(parseInt(obj[i].value)==0){ marker.setOptions({flat:true}); }else{ marker.setOptions({flat:false}); } } } } /* ロード時に初期化 */ google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <h3>flat</h3> <p>※console.logにログ出力。</p> <hr /> <form> マーカーの影: <label for="flat_1"><input type="radio" name="flat" id="flat_1" value="0" onclick="review()" checked />無</label> <label for="flat_2"><input type="radio" name="flat" id="flat_2" value="1" onclick="review()" />有</label> </form> <!-- 地図の埋め込み表示 --> <div id="map_canvas"></div> </body> </html>
マーカーに自作アイコンを使用する
icon
2012/5/5

マーカーは、デフォルトだと左図のようなアイコンがマーカーとして表示されますが、オリジナルのアイコンをマーカーとして使用することができます。
オリジナルのアイコンには、クリック可能な領域を示す図形を指定したり、影イメージの追加、他のオーバーレイ図形との表示上の関係を示す「積み上げ順序」などを指定可能です。
設置サンプル
下記のサンプルでは、日本(35.665270, 139.712330)に独自のアイコンをマーカーとして立てます。



<!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" /> <!-- 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(36.173357,138.251953); /* 地図のオプション設定 */ var myOptions = { /*初期のズーム レベル */ zoom: 3, /* 地図の中心点 */ center: latlng, /* 地図タイプ */ mapTypeId: google.maps.MapTypeId.ROADMAP }; /* 地図オブジェクト */ var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions); /* ★アイコン */ var image = '/content/img/ajax/googlemap/markerJP.png'; var marker = new google.maps.Marker({ position: latlng, map: map, icon: image }); } /* ロード時に初期化 */ google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <h3>icon</h3> <p>日本がある場所に自作アイコンをマーカーとして立てます。</p> <!-- 地図の埋め込み表示 --> <div id="map_canvas"></div> </body> </html>
自作アイコンに影を付ける
icon+shadow
2012/5/5
アイコンには、影イメージを追加して、地図の上に立っているような効果を演出することができます。
マーカーの影画像を生成してくれるオンラインツール
Google Maps Icon Shadowmaker for Google Maps v3
マーカーの影画像を生成してくれる便利なオンラインツールがあります! 作成した影画像はダウンロードでき、右側の地図上をクリックすると、影付きのアイコンを地図に追加して確認できます。

設置サンプル
下記のサンプルでは、アイコンに影イメージを追加しています。



<!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" /> <!-- 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(36.173357,138.251953); /* 地図のオプション設定 */ var myOptions={ /*初期のズーム レベル */ zoom: 3, /* 地図の中心点 */ center: latlng, /* 地図タイプ */ mapTypeId: google.maps.MapTypeId.ROADMAP }; /* 地図オブジェクト */ var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions); /* ★アイコン */ var image=new google.maps.MarkerImage( '/content/img/ajax/gmapv3/marker/markerJP.png', new google.maps.Size(48.0, 48.0), new google.maps.Point(0, 0), new google.maps.Point(24.0, 24.0) ); /* ★アイコンの影 */ var shadow=new google.maps.MarkerImage( '/content/img/ajax/gmapv3/marker/shadow-markerJP.png', new google.maps.Size(73.0, 48.0), new google.maps.Point(0, 0), new google.maps.Point(24.0, 24.0) ); /* マーカーオブジェクト */ var marker=new google.maps.Marker({ position: latlng, map: map, icon: image, shadow: shadow }); } /* ロード時に初期化 */ google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <h3>icon</h3> <p>自作アイコンに影を付けます。</p> <!-- 地図の埋め込み表示 --> <div id="map_canvas"></div> </body> </html>
自作アイコンクリックでアイコンを切替
ペンギンバージョン
2012/5/5
アイコンは、MarkerクラスのsetIcon(icon:string|MarkerImage)メソッドで変更できます。
設置サンプル
下記のサンプルでは、アイコンをクリックすると、下記のアイコン画像を切り替え表示します。2枚の違いは旗に日の丸があるかないかだけで、サイズも形も同じなので影画像は共有です。






<!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" /> <!-- Google Maps APIの読み込み --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> var imgFLG=0; /* 地図の初期化 */ function initialize() { /* 緯度・経度:日本 */ var latlng=new google.maps.LatLng(36.173357,138.251953); /* 地図のオプション設定 */ var myOptions={ /*初期のズーム レベル */ zoom: 3, /* 地図の中心点 */ center: latlng, /* 地図タイプ */ mapTypeId: google.maps.MapTypeId.ROADMAP }; /* 地図オブジェクト */ var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions); /* ★アイコン */ var image=new google.maps.MarkerImage( '/content/img/ajax/gmapv3/marker/markerJP.png', new google.maps.Size(48.0, 48.0), new google.maps.Point(0, 0), new google.maps.Point(24.0, 24.0) ); var image2=new google.maps.MarkerImage( '/content/img/ajax/gmapv3/marker/markerJP2.png', new google.maps.Size(48.0, 48.0), new google.maps.Point(0, 0), new google.maps.Point(24.0, 24.0) ); var shadow=new google.maps.MarkerImage( '/content/img/ajax/gmapv3/marker/shadow-markerJP.png', new google.maps.Size(73.0, 48.0), new google.maps.Point(0, 0), new google.maps.Point(24.0, 24.0) ); var marker=new google.maps.Marker({ position: latlng, map: map, icon: image, shadow: shadow }); /* マーカーアイコンがクリックされた時 */ google.maps.event.addListener(marker, 'click', function(event) { /* アイコンを変更 */ if(imgFLG==0){ marker.setIcon(image2); imgFLG=1; }else{ marker.setIcon(image); imgFLG=0; } }); } /* ロード時に初期化 */ google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <h3>icon</h3> <p>地図内のペンギンアイコンをクリックすると、アイコン画像を切り替えます(日の丸有無)。</p> <!-- 地図の埋め込み表示 --> <div id="map_canvas"></div> </body> </html>
自作アイコンクリックでアイコン+影をセットで切替
play for japanバージョン
2012/5/5
アイコンは、MarkerImageクラスのsetIcon(icon:string|MarkerImage)メソッドで変更できます。 アイコンの影は、MarkerImageクラスのsetShasow(icon:string|MarkerImage)メソッドで変更できます。
マーカーのiconプロパティが変更された時は、icon_changedイベントが発生します。 マーカーのshadowプロパティが変更された時は、shadow_changedイベントが発生します。
上記のサンプルでは画像の切り替えのみでしたが、下記のサンプルでは、アイコンをクリックすると、アイコンと影画像をセットで切り替え表示します。







<!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" /> <script type="text/javascript" src="/content/js/console.js"></script> <!-- Google Maps APIの読み込み --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> var imgFLG=0; var marker; /* 地図の初期化 */ function initialize() { /* 緯度・経度:日本 */ var latlng=new google.maps.LatLng(36.173357,138.251953); /* 地図のオプション設定 */ var myOptions={ /*初期のズーム レベル */ zoom: 3, /* 地図の中心点 */ center: latlng, /* 地図タイプ */ mapTypeId: google.maps.MapTypeId.ROADMAP }; /* 地図オブジェクト */ var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions); /* ★アイコン */ var image=new google.maps.MarkerImage( '/content/img/ajax/gmapv3/marker/markerU.png', new google.maps.Size(57.0, 57.0), new google.maps.Point(0, 0), new google.maps.Point(28.0, 28.0) ); var image2=new google.maps.MarkerImage( '/content/img/ajax/gmapv3/marker/markerUSA2.png', new google.maps.Size(93.0, 100.0), new google.maps.Point(0, 0), new google.maps.Point(27.0, 63.0) ); var shadow=new google.maps.MarkerImage( '/content/img/ajax/gmapv3/marker/shadow-markerU.png', new google.maps.Size(86.0, 57.0), new google.maps.Point(0, 0), new google.maps.Point(28.0, 28.0) ); var shadow2=new google.maps.MarkerImage( '/content/img/ajax/gmapv3/marker/shadow-markerUSA2.png', new google.maps.Size(144.0, 100.0), new google.maps.Point(0, 0), new google.maps.Point(31.0, 67.0) ); marker=new google.maps.Marker({ position: latlng, map: map, icon: image, shadow: shadow, }); /* アイコンがクリックされた時 */ google.maps.event.addListener(marker, 'click', function(event) { /* アイコンを変更 */ if(imgFLG==0){ marker.setIcon(image2); marker.setShadow(shadow2); imgFLG=1; }else{ marker.setIcon(image); marker.setShadow(shadow); imgFLG=0; } }); /* マーカーのiconプロパティが変更された時 */ google.maps.event.addListener(marker, 'icon_changed', function(e){ dbg("icon_changed"); }); /* マーカーのshadowプロパティが変更された時 */ google.maps.event.addListener(marker, 'shadow_changed', function(e){ dbg("shadow_changed"); }); } /* ロード時に初期化 */ google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <h3>icon</h3> <p>地図内のペンギンアイコンをクリックすると、アイコンと影を切り替えます。</p> <p>※console.logにログを出力。</p> <hr /> <!-- 地図の埋め込み表示 --> <div id="map_canvas"></div> </body> </html>
マーカーをドラッグした時のアニメーションを変更
raiseOnDrag
2012/5/5
デフォルトでは、地図上のマーカーをドラッグした時に飛び跳ねるアニメーションをします。 これを無効にするには、MarkerOptionsオブジェクトのraiseOnDragプロパティに「false」を指定します。
マーカーのアニメーションが変更された時は、animation_changedイベントが発生します。

<!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" /> <script type="text/javascript" src="/content/js/console.js"></script> <!-- Google Maps APIの読み込み --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> var marker,marker2; /* 地図の初期化 */ function initialize() { /* 緯度・経度:表参道駅 */ var latlng=new google.maps.LatLng(35.665270, 139.712330); /* 緯度・経度:乃木坂駅 */ var latlng2=new google.maps.LatLng(35.666572,139.726215); /* 地図のオプション設定 */ var myOptions = { /*初期のズーム レベル */ zoom: 14, /* 地図の中心点 */ center: latlng, /* 地図タイプ */ mapTypeId: google.maps.MapTypeId.ROADMAP, /* デフォルトUI無効 */ disableDefaultUI:true }; /* 自作アイコン+影 */ var image=new google.maps.MarkerImage( '/content/img/ajax/gmapv3/marker/raiseOnDragTrue.png', new google.maps.Size(105.0, 44.0), new google.maps.Point(0, 0), new google.maps.Point(52.0, 22.0) ); var shadow=new google.maps.MarkerImage( '/content/img/ajax/gmapv3/marker/shadow-raiseOnDragTrue.png', new google.maps.Size(128.0, 44.0), new google.maps.Point(0, 0), new google.maps.Point(52.0, 22.0) ); var image2=new google.maps.MarkerImage( '/content/img/ajax/gmapv3/marker/raiseOnDragFalse.png', new google.maps.Size(105.0, 44.0), new google.maps.Point(0, 0), new google.maps.Point(52.0, 22.0) ); var shadow2=new google.maps.MarkerImage( '/content/img/ajax/gmapv3/marker/shadow-raiseOnDragFalse.png', new google.maps.Size(128.0, 44.0), new google.maps.Point(0, 0), new google.maps.Point(52.0, 22.0) ); /* 地図オブジェクト */ map=new google.maps.Map(document.getElementById("map_canvas"), myOptions); /* 地図をフィットさせる */ map.fitBounds(new google.maps.LatLngBounds(latlng, latlng2)); /* マーカーオブジェクト */ marker = new google.maps.Marker({ position: latlng, animation: google.maps.Animation.DROP, map: map, icon:image, shadow:shadow, title: '表参道駅', raiseOnDrag:true,/* マーカードラッグ時の飛び跳ねアニメーション有効 */ draggable:true }); marker2 = new google.maps.Marker({ position: latlng2, animation: google.maps.Animation.DROP, map: map, icon:image2, shadow:shadow2, title: '乃木坂駅', raiseOnDrag:false,/* マーカードラッグ時の飛び跳ねアニメーション無効 */ draggable:true }); /* ログ */ google.maps.event.addListener(marker, 'animation_changed', function(e){ dbg("markerのアニメーションが変更されました"); }); google.maps.event.addListener(marker2, 'animation_changed', function(e){ dbg("marker2のアニメーションが変更されました"); }); } function review(){ var obj=document.getElementsByName("ani"); for(var i=0; i<obj.length; i++){ if(obj[i].checked){ if(obj[i].value=="DROP"){ marker.setAnimation(google.maps.Animation.DROP); marker2.setAnimation(google.maps.Animation.DROP); }else{ marker.setAnimation(google.maps.Animation.BOUNCE); marker2.setAnimation(google.maps.Animation.BOUNCE); } } } } /* ロード時に初期化 */ google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <h3>raiseOnDrag</h3> <p>raiseOnDragを無効にすると、地図上のマーカーをドラッグした時の飛び跳ねるアニメーションが無効になります。</p> <p>※console.logにログを出力。</p> <hr /> <form> マーカーアニメーション: <label for="ani_1"><input type="radio" name="ani" id="ani_1" value="DROP" onclick="review()" checked />DROP</label> <label for="ani_2"><input type="radio" name="ani" id="ani_2" value="BOUNCE" onclick="review()" />BOUNCE</label> </form> <hr /> <!-- 地図の埋め込み表示 --> <div id="map_canvas"></div> </body> </html>
マーカーのクリック&ドロップ可能な範囲をイメージマップで指定
shape
2012/5/5
デフォルトでは、マーカー全体がクリック&ドロップできる領域になっています。 マーカー内の指定した範囲だけクリック&ドロップできるようにしたい場合は、MarkerOptionsオブジェクトのshapeプロパティを使用して、イメージマップを定義します。
イメージマップは、google.maps.MarkerShapeオブジェクトで指定します。 typeプロパティに区切り方、coordsプロパティにX座標・Y座標を配列で指定します。
下記は、マーカーのイメージマップ領域をグレー色の四角部分、マーカー全体で切り替える例です。 クリック&ドロップできる領域は、マウスオーバーした時に手カーソルになるところです。

<!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" /> <script type="text/javascript" src="/content/js/console.js"></script> <!-- Google Maps APIの読み込み --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> var marker; /* 地図の初期化 */ function initialize() { /* 緯度・経度:表参道駅 */ var latlng=new google.maps.LatLng(35.665270, 139.712330); /* 地図のオプション設定 */ var myOptions = { /*初期のズーム レベル */ zoom: 14, /* 地図の中心点 */ center: latlng, /* 地図タイプ */ mapTypeId: google.maps.MapTypeId.ROADMAP, /* デフォルトUI無効 */ disableDefaultUI:true, /* ドラッグ無効 */ draggable:false }; /* 自作アイコン+影 */ var image=new google.maps.MarkerImage( '/content/img/ajax/gmapv3/marker/box.png', new google.maps.Size(100.0, 100.0), new google.maps.Point(0, 0), new google.maps.Point(50.0, 50.0) ); var shadow=new google.maps.MarkerImage( '/content/img/ajax/gmapv3/marker/shadow-box.png', new google.maps.Size(151.0, 100.0), new google.maps.Point(0, 0), new google.maps.Point(50.0, 50.0) ); /* 地図オブジェクト */ map=new google.maps.Map(document.getElementById("map_canvas"), myOptions); /* マーカーオブジェクト */ marker = new google.maps.Marker({ position: latlng, map: map, title: '表参道駅', icon:image, shadow:shadow, draggable:true, shape:{coord:[25,25,75,75],type:"rect"} }); /* マーカーのshapeプロパティが変更された時 */ google.maps.event.addListener(marker, 'shape_changed', function(e){ dbg("shape_changed"); }); } function review(){ var obj=document.getElementsByName("shape"); for(var i=0; i<obj.length; i++){ if(obj[i].checked){ if(parseInt(obj[i].value)==0){ marker.setOptions({shape:{coord:[25,25,75,75],type:"rect"}}); }else{ marker.setOptions({shape:{coord:[0,0,100,100],type:"rect"}}); } } } } /* ロード時に初期化 */ google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <h3>shape</h3> <p> 下記は、マーカーのイメージマップ領域をグレー色の四角部分、マーカー全体で切り替える例です。 クリック&ドロップできる領域は、マウスオーバーした時に手カーソルになるところです。 </p> <p>※console.logにログを出力。</p> <hr /> <form> クリック&ドロップできる領域: <label for="shape_1"><input type="radio" name="shape" id="shape_1" value="0" onclick="review()" checked />グレー色のところだけ</label> <label for="shape_2"><input type="radio" name="shape" id="shape_2" value="1" onclick="review()" />全体</label> </form> <!-- 地図の埋め込み表示 --> <div id="map_canvas"></div> </body> </html>
マーカーの表示・非表示を切り替える
visible
2012/5/5
マーカーを非表示にするには、MarkerOptionsオブジェクトのvisibleプロパティに「false」を指定します。
マーカーのvisibleプロパティが変更された時には、visible_changedイベントが発生します。
以下は、マーカーの表示・非表示を切り替える例です。

<!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" /> <script type="text/javascript" src="/content/js/console.js"></script> <!-- Google Maps APIの読み込み --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> var marker; /* 地図の初期化 */ function initialize() { /* 緯度・経度:表参道駅 */ var latlng=new google.maps.LatLng(35.665270, 139.712330); /* 地図のオプション設定 */ var myOptions = { /*初期のズーム レベル */ zoom: 14, /* 地図の中心点 */ center: latlng, /* 地図タイプ */ mapTypeId: google.maps.MapTypeId.ROADMAP, /* デフォルトUI無効 */ disableDefaultUI:true }; /* 地図オブジェクト */ map=new google.maps.Map(document.getElementById("map_canvas"), myOptions); /* マーカーオブジェクト */ marker = new google.maps.Marker({ position: latlng, map: map, title: '表参道駅' }); /* マーカーのvisibleプロパティが変更された時 */ google.maps.event.addListener(marker, 'visible_changed', function(e){ dbg("visible_changed"); }); } function review(){ var obj=document.getElementsByName("visible"); for(var i=0; i<obj.length; i++){ if(obj[i].checked){ if(parseInt(obj[i].value)==0){ marker.setOptions({visible:true}); }else{ marker.setOptions({visible:false}); } } } } /* ロード時に初期化 */ google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <h3>visible</h3> <p>マーカーの表示・非表示を切り替えます。</p> <p>※console.logにログを出力。</p> <hr /> <form> マーカーの表示状態: <label for="visible_1"><input type="radio" name="visible" id="visible_1" value="0" onclick="review()" checked />表示</label> <label for="visible_2"><input type="radio" name="visible" id="visible_2" value="1" onclick="review()" />非表示</label> </form> <!-- 地図の埋め込み表示 --> <div id="map_canvas"></div> </body> </html>
マーカーをアニメーションさせる
Animationクラス、getAnimation / SetAnimationメソッド
2011/6/26
マーカーには、下記いずれかのアニメーション効果を付けることができます。 DROP(マーカーが地図に落ちてくる)、BOUNCE(地図上でマーカーが上下に跳ねる)の2種類のアニメーションがサポートされています。
マーカーにアニメーションを付けるには、MarkerOptionsオブジェクトのanimationプロパティに、アニメーションの種類を指定します。
google.maps.Animation.DROP マーカーが地図に落ちてくる google.maps.Animation.BOUNCE 地図上でマーカーが上下に跳ねる
既存のマーカーにアニメーションを設定するには、MarkerクラスのsetAnimationメソッドを使用し、引数にアニメーションの種類を指定します。 引数にnullを指定するとアニメーションを無効化できます。
マーカーのアニメーション状態を取得するには、MarkerクラスのgetAnimationメソッドを使用します。
設置サンプル
下記のサンプルでは読み込み時にマーカーにドロップアニメーションを付け、マーカークリックで、飛び跳ねるアニメーションの開始・停止を行います。



<!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" /> <!-- Google Maps APIの読み込み --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> var marker; /* 地図の初期化 */ function initialize() { /* 緯度・経度:日本, 表参道駅(東京)*/ var latlng=new google.maps.LatLng(35.665270, 139.712330); /* 地図のオプション設定 */ var myOptions = { /*初期のズーム レベル */ zoom: 18, /* 地図の中心点 */ center: latlng, /* 地図タイプ */ mapTypeId: google.maps.MapTypeId.ROADMAP }; /* 地図オブジェクト */ var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions); /* ★マーカーオブジェクト */ marker = new google.maps.Marker({ position: latlng, /* マーカーを立てる場所の緯度・経度 */ map: map, /*マーカーを配置する地図オブジェクト */ animation: google.maps.Animation.DROP, /* アニメーション(ドロップ) */ title: '表参道駅' }); /* マーカークリックでアニメション開始・停止 */ google.maps.event.addListener(marker, 'click', toggleBounce); } function toggleBounce() { if (marker.getAnimation() != null) { /* アニメーション無効化 */ marker.setAnimation(null); } else { /* アニメーション(飛び跳ねる) */ marker.setAnimation(google.maps.Animation.BOUNCE); } } /* ロード時に初期化 */ google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <h3>マーカー</h3> <p>表参道駅付近のスポット(こどもの城、表参道ヒルズ、スパイラルビルにドロップアニメーション付きでマーカーを立てます。マーカーをクリックすると飛び跳ねるアニメーションを行います。</p> <!-- 地図の埋め込み表示 --> <div id="map_canvas"></div> </body> </html>
下記のサンプルでsetTimeOutで時間をずらして、複数のマーカーをドロップアニメーションで表示します。 各マーカーをクリックすると、飛び跳ねるアニメーションを行います。



<!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" /> <!-- Google Maps APIの読み込み --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> var map; var markers=[]; /* 緯度・経度:日本, 表参道駅(東京)*/ var omotesando=new google.maps.LatLng(35.665270, 139.712330); var spots=[ /* こどもの城 */ new google.maps.LatLng(35.66231350,139.70742530), /* 表参道ヒルズ */ new google.maps.LatLng(35.66726010,139.70893330), /* スパイラルガーデン */ new google.maps.LatLng(35.66358290,139.71174990) ]; /* 地図の初期化 */ function initialize() { /* 地図のオプション設定 */ var myOptions = { /*初期のズーム レベル */ zoom: 15, /* 地図の中心点 */ center: omotesando, /* 地図タイプ */ mapTypeId: google.maps.MapTypeId.ROADMAP }; /* 地図オブジェクト */ map=new google.maps.Map(document.getElementById("map_canvas"), myOptions); /* マーカークリックでアニメション開始・停止 */ dropMarker(); } var timer; function dropMarker() { for(var i=0; i<spots.length; i++){ timer=setTimeout(addMarker,i*500); } } var iterator=0; function addMarker(){ markers.push( new google.maps.Marker({ position:spots[iterator], map:map, animation: google.maps.Animation.DROP /* アニメーション(ドロップ) */ }) ); google.maps.event.addListener(markers[iterator], 'click', function(){ toggleBounce(this); } ); iterator++; } function toggleBounce(marker) { if (marker.getAnimation() != null) { /* アニメーション無効化 */ marker.setAnimation(null); } else { /* アニメーション(飛び跳ねる) */ marker.setAnimation(google.maps.Animation.BOUNCE); } } /* ロード時に初期化 */ google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <h3>マーカー</h3> <p>表参道駅の場所にドロップアニメーション付きでマーカーを立てます。マーカーをクリックすると飛び跳ねるアニメーションを行います。</p> <!-- 地図の埋め込み表示 --> <div id="map_canvas"></div> </body> </html>
XMLファイルを読み込んでマーカーを表示
2011/6/26
外部ファイルを読み込んで、山手線の各駅にマーカーを立てるサンプルです。
下記のように、山手線の各駅の緯度・経度の入ったXMLデータを読み込んで、各駅の緯度・経度の場所にタイマーでちょっとタイミングをずらしてマーカーをずらずらっと表示します。
<markers> <marker lat="35.691034" lng="139.7002" /> <marker lat="35.683061" lng="139.70204" /> <marker lat="35.670284" lng="139.702685" /> <marker lat="35.658517" lng="139.701333" /> <marker lat="35.6468" lng="139.710109" /> <marker lat="35.634" lng="139.715828" /> <marker lat="35.626444" lng="139.72344" /> <marker lat="35.619698" lng="139.72855" /> <marker lat="35.630154" lng="139.74044" /> <marker lat="35.645736" lng="139.74757" /> <marker lat="35.655649" lng="139.75674" /> <marker lat="35.666599" lng="139.75812" /> <marker lat="35.675069" lng="139.76332" /> <marker lat="35.6811" lng="139.767079" /> <marker lat="35.691688" lng="139.77088" /> <marker lat="35.698684" lng="139.77421" /> <marker lat="35.70744" lng="139.774632" /> <marker lat="35.713765" lng="139.77725" /> <marker lat="35.720498" lng="139.77883" /> <marker lat="35.727771" lng="139.77098" /> <marker lat="35.732135" lng="139.76679" /> <marker lat="35.738109" lng="139.76071" /> <marker lat="35.736489" lng="139.74687" /> <marker lat="35.733493" lng="139.73934" /> <marker lat="35.731403" lng="139.72865" /> <marker lat="35.72893" lng="139.710377" /> <marker lat="35.721204" lng="139.70659" /> <marker lat="35.701307" lng="139.700046" /> <marker lat="35.712284" lng="139.70378" /> </markers>

<!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"> var map,timer var iterator=0; var latlngs=[]; var markers=[]; function showMarkers(){ $.ajax({ type:"get", cache:false, url:"include/ajax/gmapv3/markers.xml", success:function(xml){ var s=""; $(xml).find("marker").each(function(){ var _lat=parseFloat($(this).eq(0).attr("lat")); var _lng=parseFloat($(this).eq(0).attr("lng")); var _latlng= new google.maps.LatLng(_lat, _lng); /* マーカー追加 */ latlngs.push(_latlng); }); for(var i=0; i<latlngs.length; i++){ timer=setTimeout(addMarker, i*230); } }, error:function(XMLHttpRequest, textStatus, errorThrown){ //alert(textStatus); } }); } /* 地図にマーカー追加 */ function addMarker(){ markers.push( new google.maps.Marker({ position: latlngs[iterator], map:map, animation: google.maps.Animation.DROP }) ); if(iterator==latlngs.length-1){ clearTimeout(timer); for(var i=0; i<markers.length; i++){ markers[i].setAnimation(google.maps.Animation.BOUNCE); } } iterator++; } /* 地図の初期化 */ function initialize() { /* 地図のオプション設定 */ var myOptions = { /*初期のズーム レベル */ zoom: 12, /* 地図の中心点 */ center: new google.maps.LatLng(35.684002,139.737618), /* 地図タイプ */ mapTypeId: google.maps.MapTypeId.ROADMAP }; /* 地図オブジェクト */ map=new google.maps.Map(document.getElementById("map_canvas"), myOptions); showMarkers(); } /* ロード時に初期化 */ google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <h3>マーカー</h3> <p>山手線の各駅にマーカーを表示します。各駅の緯度・経度は外部XMLから取得しています。</p> <!-- 地図の埋め込み表示 --> <div id="map_canvas"></div> </body> </html>