Google Maps APIの使い方 － マーカー、自作アイコン｜Google Maps JavaScript API v2｜Ajax｜PHP & JavaScript Room

Google Maps JavaScript API v2Google Maps APIの使い方 － マーカー、自作アイコン


Google Maps JavaScript APIバージョン2は廃止され、バージョン3に移行しました。
» Google Maps JavaScript API v3の解説はこちら!

マーカー上に情報ウィンドウ表示／マーカー上の情報ウィンドウを閉じる

2008/5/5

GMarker.openInfoWindow(content[, opts])
GMarker.openInfoWindowHtml(content[, opts])
GMarker.openInfoWindowTabs(tabs[, opts])
GMarker.openInfoWindowTabsHtml(tabs[, opts])
GMarker.closeInfoWindow()
サンプルを見る
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map,marker;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        /* ピクセル座標 */
        var latlng=new GLatLng(36.204824,138.252924);
        /* 中心地点 */
        map.setCenter(latlng, 2);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* コントロール大 */
        map.addControl(new GMapTypeControl()); /* 地図タイプコントロール */
        /* マーカー追加 */
        marker=new GMarker(latlng);
        map.addOverlay(marker);
    }
}
function fOpenInfoWindow(){
    var opts={
        maxWidth:200
    };
    var obj=document.createTextNode("ここが「日本」です。");
    marker.openInfoWindow(obj,opts);
}
function fOpenInfoWindowHtml(){
    var opts={
        maxWidth:200
    };
    marker.openInfoWindow("ここが<strong style='color:red; padding:0px 5px; border:1px solid #ccc;'>●</strong>（日本）です。",opts);
}
function fOpenInfoWindowTabs(){
    var tObj1=document.createTextNode("ここが「日本」です。国土面積は「377,835km2」です。");
    var tObj2=document.createTextNode("日本の首都は「東京」です。東京土産は「銘菓ひよ子」が有名。");
    var tObj3=document.createTextNode("日本の人口は「約1億2780万人」です。その内訳は、男性≒6230万人／女性≒6546万人。女性の人口の方が多いです。");
    var tabs = [
        new GInfoWindowTab("場所", tObj1),
        new GInfoWindowTab("首都", tObj2),
        new GInfoWindowTab("人口", tObj3)
    ];
    var opts={
        maxWidth:300,
        selectedTab:1
    };
   /* タブ付き情報ウィンドウ表示（内容はDOMノード） */
    marker.openInfoWindowTabs(tabs,opts);
}
function fOpenInfoWindowTabsHtml(){
    var opts={
        maxWidth:300,
        selectedTab:1
    };
    var tabs = [
        new GInfoWindowTab("場所", "ここが<strong style='color:red; padding:0px 5px; border:1px solid #ccc;'>●</strong>（日本）です"),
        new GInfoWindowTab("首都", "日本の首都は<strong>「東京」</strong>です。<br>東京土産と言えば...<img src='/content/img/ajax/googlemap/chick.gif' alt='ひよこ' style='vertical-align:middle;' /><a href='http://www.hiyoko.co.jp/shohin/hiyoko.html'>銘菓ひよ子</a>が有名です&hearts;"),
        new GInfoWindowTab("人口", "日本の人口は約1億2780万人です。<br>その内訳は、ｓ男性≒6230万人／女性≒6546万人。女性の人口の多いです。")
    ];
    /* タブ付き情報ウィンドウ表示（内容はDOMノード） */
    marker.openInfoWindowTabsHtml(tabs,opts);
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
<form action="#">
<p>
     <input type="button" value="情報ウィンドウ表示（openInfoWindow）" onclick="fOpenInfoWindow();" /><br>
     <input type="button" value="情報ウィンドウ表示（openInfoWindowHtml）" onclick="fOpenInfoWindowHtml();" />
</p>
<p>
     <input type="button" value="タブ付き情報ウィンドウ表示（openInfoWindowTabs）" onclick="fOpenInfoWindowTabs();" /><br>
     <input type="button" value="タブ付き情報ウィンドウ表示（openInfoWindowTabsHtml）" onclick="fOpenInfoWindowTabsHtml();" />
</p>
<p>
    <input type="button" value="情報ウィンドウを閉じる" onclick="marker.closeInfoWindow()" />
</p>
</form>

マーカーに情報ウィンドウをバインド

2008/5/5

GMarker.bindInfoWindow(content[, opts])
GMarker.bindInfoWindowHtml(content[, opts])
GMarker.bindInfoWindowTabs(tabs[, opts])
GMarker.bindInfoWindowTabsHtml(tabs[, opts])
サンプルを見る
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map,marker;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        /* ピクセル座標 */
        var latlng_1=new GLatLng(35.658517,139.701333); /* 渋谷駅 */
        var latlng_2=new GLatLng(35.658421,139.699069); /* マークシティー */
        var latlng_3=new GLatLng(35.661655,139.700496); /* マルイシティ */
        var latlng_4=new GLatLng(35.659528,139.698715); /* 109 */

        /* 中心地点 */
        map.setCenter(latlng_1, 15);

        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* コントロール大 */
        map.addControl(new GMapTypeControl()); /* 地図タイプコントロール */

        /* マーカー追加 */
        marker_1=new GMarker(latlng_1);
        map.addOverlay(marker_1);
        fBindInfoWindow(marker_1);

        marker_3=new GMarker(latlng_2);
        map.addOverlay(marker_3);
        fBindInfoWindowHtml(marker_3);

        marker_3=new GMarker(latlng_3);
        map.addOverlay(marker_3);
        fBindInfoWindowTabs(marker_3);

        marker_4=new GMarker(latlng_4);
        map.addOverlay(marker_4);
        fBindInfoWindowTabsHtml(marker_4);

    }
}
function fBindInfoWindow(_marker){
    var opts={ maxWidth:200 };
    var obj=document.createTextNode("ここが「渋谷駅」です。昼夜とわず、いつも人であふれかえっていますｗ");
    _marker.bindInfoWindow(obj,opts);
}
function fBindInfoWindowHtml(_marker){
    var opts={ maxWidth:200 };
    _marker.bindInfoWindowHtml("ここが<p>渋谷駅に直結している<a href='http://www.s-markcity.co.jp/'>「マークシティー」</a>です。クリニック、レストラン、カフェ、ショップなどいろいろ揃っています。</p>",opts);
}
function fBindInfoWindowTabs(_marker){
    var tObj1=document.createTextNode("ここが「マルイシティ」です。渋谷駅から徒歩10分くらい。通りをはさんだ向かいには、「マルイジャム」もあります。");
    var tObj2=document.createTextNode("営業時間は、平日（11:30～21:00）／日・祝（11:30～20:30）です。定休日は第3水曜日ですが、変わることもあるので行く前に公式サイトで確認したほうが安全です。");
    var tabs = [
        new GInfoWindowTab("場所", tObj1),
        new GInfoWindowTab("営業時間", tObj2)
    ];
    var opts={
        maxWidth:300,
        selectedTab:1
    };
   /* ★タブ付き情報ウィンドウ表示（内容はDOMノード） */
    _marker.bindInfoWindowTabs(tabs,opts);
}
function fBindInfoWindowTabsHtml(_marker){
    var opts={
        maxWidth:300,
        selectedTab:0
    };
    var tabs = [
        new GInfoWindowTab("場所", "<img src='/content/img/ajax/googlemap/109.jpg' alt='109' align='right' />ここが<a href='http://www.shibuya109.jp/'>「SHIBUYA 109」</a>です。ギャル服だらけのイメージがありますが、最近はお姉さま系のショップも増えてきました。あと地下2階にはソニプラが&hearts;"),
        new GInfoWindowTab("営業時間", "営業時間は、10:00～21:00。定休日は、<span style='color:red;'>元旦のみ</span>です。")
    ];
    /* ★タブ付き情報ウィンドウ表示（内容はDOMノード） */
    _marker.bindInfoWindowTabsHtml(tabs,opts);
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div>

マーカーに自作アイコンを使用する

2008/5/5

new GMarker(point[, icon[, inert]])
サンプルを見る
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        var map=new GMap2(document.getElementById("map"));
        /* ピクセル座標 */
        var point=new GLatLng(36.173357,138.251953); /* 日本 */
        /* 中心地点 */
        map.setCenter(point, 2);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* コントロール大 */
        map.addControl(new GMapTypeControl()); /* 地図タイプコントロール */
        /* アイコン */
        var icon=new GIcon();
        icon.image="/content/img/ajax/googlemap/markerJP.png"; /* マーカー画像 */
        icon.shadow="/content/img/ajax/googlemap/shadow.png"; /* マーカーの影画像 */
        icon.iconSize=new GSize(48, 48);
        icon.shadowSize=new GSize(60, 48);
        icon.iconAnchor = new GPoint(24, 48);
        /* マーカー追加 */
        var marker=new GMarker(point, icon, true); /* マーカーのクリック操作を無効化 */
        map.addOverlay(marker);
        
        /* マーカーをクリックした時 */
        GEvent.addListener(marker, "click", function(){
            alert("マーカーがクリックされました");
        });
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div>

マーカーのドラッグ操作を有効化･無効化／初期化判定／ドラッグ操作の状態を取得

2008/5/5

GMarker.enableDragging()
GMarker.disableDragging()
GMarker.draggable()
GMarker.draggingEnabled()
サンプルを見る
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map, marker;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        map.disableDragging(); /* 地図のドラッグ操作を無効化 */
        /* 中心地点 */
        map.setCenter(new GLatLng(35.665246,139.712319), 14);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl());
        map.addControl(new GScaleControl());
        /* マーカー追加 */
        var opts={draggable:true}; /* ドラッグ操作を有効化 */
        marker=new GMarker(new GLatLng(35.665246,139.712319), opts);
        map.addOverlay(marker);
        chk();
    }
}
function chk(){
    var s="";
    /* GMarkerOptionsクラスのdraggableプロパティにtrueが指定されているか？ */
    s+="【GMarkerOptionsクラスのdraggableプロパティにtrueが指定されているか？】\n"+marker.draggable()+"\n";
    /* */
    s+="【ユーザーが地図上でドラッグ操作可能か】\n"+marker.draggingEnabled()+"\n";
    document.getElementById("res").value=s;
}
function swDrag(){
    var obj=document.getElementById("swbtn");
    if(marker.draggingEnabled()==false){
        marker.enableDragging();
        obj.value="マーカーのドラッグ操作を無効にする";
    }else{
        marker.disableDragging();
        obj.value="マーカーのドラッグ操作を有効にする";
    }
    chk();
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>

<div id="map" style="width:425px;height:300px;"><!-- 地図描画領域 --></div><br>
<form action="#">
    <p>
        <input type="button" value="マーカーのドラッグ操作を無効にする" id="swbtn" onclick="swDrag();" />
    </p>
    <p>
        <textarea cols="64" rows="4" id="res" style="width:421px;"></textarea>
    </p>
</form>

マーカーのオプション設定

2008/5/5

GMarkerOptionsクラス（GMarkerコンストラクタの引数opts）
GMarkerOptions
引数値説明
iconGIconアイコンの設定
dragCrossMovetrue
false		マーカーのドラッグ時にマーカーが浮き上がってカーソルから離れるようにするならTRUE
title文字列マーカーのタイトル
clickabletrue
false		マーカーのクリックを有効化するなTRUE
draggabletrue
false		マーカーのドラッグ操作を有効化するならTRUE
bouncy
bounceGravity		true
false		ドラッグ終了後のバウンドを有効化するならTRUE
autoPantrue
false		自動移動の有無

icon

サンプルを見る
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        var map=new GMap2(document.getElementById("map"));
        map.disableDragging(); /* 地図のドラッグ操作を無効化 */
        /* ピクセル座標 */
        var point=new GLatLng(36.173357,138.251953); /* 日本 */
        /* 中心地点 */
        map.setCenter(point, 2);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* コントロール大 */
        map.addControl(new GMapTypeControl()); /* 地図タイプコントロール */
        /* アイコン */
        var icon=new GIcon();
        icon.image="/content/img/ajax/googlemap/markerJP.png"; /* マーカー画像 */
        icon.shadow="/content/img/ajax/googlemap/shadow.png"; /* マーカーの影画像 */
        icon.iconSize=new GSize(48, 48);
        icon.shadowSize=new GSize(60, 48);
        icon.iconAnchor = new GPoint(24, 48);

        /* マーカー追加 */
        var opts={
            icon:icon /* アイコン指定 */
        };
        var marker=new GMarker(point, opts);
        map.addOverlay(marker);
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div>

dragCrossMove

サンプルを見る
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        var map=new GMap2(document.getElementById("map"));
        map.disableDragging(); /* 地図のドラッグ操作を無効化 */
        /* ピクセル座標 */
        var point=new GLatLng(36.173357,138.251953); /* 日本 */
        /* 中心地点 */
        map.setCenter(point, 2);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* コントロール大 */
        map.addControl(new GMapTypeControl()); /* 地図タイプコントロール */
        /* マーカー追加 */
        var opts={
            draggable:true, /* マーカーのドラッグ操作を有効化 */
            dragCrossMove:true /* マーカーのドラッグ時に、マーカーが浮き上がってカーソルから離れる */
        };
        var marker=new GMarker(point, opts);
        map.addOverlay(marker);
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div>

title

サンプルを見る
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        var map=new GMap2(document.getElementById("map"));
        map.disableDragging(); /* 地図のドラッグ操作を無効化 */
        /* ピクセル座標 */

        var latlng1=new GLatLng(20.599365,-157.527466); /* ハワイ */
        var latlng2=new GLatLng(36.173357,138.251953); /* 日本 */
        var center=new GLatLng(30.448674,166.640625);

        /* 中心地点 */
        map.setCenter(center, 2);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* コントロール大 */
        map.addControl(new GMapTypeControl()); /* 地図タイプコントロール */

        /* アイコン */
        var icon=new GIcon();
        icon.image="/content/img/ajax/googlemap/markerJP.png"; /* マーカー画像 */
        icon.shadow="/content/img/ajax/googlemap/shadow.png"; /* マーカーの影画像 */
        icon.iconSize=new GSize(48, 48);
        icon.shadowSize=new GSize(60, 48);
        icon.iconAnchor = new GPoint(24, 48);

        /* マーカー追加 */
        var opts={
            title:"ハワイです"
        };
        var marker=new GMarker(latlng1, opts);
        map.addOverlay(marker);
        
        var opts2={
            icon:icon, /* マーカーにアイコンを指定 */
            title:"日本です"
        }
        var iconmarker=new GMarker(latlng2, opts2);
        map.addOverlay(iconmarker);
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div>

clickable

サンプルを見る
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        var map=new GMap2(document.getElementById("map"));
        map.disableDragging(); /* 地図のドラッグ操作を無効化 */
        /* ピクセル座標 */

        var latlng1=new GLatLng(20.599365,-157.527466); /* ハワイ */
        var latlng2=new GLatLng(36.173357,138.251953); /* 日本 */
        var center=new GLatLng(30.448674,166.640625);

        /* 中心地点 */
        map.setCenter(center, 2);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* コントロール大 */
        map.addControl(new GMapTypeControl()); /* 地図タイプコントロール */

        /* アイコン */
        var icon=new GIcon();
        icon.image="/content/img/ajax/googlemap/markerJP.png"; /* マーカー画像 */
        icon.shadow="/content/img/ajax/googlemap/shadow.png"; /* マーカーの影画像 */
        icon.iconSize=new GSize(48, 48);
        icon.shadowSize=new GSize(60, 48);
        icon.iconAnchor = new GPoint(24, 48);

        /* マーカー追加 */
        var opts={
            clickable:false,
            title:"このマーカーはクリックできません"
        };
        var marker=new GMarker(latlng1, opts);
        map.addOverlay(marker);
        
        var opts2={
            icon:icon, /* マーカーにアイコンを指定 */
            clickable:true,
            title:"このマーカーはクリック可能です"
        }
        var iconmarker=new GMarker(latlng2, opts2);
        map.addOverlay(iconmarker);
        
        /* マーカーがクリックされた時 */
        GEvent.addListener(marker, "click",  function(){
            alert("マーカーがクリックされました"); /* markerはclickable:falseが設定されているのでイベントは発生しない */
        });
        GEvent.addListener(iconmarker, "click",  function(){
            alert("マーカーがクリックされました");
        });
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div>

draggable

サンプルを見る
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        var map=new GMap2(document.getElementById("map"));
        map.disableDragging(); /* 地図のドラッグ操作を無効化 */
        /* ピクセル座標 */

        var latlng1=new GLatLng(20.599365,-157.527466); /* ハワイ */
        var latlng2=new GLatLng(36.173357,138.251953); /* 日本 */
        var center=new GLatLng(30.448674,166.640625);

        /* 中心地点 */
        map.setCenter(center, 2);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* コントロール大 */
        map.addControl(new GMapTypeControl()); /* 地図タイプコントロール */

        /* アイコン */
        var icon=new GIcon();
        icon.image="/content/img/ajax/googlemap/markerJP.png"; /* マーカー画像 */
        icon.shadow="/content/img/ajax/googlemap/shadow.png"; /* マーカーの影画像 */
        icon.iconSize=new GSize(48, 48);
        icon.shadowSize=new GSize(60, 48);
        icon.iconAnchor = new GPoint(24, 48);

        /* マーカー追加 */
        var opts={
            draggable:false,
            title:"このマーカーはドラッグできません"
        };
        var marker=new GMarker(latlng1, opts); /* マーカーのクリック操作を無効化 */
        map.addOverlay(marker);
        
        var opts2={
            icon:icon, /* マーカーにアイコンを指定 */
            draggable:true,
            title:"このマーカーはドラッグ可能です"
        }
        var iconmarker=new GMarker(latlng2, opts2);
        map.addOverlay(iconmarker);
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div>

bouncy

サンプルを見る
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        var map=new GMap2(document.getElementById("map"));
        map.disableDragging(); /* 地図のドラッグ操作を無効化 */
        /* ピクセル座標 */

        var latlng1=new GLatLng(20.599365,-157.527466); /* ハワイ */
        var latlng2=new GLatLng(36.173357,138.251953); /* 日本 */
        var center=new GLatLng(30.448674,166.640625);

        /* 中心地点 */
        map.setCenter(center, 2);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* コントロール大 */
        map.addControl(new GMapTypeControl()); /* 地図タイプコントロール */

        /* アイコン */
        var icon=new GIcon();
        icon.image="/content/img/ajax/googlemap/markerJP.png"; /* マーカー画像 */
        icon.shadow="/content/img/ajax/googlemap/shadow.png"; /* マーカーの影画像 */
        icon.iconSize=new GSize(48, 48);
        icon.shadowSize=new GSize(60, 48);
        icon.iconAnchor = new GPoint(24, 48);

        /* マーカー追加 */
        var opts={
            draggable:true, /* マーカーのドラッグ操作を有効化 */
            dragCrossMove:true, /* マーカーのドラッグ時に、マーカーが浮き上がってカーソルから離れる */
            bouncy:true, /* ドラッグ終了後のバウンドを有効化 */
            bounceGravity:0.1 /* バウンドの加速度 */
        };
        var marker=new GMarker(latlng1, opts); /* マーカーのクリック操作を無効化 */
        map.addOverlay(marker);
        
        var opts2={
            icon:icon, /* マーカーにアイコンを指定 */
            draggable:true, /* マーカーのドラッグ操作を有効化 */
            dragCrossMove:true, /* マーカーのドラッグ時に、マーカーが浮き上がってカーソルから離れる */
            bouncy:true, /* ドラッグ終了後のバウンドを有効化 */
            bounceGravity:0.5 /* バウンドの加速度 */
        }
        var iconmarker=new GMarker(latlng2, opts2);
        map.addOverlay(iconmarker);
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div>

autoPan

サンプルを見る
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        var map=new GMap2(document.getElementById("map"));
        map.disableDragging(); /* 地図のドラッグ操作を無効化 */
        /* ピクセル座標 */

        var latlng1=new GLatLng(20.599365,-157.527466); /* ハワイ */
        var latlng2=new GLatLng(36.173357,138.251953); /* 日本 */
        var center=new GLatLng(30.448674,166.640625);

        /* 中心地点 */
        map.setCenter(center, 3);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* コントロール大 */
        map.addControl(new GMapTypeControl()); /* 地図タイプコントロール */

        /* アイコン */
        var icon=new GIcon();
        icon.image="/content/img/ajax/googlemap/markerJP.png"; /* マーカー画像 */
        icon.shadow="/content/img/ajax/googlemap/shadow.png"; /* マーカーの影画像 */
        icon.iconSize=new GSize(48, 48);
        icon.shadowSize=new GSize(60, 48);
        icon.iconAnchor = new GPoint(24, 48);

        /* マーカー追加 */
        var opts={
            draggable:true,
            autoPan:false,
            title:"このマーカーを地図の端付近でクリックしても地図は自動移動しません"
        };
        var marker=new GMarker(latlng1, opts);
        map.addOverlay(marker);
        
        var opts2={
            icon:icon, /* マーカーにアイコンを指定 */
            draggable:true,
            autoPan:true,
            title:"このマーカーを地図の端付近でクリックすると地図が自動移動します"
        }
        var iconmarker=new GMarker(latlng2, opts2);
        map.addOverlay(iconmarker);
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:500px;height:300px"><!-- 地図描画領域 --></div>

マーカー周辺の詳細地図をマーカーのアイコン上に表示

2008/5/5

GMarker.showMapBlowup([opts])
サンプルを見る
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map, marker;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));

        /* 中心地点 */
        var center=new GLatLng(35.665246,139.712319);
        map.setCenter(center, 14);

        /* マーカー追加 */
        marker=new GMarker(center);
        map.addOverlay(marker);
    }
}
function fShowMapBlowup(level, type){
    marker.showMapBlowup({zoomLevel:level, mapType:type})
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:425px"><!-- 地図描画領域 --></div><br>
<form action="#">
    <input type="button" value="マーカー周辺の詳細地図表示（地図タイプ）" onclick="fShowMapBlowup(12, G_NORMAL_MAP)" /><br>
    <input type="button" value="マーカー周辺の詳細地図表示（航空写真）" onclick="fShowMapBlowup(14, G_SATELLITE_MAP)" /><br>
    <input type="button" value="マーカー周辺の詳細地図表示（地図＋航空写真）" onclick="fShowMapBlowup(16, G_HYBRID_MAP)" />
</form>

地図を動かしても常に地図の中心地点にアイコン表示

2008/5/5

サンプルを見る
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map,marker;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        /* ピクセル座標 */
        /* 中心地点 */
        map.setCenter(new GLatLng(35.665246,139.712319), 14);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* 大きなコントロール */
        map.addControl(new GMapTypeControl()); /* 地図タイプ切替コントロール */

        /* クロスアイコン */
        var icon=new GIcon();
        icon.image="/content/img/ajax/googlemap/cross.png";
        icon.iconSize=new GSize(126, 126);
        icon.iconAnchor=new GPoint(63, 63);
        
        /* マーカー追加 */
        var marker=new GMarker(map.getCenter(), icon);
        map.addOverlay(marker);
        
        /* イベント追加（地図を動かした時） */
        GEvent.addListener(map, "move", function(){
            map.clearOverlays();
            marker=new GMarker(map.getCenter(), icon);
            map.addOverlay(marker);
        });
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div>

マーカーの設定情報（アイコン、タイトル、地理座標）を取得

2008/5/5

GMarker.getIcon()
GMarker.getTitle()
GMarker.getLatLng()
サンプルを見るfile not exists
module/include/ajax/googlemap_marker/GMarker_getLatLng.inc
bW9kdWxlL2luY2x1ZGUvYWpheC9nb29nbGVtYXBfbWFya2VyL0dNYXJrZXJfZ2V0TGF0TG5nLmluYw..

マーカー上に情報ウィンドウが開かれた時／閉じられる時／閉じられた時

2008/5/5

infowindowopenイベント
infowindowbeforecloseイベント
infowindowcloseイベント
サンプルを見る
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map,marker;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        /* ピクセル座標 */
        var latlng=new GLatLng(36.204824,138.252924);
        /* 中心地点 */
        map.setCenter(latlng, 2);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* コントロール大 */
        map.addControl(new GMapTypeControl()); /* 地図タイプコントロール */
        /* マーカー追加 */
        marker=new GMarker(latlng);
        map.addOverlay(marker);

           document.getElementById("res").value="";
        /* 情報ウィンドウが開かれた時 */
        GEvent.addListener(marker, "infowindowopen", function(){
            document.getElementById("res").value+="マーカーのアイコン上に情報ウィンドウが開かれました\n";
        });
        /* 情報ウィンドウが閉じられようとしている時 */
        GEvent.addListener(marker, "infowindowbeforeclose", function(){
            document.getElementById("res").value+="マーカーのアイコン上から情報ウィンドウが閉じられようとしています\n";
        });
        /* 情報ウィンドウが閉じられた時 */
        GEvent.addListener(marker, "infowindowclose", function(){
            document.getElementById("res").value+="マーカーのアイコン上から情報ウィンドウが閉じらました\n";
        });
    }
}
function fOpenInfoWindow(){
    var opts={
        maxWidth:200
    };
    var obj=document.createTextNode("ここが「日本」です。");
    marker.openInfoWindow(obj,opts);
}
function fOpenInfoWindowHtml(){
    var opts={
        maxWidth:200
    };
    marker.openInfoWindow("ここが<strong style='color:red; padding:0px 5px; border:1px solid #ccc;'>●</strong>（日本）です。",opts);
}
function fOpenInfoWindowTabs(){
    var tObj1=document.createTextNode("ここが「日本」です。国土面積は「377,835km2」です。");
    var tObj2=document.createTextNode("日本の首都は「東京」です。東京土産は「銘菓ひよ子」が有名。");
    var tObj3=document.createTextNode("日本の人口は「約1億2780万人」です。その内訳は、男性≒6230万人／女性≒6546万人。女性の人口の方が多いです。");
    var tabs = [
        new GInfoWindowTab("場所", tObj1),
        new GInfoWindowTab("首都", tObj2),
        new GInfoWindowTab("人口", tObj3)
    ];
    var opts={
        maxWidth:300,
        selectedTab:1
    };
   /* タブ付き情報ウィンドウ表示（内容はDOMノード） */
    marker.openInfoWindowTabs(tabs,opts);
}
function fOpenInfoWindowTabsHtml(){
    var opts={
        maxWidth:300,
        selectedTab:1
    };
    var tabs = [
        new GInfoWindowTab("場所", "ここが<strong style='color:red; padding:0px 5px; border:1px solid #ccc;'>●</strong>（日本）です"),
        new GInfoWindowTab("首都", "日本の首都は<strong>「東京」</strong>です。<br>東京土産と言えば...<img src='/content/img/ajax/googlemap/chick.gif' alt='ひよこ' style='vertical-align:middle;' /><a href='http://www.hiyoko.co.jp/shohin/hiyoko.html'>銘菓ひよ子</a>が有名です&hearts;"),
        new GInfoWindowTab("人口", "日本の人口は約1億2780万人です。<br>その内訳は、ｓ男性≒6230万人／女性≒6546万人。女性の人口の多いです。")
    ];
    /* タブ付き情報ウィンドウ表示（内容はDOMノード） */
    marker.openInfoWindowTabsHtml(tabs,opts);
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
<form action="#">
<p>
     <input type="button" value="情報ウィンドウ表示（openInfoWindow）" onclick="fOpenInfoWindow();" /><br>
     <input type="button" value="情報ウィンドウ表示（openInfoWindowHtml）" onclick="fOpenInfoWindowHtml();" />
</p>
<p>
     <input type="button" value="タブ付き情報ウィンドウ表示（openInfoWindowTabs）" onclick="fOpenInfoWindowTabs();" /><br>
     <input type="button" value="タブ付き情報ウィンドウ表示（openInfoWindowTabsHtml）" onclick="fOpenInfoWindowTabsHtml();" />
</p>
<p>
    <input type="button" value="情報ウィンドウを閉じる" onclick="marker.closeInfoWindow()" />
</p>
<p>
    <textarea id="res" cols="64" rows="4" style="width:421px;"></textarea>
</p>
</form>

マーカー上のマウス関連のイベントを取得

2008/5/5

mousedownイベント
mouseupイベント
mouseoverイベント
mouseoutイベント
サンプルを見る
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map,marker;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        /* ピクセル座標 */
        var latlng=new GLatLng(36.204824,138.252924);
        /* 中心地点 */
        map.setCenter(latlng, 2);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* コントロール大 */
        map.addControl(new GMapTypeControl()); /* 地図タイプコントロール */
        /* マーカー追加 */
        marker=new GMarker(latlng);
        map.addOverlay(marker);

           document.getElementById("res").value="";
        /* マウスの特定のボタンが押された時 */
        GEvent.addListener(marker, "mousedown", function(){
            document.getElementById("res").value+="マーカーのアイコン上でマウスの特定のボタンが押されました\n";
        });
        /* マウスの特定のボタンが離された時 */
        GEvent.addListener(marker, "mouseup", function(){
            document.getElementById("res").value+="マーカーのアイコン上でマウスの特定のボタンが離されました\n";
        });
        /* マウスがマーカー上に乗った時 */
        GEvent.addListener(marker, "mouseover", function(){
            document.getElementById("res").value+="マーカーのアイコン領域にマウスが乗りました\n";
        });
        /* マウスがマーカー上から外れた時 */
        GEvent.addListener(marker, "mouseout", function(){
            document.getElementById("res").value+="マーカーのアイコン領域からマウスが外れました\n";
        });
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
<form action="#">
    <textarea id="res" cols="64" rows="4" style="width:421px;"></textarea>
</form>

マーカーをクリックした時に情報ウィンドウ表示

2008/5/5

clickイベント
サンプルを見る
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
    if (GBrowserIsCompatible()) {
        /* 地図インスタンス生成 */
        var map=new GMap2(document.getElementById("map"));
        /* 中心地点 */
        var latlng=new GLatLng(35.658421,139.699069);
        map.setCenter(latlng, 17);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl());
        /* マーカー追加 */
        var marker=new GMarker(latlng);
        map.addOverlay(marker);
        GEvent.addListener(marker, "click", function(){
            marker.openInfoWindowHtml("<p>東京渋谷区にある<a href='http://www.s-markcity.co.jp/'>「マークシティー」</a>です。</p><p><img src='/content/img/ajax/star.png' align='left' alt='' />渋谷駅直結なので雨の日でも便利です。<br>ショッピングやランチどころ満載です。</p>");
        });
    }
}
window.onload=load;
window.unload=GUnload;

//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div>

地図にマーカーを追加／地図からマーカーを削除

2008/5/5

new GMarker(latlng[, opts])
GMap2.addOverlay(overlay)
GMap2.removeOverlay(overlay)
サンプルを見る
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map, marker;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        /* 中心地点 */
        map.setCenter(new GLatLng(35.665246,139.712319), 14);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl());
        map.addControl(new GScaleControl());
        /* 削除ボタン有効化 */
        document.getElementById("btn_remove").disabled=true;
        /* マーカー */
        marker=new GMarker(new GLatLng(35.665246,139.712319));
        /* マーカー追加 */
        addMarker();

        /* 地図からマーカーが削除された時 */
        GEvent.addListener(marker, "remove", function(){
            document.getElementById("res").value+="地図からマーカーが削除されました\n";
        });
    }
}
function addMarker(){
    /* ★マーカー追加 */
    map.addOverlay(marker);
    /* 追加ボタン無効化 */
    document.getElementById("btn_add").disabled=true;
    /* 削除ボタン有効化 */
    document.getElementById("btn_remove").disabled=false;
    document.getElementById("res").value="";
}
function removeMarker(){
    /* ★マーカー削除 */
    map.removeOverlay(marker);
    /* 追加ボタン有効化 */
    document.getElementById("btn_add").disabled=false;
    /* 削除ボタン無効化 */
    document.getElementById("btn_remove").disabled=true;
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>

<div id="map" style="width:425px;height:300px;"><!-- 地図描画領域 --></div><br>
<form action="#">
    <p>
        <input type="button" value="マーカー追加" onclick="addMarker()" id="btn_add" />
        <input type="button" value="マーカー削除" onclick="removeMarker()" id="btn_remove" />
    </p>
    <p>
        <input type id="res" style="width:421px;" />
    </p>
</form>

マーカー表示／非表示／非表示か調べる

2008/5/5

GMarker.show()
GMarker.hide()
GMarker.isHidden()
visibilitychangedイベント
サンプルを見る
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map,marker;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        map=new GMap2(document.getElementById("map"));
        /* 中心地点 */
        map.setCenter(new GLatLng(36.204824,138.252924), 2); /* 日本 */
        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* コントロール大 */
        map.addControl(new GMapTypeControl()); /* 地図タイプコントロール */
        /* マーカー追加 */
        marker=new GMarker(map.getCenter());
        map.addOverlay(marker);

         /* マーカーの表示状態が変更された時 */
        document.getElementById("res").value="";
        GEvent.addListener(marker, "visibilitychanged", function(isVisible){
            if(isVisible==true){
                document.getElementById("res").value="マーカーが表示されました\n";
            }else{
                document.getElementById("res").value="マーカーが非表示になりました\n";
            }
        });
    }
}
function swMarker(){
    var obj=document.getElementById("swbtn");
    if(marker.isHidden()==true){
        /* 非表示→表示 */
        marker.show();
        obj.value="マーカー非表示";
    }else{
        /* 表示→非表示 */
        marker.hide();
        obj.value="マーカー表示";
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
<form action="#">
    <p>
        クリックで表示・非表示切替　→　<input type="button" value="マーカー非表示" id="swbtn" onclick="swMarker();" />
    </p>
     <p>
        <input type="text" id="res" style="width:421px;" />
    </p>
</form>

アイコンクリックで画像のURL変更

2008/5/5

GMarker.setImage(url)
サンプルを見る
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var imgFLG=0;
function load() {
    if(GBrowserIsCompatible()){
        /* 地図インスタンス生成 */
        var map=new GMap2(document.getElementById("map"));
        map.disableDragging(); /* 地図のドラッグ操作を無効化 */
        map.disableDoubleClickZoom(); /* 地図のダブルクリックによるズーム操作を無効化 */
        /* ピクセル座標 */
        var center=new GLatLng(36.173357,138.251953); /* 日本 */
        /* 中心地点 */
        map.setCenter(center, 2);
        /* アイコン */
        var icon=new GIcon();
        icon.image="/content/img/ajax/googlemap/bg_off.png"; /* マーカー画像 */
        icon.iconSize=new GSize(200, 168);
        icon.iconAnchor = new GPoint(100, 60);

        /* マーカー追加 */
        var marker=new GMarker(center, icon);
        map.addOverlay(marker);

        /* マーカがクリックされた時 */
        GEvent.addListener(marker, "click", function(){
            /* 画像のURLを変更 */
            if(imgFLG==0){
                marker.setImage("/content/img/ajax/googlemap/bg_on.png");
                imgFLG=1;
            }else{
                marker.setImage("/content/img/ajax/googlemap/bg_off.png");
                imgFLG=0;
            }
        });
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div>

地図からすべてのマーカーを削除

2008/5/5

GMap2.clearOverlays()
サンプルを見るfile not exists
module/include/ajax/googlemap_marker/GMarker_clearOverlays.inc
bW9kdWxlL2luY2x1ZGUvYWpheC9nb29nbGVtYXBfbWFya2VyL0dNYXJrZXJfY2xlYXJPdmVybGF5cy5pbmM.

関連コンテンツ

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

投票する 投票結果を見る

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

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

©2026 PHP & JavaScript Room All Rights Reserved.