メニュー

E-Mail
xml


ASP.Netのお勉強
VB.Netのお勉強
Excel マクロ・VBAのお勉強
PHPのお勉強
Webデザインのお勉強
Javaのお勉強
総合サイトCocoaLiz
ネイルサロン検索
エステサロン検索
アロマサロン検索
アイビューティーサロン検索
複数のマーカを表示

地図に複数のマーカを表示します。
マーカにクリックイベントを追加して情報窓を表示できる様にします。


要点だけ説明すると、、


○ マーカの情報を配列で用意

　東京駅と有楽町駅の経度、緯度を配列で作成します。



//緯度と経度の配列
var data = new Array();
//東京駅
data.push({lat:'35.681382', lng:'139.766084',name:'東京駅'});
//有楽町駅
data.push({lat:'35.675069', lng:'139.763328',name:'有楽町駅'});



○ マーカを複数作成

　マーカの配列を作成し、
　for文でdataの個数分だけ繰り返して、マーカを生成します。

　生成したマーカに、クリックイベントを追加します。
　別途、イベント追加用の関数を作成して、
　イベントを追加したいマーカと情報窓に表示するテキストを関数に渡します。


//マーカを格納する配列
var markers = new Array();
//マーカの作成
for (i = 0; i < data.length; i++) {

    markers[i] = new google.maps.Marker({
        position: new google.maps.LatLng(data[i].lat, data[i].lng),
        map: map
    });
    
    dispInfo(markers[i],data[i].name);

}


//情報窓表示メソッド
function dispInfo(marker,name) {

    //マーカクリック時に駅名を情報窓に表示
    google.maps.event.addListener(marker, 'click', function(event) {
        new google.maps.InfoWindow({content:name}).open(marker.getMap(), marker);
    });

}



○作ったサンプルサイトは、こちらです。

○コードは、下記。


<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Map API V3 複数のマーカを表示</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">

function initialize() {

    //緯度と経度の配列
    var data = new Array();
    //東京駅
    data.push({lat:'35.681382', lng:'139.766084',name:'東京駅'});
    //有楽町駅
    data.push({lat:'35.675069', lng:'139.763328',name:'有楽町駅'});

    //東京駅の緯度,経度
    var myLatlng = new google.maps.LatLng(data[0].lat, data[0].lng);
    
    //オプションの設定
    var options = {
        //地図のズームサイズ
        zoom: 15,
        //地図の中心地
        center: myLatlng,
        //マップタイプに道路を指定
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        //MapType
        navigationControl: true,
        navigationControlOptions: {style: google.maps.NavigationControlStyle.ZOOM_PAN},
        //ナビゲーション
        mapTypeControl: true,
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR},
        //スケール
        scaleControl: true
    };
    
    var map = new google.maps.Map(document.getElementById("map"), options);
    
    //マーカを格納する配列
    var markers = new Array();

    //マーカの作成
    
    for (i = 0; i < data.length; i++) {
    
        markers[i] = new google.maps.Marker({
            position: new google.maps.LatLng(data[i].lat, data[i].lng),
            map: map
        });
        
        dispInfo(markers[i],data[i].name);

    }

}


//情報窓表示メソッド
function dispInfo(marker,name) {

    //マーカクリック時に駅名を情報窓に表示
    google.maps.event.addListener(marker, 'click', function(event) {
        new google.maps.InfoWindow({content:name}).open(marker.getMap(), marker);
    });

}


</script>
</head>
<body onload="initialize()">

<div id="map" style="width: 600px; height: 400px;"></div>

</body>
</html>



Copyright (C) 総合サイトCocoaLiz. All Rights Reserved.