例−38:指定の範囲内にあるマーカーを表示する

 

1.マーカーをドラッグして中心位置を決定してください

2.マーカーからの検索距離を指定してください

マーカーからの検索範囲:

3.検索ボタンを押してください

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title>例−38:指定の範囲内にあるマーカーを表示する</title>
  <script src="http://maps.google.co.jp/maps?file=api&amp;v=2&amp;key=[MAPS_API_KEY]"
  type="text/javascript"></script>
  <script type="text/javascript">
  //<![CDATA[

    //XMLファイルのURL
    var xmlURL = "https://googledrive.com/host/0B1ECfqTCcLE8blRHZVVZM1QtRkE/googlemaps_uploads/map_example_38.xml";
    
    //内部用の地点リスト
    var pointList = [];
    
    //マップ
    var map;
    
    //検索の中心マーカー
    var ctrlMarker = null;
    
    //
    var ctrlCircle = null;

    function load(){
      //===========================================================
      // 1.初期化
      //   ・地図を作成
      //   ・人間マーカーを作成
      //   ・コントロールの追加
      //===========================================================
      var centerPos = new GLatLng(35.684, 139.750);
      map = new GMap2( document.getElementById("map")); 
      map.setCenter( centerPos, 7 );
      
      ctrlMarker = humanMarker(centerPos);
      map.addOverlay( ctrlMarker );
    
      map.addControl( new GLargeMapControl() );
    
      //===========================================================
      // 2.XMLファイルをロードする
      //     ↓
      //   カテゴリを作成する・先にマーカーを追加しておく(非表示)
      //   内部用の地点リストを作成しておく
      //===========================================================
      GDownloadUrl(xmlURL, function(data, responseCode) {
        var xmlDoc = GXml.parse(data);
        
        //内部用のリストデータを作成
        var lat,lng;
        var list = xmlDoc.documentElement.getElementsByTagName("AmusementPark"); 
        for (var i = 0; i < list.length; i++) {
          //内部検索用のデータを作成
          var info = {};
          lat = list[i].getElementsByTagName("lat")[0].firstChild.nodeValue;
          lng = list[i].getElementsByTagName("lng")[0].firstChild.nodeValue;
          info.latlng = new GLatLng(lat, lng);
          info.name = list[i].getElementsByTagName("name")[0].firstChild.nodeValue;
          
          //マーカーを作成
          info.marker = createMarker(info.latlng, "施設名:" + info.name);
          map.addOverlay(info.marker);
          info.marker.hide();
          
          
          //内部リストに追加
          pointList[i] = info;
          
        };
        
      });
    } 
    
    function searchMarkers(formObj){
      //===========================================================
      // 3.検索ボタンが押されたら全てのマーカーをチェック
      //  ↓
      //  該当するマーカーは表示、それ以外は非表示
      //===========================================================
      var hitMarkers = [];
      var markerPos = ctrlMarker.getLatLng();
      for (var i = 0; i < pointList.length; i++) {
        if (markerPos.distanceFrom(pointList[i].latlng) < formObj.distanceLimit.value){
          pointList[i].marker.show();
        }else{
          pointList[i].marker.hide();
        }
      }
      
      if (ctrlCircle !== null) {
        map.removeOverlay( ctrlCircle );
      }
      var points = [];
      var point;

      for (i = 0; i < 72; i++) {
        point = destination(markerPos, i * 360/72, formObj.distanceLimit.value/1000)
        points.push (point);
      }
      ctrlCircle = createCircle(points);
      map.addOverlay( ctrlCircle );
    }
    
    function clearMarkers(formObj){
      //===========================================================
      // 4.クリアボタンが押されたら全てのマーカーを非表示
      //===========================================================
      for (var i = 0; i < pointList.length; i++) {
        pointList[i].marker.hide();
      }
    }
    
    function destination(orig, hdng, dist) {
      var R = 6371; // earth's mean radius in km
      var oX, oY;
      var x, y;
      var d = dist/R;  // d = angular distance covered on earth's surface
      hdng = hdng * Math.PI / 180; // degrees to radians
      oX = orig.x * Math.PI / 180;
      oY = orig.y * Math.PI / 180;

      y = Math.asin( Math.sin(oY)*Math.cos(d) + Math.cos(oY)*Math.sin(d)*Math.cos(hdng) );
      x = oX + Math.atan2(Math.sin(hdng)*Math.sin(d)*Math.cos(oY), Math.cos(d)-Math.sin(oY)*Math.sin(y));

      y = y * 180 / Math.PI;
      x = x * 180 / Math.PI;
      return new GLatLng(y, x);
    }

    
    
    function humanMarker(mpoint) { 
      //===========================================================
      // 位置を選択するための人間マーカーを作成
      //===========================================================
      var pegmanIcon = new GIcon();
      pegmanIcon.image = "http://maps.google.com/mapfiles/cb/pegman.png";
      pegmanIcon.iconSize = new GSize(49, 52);
      pegmanIcon.iconAnchor = new GPoint(24, 34);
      pegmanIcon.infoWindowAnchor = new GPoint(18, 11);
      pegmanIcon.sprite = { top : 0, left : 0};

      var marker = new GMarker(mpoint, {icon: pegmanIcon, draggable: true});
      //マーカーがドラッグを開始したら、フキダシをクローズ
      GEvent.addListener(marker, "dragstart", function(){
        map.closeInfoWindow();
      });
      //マーカーがドロップされたら地図の中心に設定
      GEvent.addListener(marker, "dragend", function(){
        map.panTo( marker.getLatLng() );
      });
      return marker; 
    }
    
    
    function createMarker(mpoint, contents) { 
      //===========================================================
      // 位置を表示するためのマーカーを作成
      //===========================================================
      var flagIcon = new GIcon();
      flagIcon.image = "http://googlemaps.googlermania.com/img/marker_flag.png";
      flagIcon.shadow = "http://googlemaps.googlermania.com/img/marker_shadow.png";
      flagIcon.iconSize = new GSize(35, 35);
      flagIcon.shadowSize = new GSize(35, 35);
      flagIcon.iconAnchor = new GPoint(0, 35);
      flagIcon.infoWindowAnchor = new GPoint(18, 11);
      
      var marker = new GMarker(mpoint, {icon: flagIcon}); 
      
      //マーカーがクリックされたら施設名を表示
      GEvent.addListener(marker, "click", function(){
        marker.openInfoWindowHtml(contents);
      });
      
      return marker; 
    }
    
    function createCircle(pointList){
      //===========================================================
      // 検索範囲を示す円を作成
      //===========================================================
      return new GPolygon(pointList, "#FF0000" ,  3,  1, "#CC0000", 0.05);
    }


    GEvent.addDomListener(window, "load", load);
    GEvent.addDomListener(window, "unload", GUnload);
  //]]>
  </script>
</head>
<body >
  <h1>例−38:指定の範囲内にあるマーカーを表示する</h1>
<form name="form">
    <table>
        <tbody>
            <tr>
                <td valign="top">
                <div id="map" style="width: 500px; height: 500px">&nbsp;</div>
                </td>
                <td valign="top">
                <h4>1.マーカーをドラッグして中心位置を決定してください</h4>
                <h4>2.マーカーからの検索距離を指定してください</h4>
                マーカーからの検索範囲:<br />
                <select name="distanceLimit">
                <option value="50000" selected="selected">50km</option>
                <option value="100000">100km</option>
                <option value="200000">200km</option>
                </select>
                <h4>3.検索ボタンを押してください</h4>
                <input type="button" onclick="searchMarkers(this.form);" value="検索" /> <input type="button" onclick="clearMarkers();" value="クリア" /></td>
            </tr>
        </tbody>
    </table>
</form>
</body>
</html>





サイト内検索
Google Maps APIプログラミング入門 第2版
Google Maps APIプログラミング入門 第2版
全520ページ。Google Maps API version3を中心に公式ドキュメントより詳しく解説しています。
詳しくはこちら
Google Maps APIプログラミングガイド

Google Maps API Expert 4人が共著で執筆。中級者向けに実用に役立つサンプルを中心に紹介! スマートフォン時代に合わせたGoogle Maps APIの使い方も掲載。
詳しくはこちら