メニュー

E-Mail
xml


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

東京駅にマーカを表示し、
マーカをクリックすると情報窓が表示するようにします。

要点だけ説明すると、、

○ マーカを作成

　google.maps.Markerにオプションを設定して生成します。
　最低限必要な必須オプションを設定します。


var marker = new google.maps.Marker({
    //マーカの位置
    position: myLatlng,
    //マーカを表示するマップ
    map: map
});


○ 情報窓を作成

　google.maps.InfoWindowにオプションを渡して生成します。
　情報窓に東京駅が表示される様に、contentに設定します。
　contentには、htmlタグが設定できます。


var infowindow = new google.maps.InfoWindow({
    content: '東京駅'
});



○ マーカのクリックイベントを設定

　google.maps.event.addListenerでイベントを設定しあます。
マーカがクリックされたら、情報窓が表示される様に設定します。


google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,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 myLatlng = new google.maps.LatLng(35.681382, 139.766084);
    
    //オプションの設定
    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 marker = new google.maps.Marker({
        //マーカの位置
        position: myLatlng,
        //マーカを表示するマップ
        map: map
});

    //情報窓の生成
    var infowindow = new google.maps.InfoWindow({
        content: '東京駅'
    });

    //マーカをクリックすると情報窓を表示
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });

}

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

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



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