Google Maps JavaScript API v3地図イベント
イベントハンドラの登録
2011/6/26
地図上に任意のイベントを追加するには、addListener()イベントハンドラを使用します。
構文
第1引数sourceには、イベント発生元オブジェクト(地図やマーカーオブジェクトなど)を指定します。 第2引数eventには、clickなどのイベントを指定します。 第3引数handlerには、イベントが発生した時に行う処理(関数)を指定します。
設置サンプル
マーカーをクリックすると、徐々に六本木ヒルズにズームインし、ズームイン後、再度マーカーをクリックすると徐々にズームアウトします。 地図の左上に、現在のズームレベルを表示します。



<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" /> <!-- スマートフォン向けviewportの指定 --> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <!-- jQuery --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <!-- Google Maps APIの読み込み --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> /* ページ読み込み時に地図を初期化 */ $(function(){ initialize(); }); var map; /* 緯度・経度:六本木ヒルズ */ var myLatlng = new google.maps.LatLng(35.660207, 139.729078); /* 地図の初期化 */ function initialize() { var mapDiv = document.getElementById('map_canvas'); var myOptions = { zoom: 10, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(mapDiv, myOptions); google.maps.event.addListener(map, 'zoom_changed', function() { }); /* マーカー */ var marker = new google.maps.Marker({ position: myLatlng, map: map, title:"Hello World!" }); /* ズーム処理 */ var zoom=myOptions.zoom; $("#zoomlevel span").html(zoom); var zoom_min=myOptions.zoom; var zoom_max=18; var timer; google.maps.event.addListener(marker, 'click', function() { clearInterval(timer); if(zoom>=zoom_max){ timer=setInterval(zoomOut, 300); }else{ timer=setInterval(zoomIn, 300); } }); /* ズームアウト */ function zoomIn(){ if(zoom>=zoom_max){ clearInterval(timer); }else{ zoom++; map.setZoom(zoom); $("#zoomlevel span").html(zoom); } } /* ズームイン */ function zoomOut(){ if(zoom<=zoom_min){ clearInterval(timer); }else{ zoom--; map.setZoom(zoom); $("#zoomlevel span").html(zoom); } } } </script> </head> <body> <h3>地図イベント</h3> <p> マーカーをクリックすると、徐々に六本木ヒルズにズームインします。ズームイン後、再度マーカーをクリックすると徐々にズームアウトします。</p> <div id="zoomlevel">ズームレベル:<span></span></div> <!-- 地図の埋め込み表示 --> <div id="map_canvas"></div> </body> </html>
地図上のクリックした位置の緯度・経度を表示します。



<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" /> <!-- スマートフォン向けviewportの指定 --> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <!-- jQuery --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <!-- Google Maps APIの読み込み --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> /* ページ読み込み時に地図を初期化 */ $(function(){ initialize(); }); var map; /* 緯度・経度:六本木ヒルズ */ var myLatlng = new google.maps.LatLng(35.660207, 139.729078); /* 地図の初期化 */ function initialize() { var mapDiv = document.getElementById('map_canvas'); var myOptions = { zoom: 17, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(mapDiv, myOptions); /* 地図がクリックされた時 */ google.maps.event.addListener(map, 'click', function(event) { /* クリックした場所にマーカーを追加 */ var clickedLocation = new google.maps.LatLng(event.latLng); var marker = new google.maps.Marker({ position: event.latLng, map: map }); map.setCenter(event.latLng); /* マーカーを立てた位置を追加 */ $("#latlng span").prepend("<br>"+event.latLng.toString()); }); } </script> </head> <body> <h3>地図イベント</h3> <p>地図をクリックした位置の緯度・経度を表示し、その位置にマーカーを立てます。</p> <!-- 地図の埋め込み表示 --> <div id="map_canvas"></div> <div id="latlng">マーカーを立てた位置<span></span></div> <br clear="all" /> </body> </html>
地図のズームレベル(倍率)が変更された時
2011/6/26
地図のズームレベルの変更は、Mapクラスのzoom_changeイベントで取得できます。 変更後のズームレベルは、MapクラスのgetZoom()メソッドで取得できます。
構文
イベント発生元オブジェクト,
'zoom_changed',
function(){ /* 処理 */
this.getZoom(); /* 変更後のズームレベルを取得 */
}
);
設置サンプル
下記のサンプルでは、地図のズームレベルが変更された時に、現在のズームレベルを表示します。



<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" /> <!-- スマートフォン向けviewportの指定 --> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <!-- jQuery --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <!-- Google Maps APIの読み込み --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> /* ページ読み込み時に地図を初期化 */ $(function(){ initialize(); }); var map; /* 緯度・経度:六本木ヒルズ */ var myLatlng = new google.maps.LatLng(35.660207, 139.729078); /* 地図の初期化 */ function initialize() { var mapDiv = document.getElementById('map_canvas'); var myOptions = { zoom: 17, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map=new google.maps.Map(mapDiv, myOptions); /* 現在のズームレベルを表示 */ getZoomLevel(); /* 地図がクリックされた時 */ google.maps.event.addListener(map, 'zoom_changed', function() { /* 現在のズームレベルを表示 */ getZoomLevel(); }); } function getZoomLevel(){ $("#zoomlevel span").html(map.getZoom()); } </script> </head> <body> <h3>地図イベント</h3> <p>地図のズームレベルが変更された時に、現在のズームレベルを表示します。</p> <p id="zoomlevel">ズームレベル:<span></span></p> <!-- 地図の埋め込み表示 --> <div id="map_canvas"></div> </body> </html>
地図でクリックイベントが発生した時
2011/6/26
地図上のクリックイベントは、下記のMapクラスのイベントで取得できます。
地図またはマーカーがクリックされた時は、clickイベントが発生し、Wクリックされた時は、dblclickイベントが発生します。
構文
google.maps.event.addListener(map, 'dblclick', function(event){処理});
google.maps.event.addListener(map, 'rightclick', function(event){処理});
イベント
イベント | 説明 |
---|---|
click | 地図上でマウスがクリックされた時に発生。 イベントが発生した位置の緯度・経度(latLng)を引数として渡します。 |
dblclick | 地図上でマウスがWクリックされた時に発生。 イベントが発生した位置の緯度・経度(latLng)を引数として渡します。 |
rightclick | 地図上でマウスが右クリックされた時に発生。 イベントが発生した位置の緯度・経度(latLng)を引数として渡します。 |
設置サンプル
下記のサンプルでは、地図またはマーカーがクリック/Wクリックされた時に、現在のズームレベルを表示します。



<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" /> <!-- スマートフォン向けviewportの指定 --> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <!-- jQuery --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <!-- Google Maps APIの読み込み --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> /* ページ読み込み時に地図を初期化 */ $(function(){ initialize(); }); var map; /* 緯度・経度:六本木ヒルズ */ var myLatlng = new google.maps.LatLng(35.660207, 139.729078); /* 地図の初期化 */ function initialize() { var mapDiv = document.getElementById('map_canvas'); var myOptions = { /* ズームレベル */ zoom: 17, /* 中心地点 */ center: myLatlng, /* 地図タイプ */ mapTypeId: google.maps.MapTypeId.ROADMAP } /* 地図インスタンス生成 */ map=new google.maps.Map(mapDiv, myOptions); /* マーカー */ var marker = new google.maps.Marker({ position: myLatlng, map: map, title:"六本木ヒルズ" }); /* 地図がクリックされた時 */ google.maps.event.addListener(map, 'click', function(event) { $("#res").prepend("地図がクリックされました(緯度:"+event.latLng.lat()+"/経度:"+event.latLng.lng()+")\n"); }); /* 地図がWクリックされた時 */ google.maps.event.addListener(map, 'dblclick', function(event) { $("#res").prepend("地図がWクリックされました(緯度:"+event.latLng.lat()+"/経度:"+event.latLng.lng()+")\n"); }); /* 地図が右クリックされた時 */ google.maps.event.addListener(map, 'rightclick', function(event) { $("#res").prepend("地図が右クリックされました(緯度:"+event.latLng.lat()+"/経度:"+event.latLng.lng()+")\n"); }); /* マーカーがクリックされた時 */ google.maps.event.addListener(marker, 'click', function(event) { $("#res").prepend("マーカーがクリックされました(緯度:"+event.latLng.lat()+"/経度:"+event.latLng.lng()+")\n"); }); /* マーカーがWクリックされた時 */ google.maps.event.addListener(marker, 'dblclick', function(event) { $("#res").prepend("マーカーがWクリックされました(緯度:"+event.latLng.lat()+"/経度:"+event.latLng.lng()+")\n"); }); /* 地図が右クリックされた時 */ google.maps.event.addListener(marker, 'rightclick', function(event) { $("#res").prepend("マーカーが右クリックされました(緯度:"+event.latLng.lat()+"/経度:"+event.latLng.lng()+")\n"); }); } </script> </head> <body> <h3>地図イベント</h3> <p>地図またはマーカーがクリック/Wクリック/右クリックされた時に、発生したイベントのステータスと現在のズームレベルを表示します。</p> <textarea id="res" cols="10" rows="5"></textarea> <!-- 地図の埋め込み表示 --> <div id="map_canvas"></div> </body> </html>
地図上でマウスイベントが発生した時
2011/6/26
地図上のマウスイベントは、下記のMapクラスのイベントで取得できます。
構文
google.maps.event.addListener(map, 'mouseout', function(event){処理});
google.maps.event.addListener(map, 'mousemove', function(event){処理});
google.maps.event.addListener(map, 'mousedown', function(event){処理});
google.maps.event.addListener(map, 'mouseup', function(event){処理});
イベント
イベント | 説明 |
---|---|
mouseover | 地図上にマウスが乗った時に発生。 イベントが発生した位置の緯度・経度(latLng)を引数として渡します。 |
mouseout | 地図上からマウスが外れた時に発生。 イベントが発生した位置の緯度・経度(latLng)を引数として渡します。 |
mousemove | 地図上でマウスが移動された時に発生。 イベントが発生した位置の緯度・経度(latLng)を引数として渡します。 |
mousedown | 地図上にあったマウスポインタがあり、マウスが押された時に発生。 イベントが発生した位置の緯度・経度(latLng)を引数として渡します。 |
mouseup | 地図上にあったマウスポインタがあり、マウスが離された時に発生。 イベントが発生した位置の緯度・経度(latLng)を引数として渡します。 |
設置サンプル
下記のサンプルでは、地図上でマウスイベントが発生した時に、発生イベントとイベントが発生した位置の緯度・経度を表示します。



<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" /> <!-- スマートフォン向けviewportの指定 --> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <!-- jQuery --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <!-- Google Maps APIの読み込み --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> /* ページ読み込み時に地図を初期化 */ $(function(){ initialize(); }); var map; /* 緯度・経度:六本木ヒルズ */ var myLatlng = new google.maps.LatLng(35.660207, 139.729078); /* 地図の初期化 */ function initialize() { var mapDiv = document.getElementById('map_canvas'); var myOptions = { /* ズームレベル */ zoom: 17, /* 中心地点 */ center: myLatlng, /* 地図タイプ */ mapTypeId: google.maps.MapTypeId.ROADMAP } /* 地図インスタンス生成 */ map=new google.maps.Map(mapDiv, myOptions); /* マーカー */ var marker = new google.maps.Marker({ position: myLatlng, map: map, title:"六本木ヒルズ" }); /* 地図上にマウスが乗った時 */ google.maps.event.addListener(map, 'mouseover', function(event) { $("#res").prepend("地図上にマウスが乗りました(緯度:"+event.latLng.lat()+"/経度:"+event.latLng.lng()+")\n"); }); /* 地図上からマウスが外れた時 */ google.maps.event.addListener(map, 'mouseout', function(event) { $("#res").prepend("地図上からマウスが外れました(緯度:"+event.latLng.lat()+"/経度:"+event.latLng.lng()+")\n"); }); /* 地図上でマウスが移動された時 */ google.maps.event.addListener(map, 'mousemove', function(event) { $("#res").prepend("地図上でマウスが移動されました(緯度:"+event.latLng.lat()+"/経度:"+event.latLng.lng()+")\n"); }); /* 地図上にマウスポインタがあり、マウスが離された時 */ google.maps.event.addListener(map, 'mouseup', function(event) { $("#res").prepend("地図上にあったマウスポインタが離れました(緯度:"+event.latLng.lat()+"/経度:"+event.latLng.lng()+")\n"); }); /* 地図上にマウスポインタがあり、マウスが押された時 */ google.maps.event.addListener(map, 'mousedown', function(event) { $("#res").prepend("地図上にあったマウスポインタが押されました(緯度:"+event.latLng.lat()+"/経度:"+event.latLng.lng()+")\n"); }); } </script> </head> <body> <h3>地図イベント</h3> <p>地図上でマウスイベントが発生した時に、発生イベントとイベントが発生した位置の緯度・経度を表示します。</p> <textarea id="res" cols="10" rows="5"></textarea> <!-- 地図の埋め込み表示 --> <div id="map_canvas"></div> </body> </html>
情報ウィンドウの【×】ボタンが押された時
2011/6/26
InfoWindowクラスのcloseclickイベントは、情報ウィンドウの【×】ボタンを押した時に発生します。
InfoWindowクラスのclose()メソッドは、地図から情報ウィンドウを閉じます。
InfoWindowクラスのopen()メソッドは、地図に情報ウィンドウを表示します。
設置サンプル
ボタンで、情報ウィンドウの開閉を行います。
また、情報ウィンドウの【×】ボタンが押された時にステータスを表示します。



<!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="width=device-width, initial-scale=1.0, user-scalable=no" /> <!-- jQuery --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <!-- Google Maps APIの読み込み --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> /* ページ読み込み時に地図を初期化 */ $(function(){ initialize(); }); var map, infowindow; /* 緯度・経度:渋谷マークッシティ */ var myLatlng = new google.maps.LatLng(35.657505, 139.696632); /* 地図の初期化 */ function initialize() { var mapDiv = document.getElementById('map_canvas'); var myOptions = { /* ズームレベル */ zoom: 17, /* 中心地点 */ center: myLatlng, /* 地図タイプ */ mapTypeId: google.maps.MapTypeId.ROADMAP } /* 地図インスタンス生成 */ map=new google.maps.Map(mapDiv, myOptions); /* 情報ウィンドウ表示 */ infowindow= new google.maps.InfoWindow({ size: new google.maps.Size(50,50), position: myLatlng, content:"<p>東京渋谷区にある<a href='http://www.s-markcity.co.jp/'>「マークシティー」</a>です。</p><p><img src='/content/img/ajax/star.png' align='left' alt='' />渋谷駅直結なので雨の日でも便利です。<br>ショッピングやランチどころ満載です。</p>" }); infowindow.open(map); /* 情報ウィンドウの【×】ボタンが押された時 */ google.maps.event.addListener(infowindow, 'closeclick', function() { $("#res").prepend("情報ウィンドウの【×】ボタンが押されました\n"); document.getElementById("btn_open").disabled=false; document.getElementById("btn_close").disabled=true; }); } function fOpenInfoWindowHtml(){ /* 情報ウィンドウ表示 */ infowindow.open(map); document.getElementById("btn_open").disabled=true; document.getElementById("btn_close").disabled=false; } function fCloseInfoWindow(){ infowindow.close(map); document.getElementById("btn_open").disabled=false; document.getElementById("btn_close").disabled=true; } </script> </head> <body> <h3>地図イベント</h3> <p>下記の2つのボタンで、情報ウィンドウの開閉が可能です。<br>情報ウィンドウの【×】ボタンが押された時にステータスを表示します。</p> <p> <input type="button" value="情報ウィンドウ表示" onclick="fOpenInfoWindowHtml();" id="btn_open" disabled="disabled" /> <input type="button" value="情報ウィンドウを閉じる" onclick="fCloseInfoWindow();" id="btn_close" /> </p> <textarea id="res" cols="10" rows="5"></textarea> <!-- 地図の埋め込み表示 --> <div id="map_canvas"></div> </body> </html>
地図上でドラッグイベントが発生した時
2011/6/26
地図上のドラッグイベントは、下記のMapクラスのイベントで取得できます。
構文
google.maps.event.addListener(map, 'drag', function(){処理});
google.maps.event.addListener(map, 'dragend', function(){処理});
イベント
イベント | 説明 |
---|---|
dragstart | 地図のドラッグが開始された時に発生。 イベントハンドラに渡される引数はありません。 |
drag | 地図がドラッグされている時に発生。 イベントハンドラに渡される引数はありません。 |
dragend | 地図のドラッグが終了した時に発生。 イベントハンドラに渡される引数はありません。 |
設置サンプル
下記のサンプルでは、地図上でドラッグイベントが発生した時に、発生したドラッグイベントのステータスを表示します。



<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" /> <!-- スマートフォン向けviewportの指定 --> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <!-- jQuery --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <!-- Google Maps APIの読み込み --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> /* ページ読み込み時に地図を初期化 */ $(function(){ initialize(); }); var map; /* 緯度・経度:六本木ヒルズ */ var myLatlng = new google.maps.LatLng(35.660207, 139.729078); /* 地図の初期化 */ function initialize() { var mapDiv = document.getElementById('map_canvas'); var myOptions = { /* ズームレベル */ zoom: 17, /* 中心地点 */ center: myLatlng, /* 地図タイプ */ mapTypeId: google.maps.MapTypeId.ROADMAP } /* 地図インスタンス生成 */ map=new google.maps.Map(mapDiv, myOptions); /* マーカー */ var marker = new google.maps.Marker({ position: myLatlng, map: map, title:"六本木ヒルズ" }); /* 地図上にマウスが乗った時 */ google.maps.event.addListener(map, 'dragstart', function() { $("#res").prepend("地図のドラッグが開始されました\n"); }); /* 地図上からマウスが外れた時 */ google.maps.event.addListener(map, 'drag', function() { $("#res").prepend("地図がドラッグされています\n"); }); /* 地図上でマウスが移動された時 */ google.maps.event.addListener(map, 'dragend', function() { $("#res").prepend("地図のドラッグが終了しました\n"); }); } </script> </head> <body> <h3>地図イベント</h3> <p>地図上でドラッグイベントが発生した時に、発生したドラッグイベントのステータスを表示します。</p> <textarea id="res" cols="10" rows="5"></textarea> <!-- 地図の埋め込み表示 --> <div id="map_canvas"></div> </body> </html>
地図のドラッグイベントが発生した時
2011/6/26
地図上のドラッグイベントは、下記のMapクラスのイベントで取得できます。
構文
google.maps.event.addListener(map, 'drag', function(){処理});
google.maps.event.addListener(map, 'dragend', function(){処理});
イベント
イベント | 説明 |
---|---|
dragstart | 地図のドラッグが開始された時に発生。 イベントハンドラに渡される引数はありません。 |
drag | 地図がドラッグされている時に発生。 イベントハンドラに渡される引数はありません。 |
dragend | 地図のドラッグが終了した時に発生。 イベントハンドラに渡される引数はありません。 |
設置サンプル
下記のサンプルでは、地図上でドラッグイベントが発生した時に、発生したドラッグイベントのステータスを表示します。



<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" /> <!-- スマートフォン向けviewportの指定 --> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <!-- jQuery --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <!-- Google Maps APIの読み込み --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> /* ページ読み込み時に地図を初期化 */ $(function(){ initialize(); }); var map; /* 緯度・経度:六本木ヒルズ */ var myLatlng = new google.maps.LatLng(35.660207, 139.729078); /* 地図の初期化 */ function initialize() { var mapDiv = document.getElementById('map_canvas'); var myOptions = { /* ズームレベル */ zoom: 17, /* 中心地点 */ center: myLatlng, /* 地図タイプ */ mapTypeId: google.maps.MapTypeId.ROADMAP } /* 地図インスタンス生成 */ map=new google.maps.Map(mapDiv, myOptions); /* マーカー */ var marker = new google.maps.Marker({ position: myLatlng, map: map, title:"六本木ヒルズ" }); /* 地図上にマウスが乗った時 */ google.maps.event.addListener(map, 'dragstart', function() { $("#res").prepend("地図のドラッグが開始されました\n"); }); /* 地図上からマウスが外れた時 */ google.maps.event.addListener(map, 'drag', function() { $("#res").prepend("地図がドラッグされています\n"); }); /* 地図上でマウスが移動された時 */ google.maps.event.addListener(map, 'dragend', function() { $("#res").prepend("地図のドラッグが終了しました\n"); }); } </script> </head> <body> <h3>地図イベント</h3> <p>地図上でドラッグイベントが発生した時に、発生したドラッグイベントのステータスを表示します。</p> <textarea id="res" cols="10" rows="5"></textarea> <!-- 地図の埋め込み表示 --> <div id="map_canvas"></div> </body> </html>
地図タイプが変更された時
2011/6/26
地図タイプの変更は、下記のMapクラスのイベントで取得できます。
現在の地図タイプは、MapクラスのgetMapTypeId()メソッドで取得できます。
構文
イベント
イベント | 説明 |
---|---|
maptypeid_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" /> <!-- 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(); $("input").bind("click",function(){ var id=$(this).attr("id").replace("btn_",""); switch(id){ case "ROADMAP": map.setMapTypeId(google.maps.MapTypeId.ROADMAP); break; case "SATELLITE": map.setMapTypeId(google.maps.MapTypeId.SATELLITE); break; case "HYBRID": map.setMapTypeId(google.maps.MapTypeId.HYBRID); break; case "TERRAIN": map.setMapTypeId(google.maps.MapTypeId.TERRAIN); break; default: break; } }); }); var map; /* 緯度・経度:六本木ヒルズ */ var myLatlng = new google.maps.LatLng(35.660207, 139.729078); /* 地図の初期化 */ function initialize() { var mapDiv = document.getElementById('map_canvas'); var myOptions = { /* ズームレベル */ zoom: 17, /* 中心地点 */ center: myLatlng, /* 地図タイプ */ mapTypeId: google.maps.MapTypeId.ROADMAP } /* 地図インスタンス生成 */ map=new google.maps.Map(mapDiv, myOptions); /* マーカー */ var marker = new google.maps.Marker({ position: myLatlng, map: map, title:"六本木ヒルズ" }); /* 地図タイプが変更された時 */ google.maps.event.addListener(map, 'maptypeid_changed', function() { $("#res").prepend("地図タイプが「"+map.getMapTypeId()+"」に変更されました\n"); }); } </script> </head> <body> <h3>地図イベント</h3> <p>地図タイプが変更された時に、発生したイベントのステータスを表示します。下記のボタンあるいは地図の右上にある地図タイプコントロールをクリックすると。地図タイプを変更できます。</p> <p> <input type="button" id="btn_ROADMAP" value="地図" /> <input type="button" id="btn_SATELLITE" value="航空写真" /> <input type="button" id="btn_HYBRID" value="地図+写真" /> <input type="button" id="btn_TERRAIN" value="物理的なマップタイル" /> </p> <textarea id="res" cols="10" rows="5"></textarea> <!-- 地図の埋め込み表示 --> <div id="map_canvas"></div> </body> </html>
地図の緯度と経度を取得
2011/6/26
地図やマーカーなどの、緯度・経度を個別に取得したり、文字列で取得するには、LatLngクラスの下記のメソッドを使用します。
メソッド
メソッド | 説明 |
---|---|
lat() | 緯度を度数で返す。 |
lng() | 緯度を度数で返す。 |
toString() | 緯度・経度を文字列で返す。 |
toUrlValue(number) | 緯度・経度の小数点以下の位を指定。デフォルトは6。 |
設置サンプル
下記のサンプルでは、地図またはマーカーがクリックされた時に、イベントが発生した位置の緯度・経度を表示します。



<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" /> <!-- スマートフォン向けviewportの指定 --> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <!-- jQuery --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <!-- Google Maps APIの読み込み --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> /* ページ読み込み時に地図を初期化 */ $(function(){ initialize(); }); var map; /* 緯度・経度:六本木ヒルズ */ var myLatlng = new google.maps.LatLng(35.660207, 139.729078); /* 地図の初期化 */ function initialize() { var mapDiv = document.getElementById('map_canvas'); var myOptions = { /* ズームレベル */ zoom: 17, /* 中心地点 */ center: myLatlng, /* 地図タイプ */ mapTypeId: google.maps.MapTypeId.ROADMAP } /* 地図インスタンス生成 */ map=new google.maps.Map(mapDiv, myOptions); /* マーカー */ var marker = new google.maps.Marker({ position: myLatlng, map: map, title:"六本木ヒルズ" }); /* 地図がクリックされた時 */ google.maps.event.addListener(map, 'click', function(event) { $("#res").val("地図がクリックされました\n\n緯度:"+event.latLng.lat()+"/経度:"+event.latLng.lng()+"\n文字列:"+event.latLng.toString()+"\n小数点以下3位に丸める:"+event.latLng.toUrlValue(3)+"\n"); }); /* マーカーがクリックされた時 */ google.maps.event.addListener(marker, 'click', function(event) { $("#res").val("マーカーがクリックされました\n\n緯度:"+event.latLng.lat()+"/経度:"+event.latLng.lng()+"\n文字列:"+event.latLng.toString()+"\n小数点以下3位に丸める:"+event.latLng.toUrlValue(3)+"\n"); }); } </script> </head> <body> <h3>LatLngクラス</h3> <p>地図またはマーカーがクリックされた時に、イベントが発生した位置情報を表示します。</p> <textarea id="res" cols="10" rows="5"></textarea> <!-- 地図の埋め込み表示 --> <div id="map_canvas"></div> </body> </html>