「GoogleMaps API V3」マーカーの表示、複数マーカーの表示

「GoogleMaps API V3」の使い方その３（マーカーの表示）

今回は地図の上に、簡単なマーカーを表示したいと思います。

■簡単なマーカーの表示

01<head>
02<title>Google Map API v3-3</title>
03<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=MyKeyCode" charset="utf-8"></script>
04<script type="text/javascript">
05function initialize() {
06    // Google Mapで利用する初期設定用の変数
07    var latlng = new google.maps.LatLng(36.062092, 136.223323);
08    var mapOptions = {
09        zoom: 14,
10        mapTypeId: google.maps.MapTypeId.ROADMAP,
11        center: latlng
12    };
13    // GoogleMapの生成
14    var gmap = new google.maps.Map(document.getElementById("map"), mapOptions);
15    // マーカーを生成
16    var gmarker = new google.maps.Marker({
17        position: latlng,       // 緯度・経度は地図の中心
18        title: "maker-test"     // ツールチップ
19    });
20    // マーカーを地図の中心に表示
21    gmarker.setMap(gmap);
22}
23</script>
24</head>
25<body onload="initialize()">
26    <div id="map" style="width: 300px; height: 300px;"></div>
27</body>
28</html>

マーカーを表示するときは、最初にマップを生成します。
その後、マーカーを生成しマーカーをマップに関連付けて表示させます。
マーカーのオプションに「title: "maker-test"」を指定していますので、マーカーのところにカーソルを持っていくと "maker-test"のロールオーバーが表示されます。

マーカークラスについて詳しくは以下のURLを参照してください。
⇒Marker クラス

尚、「setMap」を使わなくても、以下の様にオプションで一括で指定しても同じことができます。
（マーカーの生成部分のみ抜粋）

1// GoogleMapの生成
2var gmap = new google.maps.Map(document.getElementById("map"), mapOptions);
3// マーカーを地図の中心に表示(一括)
4var gmarker = new google.maps.Marker({
5    map: gmap,
6    position: latlng,       // 緯度・経度は地図の中心
7    title: "maker-test"     // ツールチップ
8});

■複数マーカーの表示

複数のマーカーを表示したいことはよくあることだと思います。
今回は５個の適当な緯度・経度のマーカーの表示を行います。

01<head>
02<title>Google Map API v3-3</title>
03<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=MyKeyCode" charset="utf-8"></script>
04<script type="text/javascript">
05function initialize() {
06    // Google Mapで利用する初期設定用の変数
07    var latlng = new google.maps.LatLng(36.062092, 136.223323);
08    var mapOptions = {
09        zoom: 14,
10        mapTypeId: google.maps.MapTypeId.ROADMAP,
11        center: latlng
12    };
13    // GoogleMapの生成
14    var gmap = new google.maps.Map(document.getElementById("map"), mapOptions);
15 
16    // ５個のマーカー(座標に特に意味は無い)
17    var markerData = [
18        { lat:"36.065487", lng:"136.230723", title:"marker-1" },
19        { lat:"36.067258", lng:"136.220604", title:"marker-2" },
20        { lat:"36.063794", lng:"136.220264", title:"marker-3" },
21        { lat:"36.062456", lng:"136.230704", title:"marker-4" },
22        { lat:"36.061456", lng:"136.220904", title:"marker-5" }
23    ];
24    for (i = 0;i < markerData.length;i++) {
25        // マーカーを生成
26        var marker = new google.maps.Marker({
27            position: new google.maps.LatLng(markerData[i].lat, markerData[i].lng),
28            title: markerData[i].title
29        });
30        // マーカーを地図に表示
31        marker.setMap(gmap);
32    }
33}
34</script>
35</head>
36<body onload="initialize()">
37    <div id="map" style="width: 300px; height: 300px;"></div>
38</body>
39</html>

「GoogleMaps API V3」 の使い方その３（マーカーの表示）

■簡単なマーカーの表示

■複数マーカーの表示

■関連記事

「GoogleMaps API V3」の使い方その３（マーカーの表示）