マーカー、アイコン｜Google Maps JavaScript API v3｜Ajax｜PHP & JavaScript Room

Google Maps JavaScript API v3マーカー、アイコン


Google Maps JavaScript API V3

google.maps.Markerクラス

地図にマーカーを立てる
Markerクラス

2012/5/5

var marker = new google.maps.Marker(opts?:MarkerOptions);

マーカーは地図上の場所を示すオーバーレイです。 マーカーを作成するには、Markerクラスを使用します。 マーカーの設定は、MarkerOptionsオブジェクトのプロパティで設定します。

下記のサンプルでは、表参道駅（35.665270, 139.712330）にマーカーを立てます。

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

マーカーで発生するイベント。

Markerクラスのイベント
イベント説明
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プロパティが変更された時に発生。 　

マーカーのオプション設定
MarkerOptionsオブジェクト

2012/5/5

マーカーには、下記のオプションを指定可能です。
positionプロパティのみ必須で、あとは任意です。

MarkerOptionsオブジェクト
プロパティ説明
animation 地図にマーカーが追加された時にどちら（BOUNCE or DROP）のアニメーションを再生するかを真偽値で指定。
clickable マーカーがマウスイベントとタッチイベントを受け取るかどうかを真偽値で指定。
受け取らない場合は「false」を指定。
cursor マウスオーバー時に表示するマウスカーソルを指定。
draggable マーカーをドラッグできるようにするかを真偽値で指定。
ドラッグできるようにするには「true」を指定。
flat マーカーの影を表示するかどうかを真偽値で指定。
影を表示しない場合は「true」を指定。
icon 自作アイコン画像を指定。
shadow 自作アイコンの影画像を指定。
map マーカーを配置する地図オブジェクトを指定。
optimized 単一の静的要素として複数のマーカーをレンダリングするかどうかを真偽値で指定。
デフォルトは「true」（最適化を行う）。
アニメーションGIFやPNGのレンダリング、各マーカーが個々のDOM要素としてレンダリングされる際の最適化を無効にする場合は「false」を指定。
position マーカーを立てる場所の緯度・経度をLatLng値で指定。
※必須
raiseOnDrag マーカーをドラッグで飛び跳ねるようにするかを真偽値で指定。
デフォルトは「true」。
shape ドラッグおよびクリックできる領域をイメージマップで指定。
title マーカーにマウスオーバーした時に表示するツールチップのテキストを指定。
HTMLタグは指定不可。
visible マーカーの表示・非表示を真偽値で指定。
マーカーを非表示にする場合は「false」を指定。
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）に独自のアイコンをマーカーとして立てます。

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

マーカーの影画像を生成してくれる便利なオンラインツールがあります！ 作成した影画像はダウンロードでき、右側の地図上をクリックすると、影付きのアイコンを地図に追加して確認できます。

設置サンプル

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

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" />
    <!-- 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枚の違いは旗に日の丸があるかないかだけで、サイズも形も同じなので影画像は共有です。

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" />
    <!-- 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イベントが発生します。

上記のサンプルでは画像の切り替えのみでしたが、下記のサンプルでは、アイコンをクリックすると、アイコンと影画像をセットで切り替え表示します。

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" />
    <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メソッドを使用します。

設置サンプル

下記のサンプルでは読み込み時にマーカーにドロップアニメーションを付け、マーカークリックで、飛び跳ねるアニメーションの開始・停止を行います。

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" />
    <!-- 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で時間をずらして、複数のマーカーをドロップアニメーションで表示します。 各マーカーをクリックすると、飛び跳ねるアニメーションを行います。

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" />
    <!-- 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.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>

関連コンテンツ

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

投票する 投票結果を見る

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

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

©2026 PHP & JavaScript Room All Rights Reserved.