end0tknr's kipple - web写経開発

太宰府天満宮の狛犬って、妙にカワイイ

google map apiで複数マーカー&複数吹き出しを表示

GIS javascript

今回、gmap apiで複数マーカー&複数吹き出しを表示する機会があったので、html + javascript srcを記載しておきます。

複数マーカーと複数吹出しを表示するのにやや、ハマりました。

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&v=2&key=aaaaa"
type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="tei_coord.js"></script>
</head>
<body>
<form>
<!-- onChangeでreloadをしないと、複数のデータを切替えて表示できなかった為 -->
<select id="disp_area" name="disp_area" onChange="location.reload()">
  <option value="miyagi_k">宮城県 気??市</option>
  <option value="miyagi_s">宮城県 塩??市</option>
  <option value="miyagi_i">宮城県 石??市</option>
</select>

<div id="map" style="width:800px; height:550px"></div>
<script type="text/javascript">
//<![CDATA[

if (GBrowserIsCompatible()) {
  var map = new GMap2(document.getElementById("map"));
  map.addControl(new GLargeMapControl());	//control button
  map.addControl(new GMapTypeControl());	//地図/写真の切替
  map.addControl(new GScaleControl());		//scale

  map.setCenter(new GLatLng(38.268837, 140.8721), 8);	//表示座標

  load_tei_list (map);	//マーカ&吹出し表示は別method
}
//]]>
</script>
</form>
</body>
</html>

javascript

function load_tei_list(map){
    var area_name = document.forms[0].disp_area.value;
    if (area_name==undefined || area_name.length< 1) return;
    //マーカー座標が入ったtxtをhttp get
    var file_name = 'list_'+ area_name + '.txt';
    $.get(file_name, {},
          function(data){
              disp_tei_list(map,data);
          });
}

function disp_tei_list(map,teis_str){
    var teis = teis_str.split("\n");
    for (var i=0;i<teis.length;i++){
        if (teis[i].length<1) continue;

        var tei = teis[i].split("\t");
        var coord = new GLatLng(tei[4],tei[3]); //経度,緯度
        var marker = new GMarker(coord);        //マーカー      
        add_marker(coord,tei);
    }
}

function add_marker(coord,tei) {
    var marker = new GMarker(coord);
    
    var tei_info_str =
            tei[0] +"<br>"+
        "ADRS_ORG:" + tei[1] +"<br>"+
        "ADRS_PARSE:" + tei[2];
    map.addOverlay(marker);             //マーカー発生
    GEvent.addListener(marker, "click",
                       function() {
                           marker.openInfoWindowHtml(tei_info_str);
                       });
}

srcは単純なので、座標データが収められたtsvなtxtフィイルは記載していません。