気ままにWeb

19 comments on “現在表示されている範囲内のマーカーだけ表示する[GoogleMapsAPIVersion3]+[PHP]”

1. array(“lat” => 35.0118197,”lng” => 135.7606966,”name” => “ハートンホテル京都”),
   1 => array(“lat” => 35.01325,”lng” => 135.7508974,”name” => “二条城”),
   2 => array(“lat” => 35.0095115,”lng” => 135.7605273,”name” => “新風館”),
   3 => array(“lat” => 35.0118086,”lng” => 135.7681182,”name” => “京都市役所”),
   4 => array(“lat” => 35.016672,”lng” => 135.7824254,”name” => “平安神宮”),
   5 => array(“lat” => 35.024113,”lng” => 135.7621629,”name” => “京都御所紫宸殿”),
   6 => array(“lat” => 35.0103281,”lng” => 135.7682849,”name” => “本能寺”),
   7 => array(“lat” => 35.0076534,”lng” => 135.7602523,”name” => “六角堂”),
   8 => array(“lat” => 35.027739,”lng” => 135.75097,”name” => “晴明神社”),
   9 => array(“lat” => 35.0388033,”lng” => 135.7733869,”name” => “下鴨神社境内”),
   10 => array(“lat” => 35.0004818,”lng” => 135.7608191,”name” => “ホテル日航プリンセス京都”),
   11 => array(“lat” => 34.9906133,”lng” => 135.7593859,”name” => “東本願寺”),
   12 => array(“lat” => 35.0093254,”lng” => 135.7623216,”name” => “京都府京都文化博物館”),
   13 => array(“lat” => 35.3747023,”lng” => 135.3429022,”name” => “京都府綾部市於与岐町田和”),
   14 => array(“lat” => 34.985458,”lng” => 135.757755,”name” => “京都駅（京都）”),
   15 => array(“lat” => 34.9914047,”lng” => 135.751681,”name” => “西本願寺”),
   16 => array(“lat” => 34.9866383,”lng” => 135.7453343,”name” => “梅小路公園”),
   17 => array(“lat” => 35.05773,”lng” => 135.752768,”name” => “上賀茂神社”),
   18 => array(“lat” => 35.010517,”lng” => 135.759638,”name” => “烏丸御池駅”),
   19 => array(“lat” => 35.011892,”lng” => 135.750473,”name” => “二条城前駅”),
   20 => array(“lat” => 35.0131584,”lng” => 135.7849696,”name” => “京都市動物園”)
   );

   //範囲データ取得
   $ne_lat = $_GET[“ne_lat”];
   $sw_lat = $_GET[“sw_lat”];
   $ne_lng = $_GET[“ne_lng”];
   $sw_lng = $_GET[“sw_lng”];

   //出力
   header(‘Content-type: text/xml; charset=utf-8’);
   echo ”;
   echo “”;
   foreach($locate_ary as $val){
   if(
   $val[“lat”] $sw_lat &&
   $val[“lng”] $sw_lng){
   echo “”;
   echo “”.$val[“lat”].””;
   echo “”.$val[“lng”].””;
   echo “”.$val[“name”].””;
   echo “”;
   }
   }
   echo “\n”;
   ?>

   上記のファイルを読みこもうとすると「情報の読み込みに失敗しました」とエラーがでます。
   解決方法はありますか？

   返信

   1. コメントありがとうございます。

      えーっと、PHPの動くサーバに設置していてパスがあっていれば、動くはずなので…。

      http://hogehoge/xml.php?ne_lat=35.05128700714346&sw_lat=34.966926352311056&ne_lng=135.81397410095215&sw_lng=135.71097727478028
      ↑の「http://hogehoge/xml.php」のところを、実際に配置したサーバのパス、ファイル名に変えてブラウザでアクセスしてみてください。
      ちゃんと場所と緯度経度が表示されれば、javascript側のパスに誤りがあると思われます。

      返信

      1. 古い記事ですがとても参考になりました。

         ただ私も同様のエラー「情報の読み込みに失敗しました」が表示されます。

         ソースはjqueryのパスを変更したぐらいです。

         試行錯誤の結果判明した原因は「フォルダー名が日本語」だと上記エラーが出るようです。

         今後同様のエラーで悩める方への情報としてコメントさせて頂きました。

         返信

2. ありがとうございます。
   サーバー上で動作確認しました。

   質問なんですが、
   array(“category” => Lawson,”category2″ => A店,”lat” => “35.662277”,”lng” => “139.696754”,”name” => “渋谷区井の頭通店”,”address” => “東京都渋谷区宇田川町39-2″,”tel” => “03-5459-3210″,”opentime” => “２４時間”,”post” => “150-0042”),
   1 => array(“category” => Lawson,”category2″ => A店,”lat” => “35.6628436”,”lng” => “139.6944348”,”name” => “神山店”,”address” => “東京都渋谷区神山町12-3″,”tel” => “03-3485-2505″,”opentime” => “２４時間”,”post” => “150-0047”),
   2 => array(“category” => Lawson,”category2″ => A店,”lat” => “35.6593163”,”lng” => “139.6967874”,”name” => “道玄坂二丁目店”,”address” => “東京都渋谷区道玄坂2-20-26″,”tel” => “03-3461-5332″,”opentime” => “２４時間”,”post” => “150-0043”),
   3 => array(“category” => Lawson,”category2″ => A店,”lat” => “35.659044”,”lng” => “139.6941294”,”name” => “円山町店”,”address” => “東京都渋谷区円山町11-10″,”tel” => “03-3461-4074″,”opentime” => “２４時間”,”post” => “150-0044”),
   4 => array(“category” => Lawson,”category2″ => A店,”lat” => “35.6602914”,”lng” => “139.7040784”,”name” => “ＪＰローソン渋谷郵便局店”,”address” => “東京都渋谷区渋谷1-12-13″,”tel” => “03-3498-3963″,”opentime” => “２４時間”,”post” => “150-0002”),
   5 => array(“category” => Tsutaya,”category2″ => B店,”lat” => “35.6599302”,”lng” => “139.7003177”,”name” => “SHIBUYA TSUTAYA”,”address” => “東京都渋谷区宇田川町21-6″,”tel” => “03-5459-2000″,”opentime” => “朝10:00〜深夜2:00″,”post” => “150-0042”),
   6 => array(“category” => Tsutaya,”category2″ => B店,”lat” => “35.6778218”,”lng” => “139.677433”,”name” => “幡ヶ谷店”,”address” => “東京都渋谷区幡ヶ谷2-7-2 幡ヶ谷ニューセンタービルB1″,”tel” => “03-6383-0545″,”opentime” => “朝10:00〜深夜4:00″,”post” => “151-0072”),
   7 => array(“category” => Tsutaya,”category2″ => B店,”lat” => “35.6728416”,”lng” => “139.6687506”,”name” => “笹塚店”,”address” => “東京都渋谷区笹塚1-20-5 ケイオービル1F”,”tel” => “03-3485-9880″,”opentime” => “朝10:00〜深夜2:00″,”post” => “151-0073”),
   8 => array(“category” => Tsutaya,”category2″ => C店,”lat” => “35.6433433”,”lng” => “139.699721”,”name” => “中目黒店”,”address” => “東京都目黒区上目黒2-9-1 中目黒GS第1ビル”,”tel” => “03-3711-1333″,”opentime” => “朝10:00〜深夜4:00″,”post” => “153-0051”),
   9 => array(“category” => Tsutaya,”category2″ => C店,”lat” => “35.6655666”,”lng” => “139.7304953”,”name” => “Lifestyle CONCIERGE”,”address” => “東京都港区赤坂9番地7番3号 E-0109″,”tel” => “03-5413-3773″,”opentime” => “朝10:00〜夜11:00″,”post” => “107-0052”),
   10 => array(“category” => Tsutaya,”category2″ => C店,”lat” => “35.689829”,”lng” => “139.6979168”,”name” => “新宿西口本店”,”address” => “東京都新宿区西新宿1-11-1″,”tel” => “03-3346-1010″,”opentime” => “朝9：30〜夜10：00″,”post” => “160-0023”),
   );

   //範囲データ取得
   $ne_lat = $_GET[“ne_lat”];
   $sw_lat = $_GET[“sw_lat”];
   $ne_lng = $_GET[“ne_lng”];
   $sw_lng = $_GET[“sw_lng”];

   //出力
   header(‘Content-type: text/xml; charset=utf-8’);
   echo ”;
   echo “”;
   foreach($locate_ary as $val){
   if(
   $val[“lat”] $sw_lat &&
   $val[“lng”] $sw_lng){
   echo “”;
   echo “”.$val[“category”].””;
   echo “”.$val[“category2″].””;
   echo “”.$val[“lat”].””;
   echo “”.$val[“lng”].””;
   echo “”.$val[“name”].””;
   echo “”.$val[“address”].””;
   echo “”.$val[“tel”].””;
   echo “”.$val[“opentime”].””;
   echo “”.$val[“post”].””;
   echo “”;
   }
   }
   echo “\n”;
   ?>
   ↑このような形で項目を増やしたい場合HTMLの方もそのままで連動しますでしょうか？

   見よう見まねで増やしては見たものの読込まなくなってしまいました。
   難しそうですね。。。

   返信

   1. コメントありがとうございます。

      読み込まなくなってしまったのは、xml.phpの出力形式がXML形式でなくなってしまったからだと思います。
      受け手側はデータがXMLで帰ってくる前提で作ってあるので、XML形式で返してあげる必要があります。
      コメントのソースだと、

      <?php
      //地点データ
      —省略—

      //範囲データ取得
      $ne_lat = $_GET[“ne_lat”];
      $sw_lat = $_GET[“sw_lat”];
      $ne_lng = $_GET[“ne_lng”];
      $sw_lng = $_GET[“sw_lng”];

      //出力
      header(‘Content-type: text/xml; charset=utf-8’);
      echo ‘＜?xml version=”1.0″ standalone=”yes”?>’;
      echo “＜Locations>”;
      foreach($locate_ary as $val){
      if(
      $val[“lat”] ＜ $ne_lat &&
      $val[“lat”] > $sw_lat &&
      $val[“lng”] ＜ $ne_lng &&
      $val[“lng”] > $sw_lng){
      echo “＜Locate>”;
      echo “＜category>”.$val[“category”].”＜/category>”;
      echo “＜category2>”.$val[“category2″].”＜/category2>”;
      echo “＜lat>”.$val[“lat”].”＜/lat>”;
      echo “＜lng>”.$val[“lng”].”＜/lng>”;
      echo “＜name>”.$val[“name”].”＜/name>”;
      echo “＜address>”.$val[“address”].”＜/address>”;
      echo “＜tel>”.$val[“tel”].”＜/tel>”;
      echo “＜opentime>”.$val[“opentime”].”＜/opentime>”;
      echo “＜post>”.$val[“post”].”＜/post>”;
      echo “＜/Locate>”;
      }
      }
      echo “＜/Locations>\n”;
      ?>

      こんな感じにすれば動くと思います。
      全体をタグで、個々の地点データをタグで、地点の各要素には適当なタグをつくってくくってやれば、読み取ることができます。

      ただ、このままではせっかく定義したカテゴリーなどのデータが反映されないので、HTML側（というかJavascript側）では、上記データを読み取って表示する部分を作成する必要があります。
      完成サンプルコードの123行目で、LocateName変数に読み込んだ地点の名前をセットしているので、たとえばここで…。

      var LocateName = $(“category”,this).text() + ” ” + $(“category2″,this).text() + ” ” + $(“name”,this).text();

      みたいな形でセットしてやると表示されます。
      http://mspec.jp/sample/gmap/sp/
      にサンプルを置いてみました。

      あまりカッコよろしくない見た目を調整する場合は、各要素をで区切って、cssで調整するとか、liではなくtableとかにするといいかと思います（ｊQueryでtableを作っていくのは少し面倒ですが）。

      返信

3. pochiさんありがとうございます。
   すごいですね、どんなことでもご対応いただいて勉強になります。

   私も色々調べながら勉強中です。
   最終的には下記のような地図サイトを作ってみたいのですが、なかなかそこまでは技術的に及ばず、思案中です。

   http://www.mkyosho.co.jp/parking/info/

   できれば
   ＜!–ul id=”map_list”>–>
   ＜a href=”map.php?lng=136.88153743743896&lat=35.17089667903823″ rel=”nofollow”>名古屋＜/a>
   ＜a href=”map.php?lng=136.797083&lat=35.301751″ rel=”nofollow”>一宮＜/a>
   ＜a href=”map.php?lng=137.078472&lat=35.22626″ rel=”nofollow”>瀬戸＜/a>
   ＜a href=”map.php?lng=137.157315&lat=34.925611″ rel=”nofollow”>岡崎＜/a>
   ＜a href=”map.php?lng=137.381651&lat=34.762811″ rel=”nofollow”>豊橋＜/a>
   ＜a href=”map.php?lng=136.930662&lat=34.893987″ rel=”nofollow”>半田＜/a>
   ＜a href=”map.php?lng=136.75654649734497&lat=35.40954929787722″ rel=”nofollow”>岐阜＜/a>
   ＜a href=”map.php?lng=136.617927&lat=35.367225″ rel=”nofollow”>大垣＜/a>
   ＜a href=”map.php?lng=137.121172&lat=35.335019″ rel=”nofollow”>多治見＜/a>
   ＜a href=”map.php?lng=136.61868&lat=34.967001″ rel=”nofollow”>四日市＜/a>
   ＜a href=”map.php?lng=136.510232&lat=34.733985″ rel=”nofollow”>津＜/a>
   ＜a href=”map.php?lng=137.734442&lat=34.703741″ rel=”nofollow”>浜松＜/a>

   ー省略ー
   ＜a href=”map.php?lng=136.888425&lat=35.164818″ title=”名古屋（名駅南）” rel=”nofollow”>名古屋（名駅南）＜/a> ｜
   ー省略ー
   上記のような形でテキストに座標を張ったリンクを設けて、MAPをはれればベストなんですが、サンプルも未だ見つからずな状態です。

   がんばりますね！

   返信

   1. コメントありがとうございます。
      返信が遅くなりました。すみません。

      独り言みたいな内容なのに、コメントをいただけると、モチベーション上がるのでありがたいです。

      リンクをクリックしたら該当地点を中心としたMAPを表示させるだけだったら、サンプルのソースコードのままファイル名を「map.php」に変更し、13行目を

      var latlng = new google.maps.LatLng(, );

      にしてやると動きます。（本当は、引数の内容をちゃんと精査しないといけなかったり、色々やらんといかんですけど、とりあえず動きます。）
      http://mspec.jp/sample/gmap/sp3/
      こんな感じで…。

      サンプルのようなサイトを作る場合は、データの持たせ方とか色々と考えないといけないですけど（データ量が少ないなら、CSVなどのテキストファイル、多くなったらMySQLなどのDBを考えます。）、MAP表示周りはこのエントリーの内容で一通り行けると思います、

      お互い頑張りましょう！

      返信

   2. 私の前々回のコメントですが…。
      ソースの一部が欠落してますね…。

      正しくは
      ‘;
      echo “＜Locations>”;
      foreach($locate_ary as $val){
      if(
      $val[“lat”] ＜ $ne_lat &&
      $val[“lat”] > $sw_lat &&
      $val[“lng”] ＜ $ne_lng &&
      $val[“lng”] > $sw_lng){
      echo “＜Locate>”;
      echo “＜category>”.$val[“category”].”＜/category>”;
      echo “＜category2>”.$val[“category2″].”＜/category2>”;
      echo “＜lat>”.$val[“lat”].”＜/lat>”;
      echo “＜lng>”.$val[“lng”].”＜/lng>”;
      echo “＜name>”.$val[“name”].”＜/name>”;
      echo “＜address>”.$val[“address”].”＜/address>”;
      echo “＜tel>”.$val[“tel”].”＜/tel>”;
      echo “＜opentime>”.$val[“opentime”].”＜/opentime>”;
      echo “＜post>”.$val[“post”].”＜/post>”;
      echo “＜/Locate>”;
      }
      }
      echo “＜/Locations>\n”;
      ?>
      です。
      すみません。元も一応直しておきます。

      返信

4. phpプログラム

   encoding = “UTF-8”; // 文字コードをUTF-8に
   $dom->formatOutput = true; // 出力XMLを整形(改行,タブ)する

   $link = mysql_connect(‘localhost’, ‘root’, ‘izayoi398’);
   if (!$link) {
   die(‘接続失敗です。’.mysql_error());
   }

   $db_selected = mysql_select_db(‘twitter’, $link);
   if (!$db_selected){
   die(‘データベース選択失敗です。’.mysql_error());
   }

   mysql_set_charset(‘sjis’);

   $result = mysql_query(‘SELECT status,X(location) as lng,Y(location) as lat FROM newstatusstream where 1’);
   if (!$result) {
   die(‘クエリーが失敗しました。’.mysql_error());
   }

   $Markers = $dom->appendChild($dom->createElement(‘Markers’));

   header(“Content-Type: text/xml; charset=UTF-8”);

   while ($row = mysql_fetch_assoc($result)) {
   $marker= $Markers->appendChild($dom->createElement(‘marker’));

   $lat= $marker->appendChild($dom->createElement(‘lat’));
   $lat->appendChild($dom->createTextNode(mb_convert_encoding($row[“lat”],”UTF-8″,”Shift-Jis”)));

   $lng= $marker->appendChild($dom->createElement(‘lng’));
   $lng->appendChild($dom->createTextNode(mb_convert_encoding($row[“lng”],”UTF-8″,”Shift-Jis”)));

   $status= $marker->appendChild($dom->createElement(‘status’));
   $status->appendChild($dom->createTextNode(mb_convert_encoding($row[“status”],”UTF-8″,”Shift-Jis”)));

   }

   echo $test= $dom->saveXML();
   $dom->save($filename);

   $close_flag = mysql_close($link);

   ?>

   ブラウザの実行結果画面。

   35.705018
   139.59986

   ホープハイツ２ , 65000 , 1K , 西荻窪駅北口1分 , 西荻窪駅から徒歩１分で静か。http://t.co/VsnNHHF , 6k882h

   35.66768668
   139.70023871

   rooms23会場内で商談中 @ 国立代々木競技場 第一体育館 http://t.co/3jgLXxp

   35.66052205
   139.697035

   I m at サブウェイ 渋谷文化村通り店 (道玄坂2-25-9, 渋谷ロマーネ80 1階, 渋谷区) http://t.co/BCAxv7e

   35.65795564
   139.44718647
   @sharkaya

   35.90713566
   139.62467867
   今日は家でゆっくりしようとしたのに彼女に捕まった(´Д` )もうやだ

   35.93664
   139.7752
   特別支援学校での実習一日目終了。こんなに疲れたのは久々だが充足感で一杯。

   35.63626717
   139.8834309

   I m at 舞浜駅 (Maihama Sta.) (舞浜26-5, 浦安市) http://t.co/uUAD5Rl

   35.65995282
   139.66742724
   打ち合わせ (@ 黒川食堂) http://t.co/S8drSLG

   これをjqueryを用いてGooglemapで読み込み実行してみたのですが、xmlの読み込みには成功するのですが、中のタグを取得できないようで、マーカーを設置することができません。また、一度xmlファイルとして出力し、そのxmlファイルを直接読み込んだ場合はマーカーの設置に成功します。ブラウザはfirefoxを用いてローカルで動作させています。ためしに文字コードをshift-jisで実行してみたのですが、その場合もxmlファイルを直接読み込んだ場合のみマーカーの設置に成功しました。散々調べたのですが全く原因が分からないので何かアドバイス等ありましたらよろしくお願いします。

   返信

5. 度々すいません。先ほどの補足です。ブラウザの実行画面で上記だとタグが表示されていませんが、実際にはちゃんと表示されています。

   返信

6. イベントリスナに登録するところのスニペットで、addListenerのイベント名が’idol’になっていますよ（＾＾）；　typo?

   返信

   1. うっわー…恥ずかしー＞＜
      修正しました！
      ご指摘ありがとうございました。。。

      返信

7. あれ？？
   随分昔にコメントいただいている方がいる。。。
   すみません完全に見落としてましたorz
   ごめんなさい。。。

   返信

8. I really appreciate this post. I’ve been looking all over for this! Thank goodness I found it on Bing. You’ve made my day! Thanks again! kackcdgaeekd

   返信

9. 大変勉強になりました。少し変更させて頂き，mysqlから条件検索を行ってマップに表示させるデータを出力までは出来たのですが，更に検索フォームを追加して，条件を加えてやると，データベースを読み込めなくなりました・・・。サンプルコードの111行目でphpにデータを渡す必要があるのでしょうか？phpファイルで$KeyWord=htmlspecialchars($_GET[“用意した検索フォームのname”]);と追加するだけでは，$KeyWordに値は渡されないのでしょうか・・・ 少し説明がざっくりとなってしまい申し訳ありません。よろしければご教授下さいませ。

   返信

10. >tempaさま

    今頃気づいてすみません。
    書かれているように111行目にあるコードで、キワードデータをphpに渡してやる必要があります。

    keyword = $(“#キーワドテキストフィルドのID”).val();
    とかやって、入力されたキーワードを抽出して111行目を
    url: ‘xml.php?ne_lat=’+map_ne_lat+’&sw_lat=’+map_sw_lat+’&ne_lng=’+map_ne_lng+’&sw_lng=’+map_sw_lng+’&keyword=’+keyword,
    とする感じでしょうか。

    ただこれだと、意図せずキーワード検索が実行されてしまうかもですので、仕様をもう少しツメる必要があるかもしれませんが^^;

    返信

11. 大変お世話になりました！
    ありがとうございました！
    お礼のみで失礼します！

    返信

12. 絶賛PHPとJSを使ってGoogleMapAPIを叩く機能を実装しているものです！
    何度もお世話になっております！
    ありがとうございます！

    返信

13. こちらの記事のおかげで機能を実装することができました！
    ありがとうございます！

    返信

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。