Search

Google Maps JavaScript API v3地図イベント

Google Maps JavaScript API V3

イベントハンドラの登録

2011/6/26

地図上に任意のイベントを追加するには、addListener()イベントハンドラを使用します。

構文

google.maps.event.addListener(source, event, handler){処理})；

第1引数sourceには、イベント発生元オブジェクト（地図やマーカーオブジェクトなど）を指定します。 第2引数eventには、clickなどのイベントを指定します。 第3引数handlerには、イベントが発生した時に行う処理（関数）を指定します。

設置サンプル

マーカーをクリックすると、徐々に六本木ヒルズにズームインし、ズームイン後、再度マーカーをクリックすると徐々にズームアウトします。 地図の左上に、現在のズームレベルを表示します。

iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
        });
        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>

地図上のクリックした位置の緯度・経度を表示します。

iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
        });
        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()メソッドで取得できます。

構文

google.maps.event.addListener(
　イベント発生元オブジェクト,
　'zoom_changed',
　function(){　/* 処理 */
　　this.getZoom();　/* 変更後のズームレベルを取得 */
　}
);

設置サンプル

下記のサンプルでは、地図のズームレベルが変更された時に、現在のズームレベルを表示します。

iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
        });
        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, 'click', function(event){処理})；
google.maps.event.addListener(map, 'dblclick', function(event){処理});
google.maps.event.addListener(map, 'rightclick', function(event){処理});

イベント

イベント説明
click地図上でマウスがクリックされた時に発生。
イベントが発生した位置の緯度・経度（latLng）を引数として渡します。
dblclick地図上でマウスがWクリックされた時に発生。
イベントが発生した位置の緯度・経度（latLng）を引数として渡します。
rightclick地図上でマウスが右クリックされた時に発生。
イベントが発生した位置の緯度・経度（latLng）を引数として渡します。

設置サンプル

下記のサンプルでは、地図またはマーカーがクリック/Wクリックされた時に、現在のズームレベルを表示します。

iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
        });
        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, 'mouseover', function(event){処理})；
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）を引数として渡します。

設置サンプル

下記のサンプルでは、地図上でマウスイベントが発生した時に、発生イベントとイベントが発生した位置の緯度・経度を表示します。

iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
        });
        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()メソッドは、地図に情報ウィンドウを表示します。

設置サンプル

ボタンで、情報ウィンドウの開閉を行います。
また、情報ウィンドウの【×】ボタンが押された時にステータスを表示します。

iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="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, 'dragstart', function(){処理})；
google.maps.event.addListener(map, 'drag', function(){処理});
google.maps.event.addListener(map, 'dragend', function(){処理});

イベント

イベント説明
dragstart地図のドラッグが開始された時に発生。
イベントハンドラに渡される引数はありません。
drag地図がドラッグされている時に発生。
イベントハンドラに渡される引数はありません。
dragend地図のドラッグが終了した時に発生。
イベントハンドラに渡される引数はありません。

設置サンプル

下記のサンプルでは、地図上でドラッグイベントが発生した時に、発生したドラッグイベントのステータスを表示します。

iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
        });
        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, 'dragstart', function(){処理})；
google.maps.event.addListener(map, 'drag', function(){処理});
google.maps.event.addListener(map, 'dragend', function(){処理});

イベント

イベント説明
dragstart地図のドラッグが開始された時に発生。
イベントハンドラに渡される引数はありません。
drag地図がドラッグされている時に発生。
イベントハンドラに渡される引数はありません。
dragend地図のドラッグが終了した時に発生。
イベントハンドラに渡される引数はありません。

設置サンプル

下記のサンプルでは、地図上でドラッグイベントが発生した時に、発生したドラッグイベントのステータスを表示します。

iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
        });
        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()メソッドで取得できます。

構文

google.maps.event.addListener(map, 'maptypeid_changed', function(){処理});

イベント

イベント説明
maptypeid_changed地図タイプが変更された時に発生。
イベントハンドラに渡される引数はありません。

設置サンプル

下記のサンプルでは、地図上でドラッグイベントが発生した時に、発生したドラッグイベントのステータスを表示します。

iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
            $("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。

設置サンプル

下記のサンプルでは、地図またはマーカーがクリックされた時に、イベントが発生した位置の緯度・経度を表示します。

iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
        });
        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>

関連コンテンツ

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

投票する 投票結果を見る

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

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

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

Thanks: Material Design 420 free icons

©2023 PHP & JavaScript Room All Rights Reserved.

pagetop

polarized women