ずいぶん時間が経ちましたが、続きです。
- 地図の表示と緯度経度の取得[GoogleMapsAPIVersion3]
- マーカーと情報ウィンドウの表示と削除[GoogleMapsAPIVersion3]
- XMLを読み込んでマーカーを表示する[jQuery]+[GoogleMapsAPIVersion3]
- 表示されているマーカーのリストを表示する[jQuery]+[GoogleMapsAPIVersion3]
- リストをクリックしたら情報ウィンドウを表示する[jQuery]+[GoogleMapsAPIVersion3]
前回までの作り込みでだいたいできましたが、本番で使うにはちょっと問題があります。
それはマーカーの数。
今は20個ほどですが、本来の用途では10,000弱あります。
10,000もマーカーなんかつけたら、重くて使いものになりません。（たぶん）
PCスペックによってはフリーズしてしまいそうです。
なので、ちょっと仕様変更をしなければいけません。
現在表示されている範囲内のマーカーだけ表示するようにします。
具体的には、表示範囲の緯度経度をサーバーサイドのプログラムに送り込んで、プログラムから範囲内に収まっている地点データのみXMLで返します。
そして、縮尺や移動などで地図が変更されたらマーカーを描画しなおすようにします。
特定の範囲内にある地点をXMLで返すサーバーサイドプログラム
これは簡単にPHPで作ってしまいます。
地図の東端、西端、南端、北端の緯度経度をGETでもらう前提で、さくっと作ります。
<?php
//地点データ
$locate_ary = array(
0 => 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 '<?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 "<lat>".$val["lat"]."</lat>";
echo "<lng>".$val["lng"]."</lng>";
echo "<name>".$val["name"]."</name>";
echo "</Locate>";
}
}
echo "</Locations>\n";
?>
本番では地点データはDBに格納されているのですが、サンプルなので手抜きです。
とりあえず配列に入れてハンドリングします。
これを xml.php という名前でぶち込んでおきます。
あ、
header('Content-type: text/xml; charset=utf-8');
私はこれを入れ忘れて、すこしハマりました。
ちゃんとヘッダーはきだしておかないと、読み込みに失敗します。
初歩の初歩ですが…見事に忘れたので白状しておきます。
地図が変更されたらマーカーをクリアして表示しなおす
今まではボタンクリックでマーカーを表示していましたが、今回の要件を満たすには、地図が変更されたらリアルタイムに処理される必要があります。
やり方は簡単。
function initialize() の最後にイベント登録を追加。
google.maps.event.addListener(map, 'bounds_changed', function(){
renew_bounds();
});
こんな感じですね。
この場合、renew_bounds() が呼ばれます。
ただし！、’bounds_changed’だとマウスでドラッグ中、1pxでも動くとイベントが発生してしまいます。
この調子でサーバへリクエストなんか投げたら、ちょっとしたDos攻撃になりそうなので、
google.maps.event.addListener(map, 'idle', function(){
renew_bounds();
});
にすると吉。
ドラッグ完了して、地図表示領域が確定すると呼んでくれます。
(2013.1.8 タイプミス修正orz ‘idol’>’idle’)
最終的にfunction initialize()はこんな感じになります。
ついでに今までえらい広域マップになっていたので、すこし調節します。
function initialize() {
var latlng = new google.maps.LatLng(34.985458, 135.757755);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//イベント登録 地図の表示領域が変更されたらイベントを発生させる
google.maps.event.addListener(map, 'idle', function(){
setPointMarker();
});
}
4行目の zoom の値を 8→15 に変更。
これで、地図が変更されたら setPointMarker() が呼ばれます。
最後の仕上げは、setPointMarker()の中で、xml.phpに現在表示中の地図の端の緯度経度データを渡す部分。
なんら問題ありません。
地図の表示と緯度経度の取得[GoogleMapsAPIVersion3]でも描いた、map.getBounds()を使えばバッチリです。
さっさと書きます。
//XMLで取得した地点を地図上でマーカーに表示
function setPointMarker(){
//リストの内容を削除
$('#pointlist > ul').empty();
//マーカー削除
MarkerClear();
//地図の範囲内を取得
var bounds = map.getBounds();
map_ne_lat = bounds.getNorthEast().lat();
map_sw_lat = bounds.getSouthWest().lat();
map_ne_lng = bounds.getNorthEast().lng();
map_sw_lng = bounds.getSouthWest().lng();
//XML取得
$.ajax({
url: 'xml.php?ne_lat='+map_ne_lat+'&sw_lat='+map_sw_lat+'&ne_lng='+map_ne_lng+'&sw_lng='+map_sw_lng,
type: 'GET',
dataType: 'xml',
timeout: 1000,
error: function(){
alert("情報の読み込みに失敗しました");
},
success: function(xml){
//帰ってきた地点の数だけループ
$(xml).find("Locate").each(function(){
var LocateLat = $("lat",this).text();
var LocateLng = $("lng",this).text();
var LocateName = $("name",this).text();
//マーカーをセット
MarkerSet(LocateLat,LocateLng,LocateName);
//リスト表示
//リストに対応するマーカー配列キーをセット
var marker_num = marker_ary.length - 1;
//liとaタグをセット
loc = $('<li>').append($('<a href="javascript:void(0)"/>').text(LocateName));
//セットしたタグにイベント「マーカーがクリックされた」をセット
loc.bind('click', function(){
google.maps.event.trigger(marker_ary[marker_num], 'click');
});
//リスト表示
$('#pointlist > ul').append(loc);
});
}
});
}
最後に、用済みになった「地点データを読み込む」ボタンは削除しておきます。
完成したコードがこちら。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var marker_ary = new Array();
var currentInfoWindow
function initialize() {
var latlng = new google.maps.LatLng(34.985458, 135.757755);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//イベント登録 地図の表示領域が変更されたらイベントを発生させる
google.maps.event.addListener(map, 'idle', function(){
setPointMarker();
});
}
//地図中央の緯度経度を表示
function getMapcenter() {
//地図中央の緯度経度を取得
var mapcenter = map.getCenter();
//テキストフィールドにセット
document.getElementById("keido").value = mapcenter.lng();
document.getElementById("ido").value = mapcenter.lat();
}
//地図の中央にマーカー
function setMarker() {
var mapCenter = map.getCenter();
//マーカー削除
MarkerClear();
//マーカー表示
MarkerSet(mapCenter.lat(),mapCenter.lng(),'test');
}
//マーカー削除
function MarkerClear() {
//表示中のマーカーがあれば削除
if(marker_ary.length > 0){
//マーカー削除
for (i = 0; i < marker_ary.length; i++) {
marker_ary[i].setMap();
}
//配列削除
for (i = 0; i <= marker_ary.length; i++) {
marker_ary.shift();
}
}
}
function MarkerSet(lat,lng,text){
var marker_num = marker_ary.length;
var marker_position = new google.maps.LatLng(lat,lng);
var markerOpts = {
map: map,
position: marker_position
};
marker_ary[marker_num] = new google.maps.Marker(markerOpts);
//textが渡されていたらふきだしをセット
if(text.length>0){
var infoWndOpts = {
content : text
};
var infoWnd = new google.maps.InfoWindow(infoWndOpts);
google.maps.event.addListener(marker_ary[marker_num], "click", function(){
//先に開いた情報ウィンドウがあれば、closeする
if (currentInfoWindow) {
currentInfoWindow.close();
}
//情報ウィンドウを開く
infoWnd.open(map, marker_ary[marker_num]);
//開いた情報ウィンドウを記録しておく
currentInfoWindow = infoWnd;
});
}
}
//XMLで取得した地点を地図上でマーカーに表示
function setPointMarker(){
//リストの内容を削除
$('#pointlist > ul').empty();
//マーカー削除
MarkerClear();
//地図の範囲内を取得
var bounds = map.getBounds();
map_ne_lat = bounds.getNorthEast().lat();
map_sw_lat = bounds.getSouthWest().lat();
map_ne_lng = bounds.getNorthEast().lng();
map_sw_lng = bounds.getSouthWest().lng();
//XML取得
$.ajax({
url: 'xml.php?ne_lat='+map_ne_lat+'&sw_lat='+map_sw_lat+'&ne_lng='+map_ne_lng+'&sw_lng='+map_sw_lng,
type: 'GET',
dataType: 'xml',
timeout: 1000,
error: function(){
alert("情報の読み込みに失敗しました");
},
success: function(xml){
//帰ってきた地点の数だけループ
$(xml).find("Locate").each(function(){
var LocateLat = $("lat",this).text();
var LocateLng = $("lng",this).text();
var LocateName = $("name",this).text();
//マーカーをセット
MarkerSet(LocateLat,LocateLng,LocateName);
//リスト表示
//リストに対応するマーカー配列キーをセット
var marker_num = marker_ary.length - 1;
//liとaタグをセット
loc = $('<li>').append($('<a href="javascript:void(0)"/>').text(LocateName));
//セットしたタグにイベント「マーカーがクリックされた」をセット
loc.bind('click', function(){
google.maps.event.trigger(marker_ary[marker_num], 'click');
});
//リスト表示
$('#pointlist > ul').append(loc);
});
}
});
}
</script>
</head>
<body onload="initialize()">
<div id="pointlist" style="width:20em;float:left;">
<ul>
<li>地点リスト</li>
</ul>
</div>
<div style="float:left;">
<div id="map_canvas" style="width:600px; height:600px"></div>
<div>
経度<input type="text" size="20" id="ido" value="" />
緯度<input type="text" size="20" id="keido" value="" />
<input type="button" value="地図中央の緯度経度" onclick="getMapcenter()" onkeypress="getMapcenter()" />
<div>
</div>
</body>
</html>
できました。
すんごい簡単に仕様変更できてしまいました。
すごいなぁGoogleMapsAPI。
19 comments on “現在表示されている範囲内のマーカーだけ表示する[GoogleMapsAPIVersion3]+[PHP]”
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”;
?>
上記のファイルを読みこもうとすると「情報の読み込みに失敗しました」とエラーがでます。
解決方法はありますか？
コメントありがとうございます。
えーっと、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側のパスに誤りがあると思われます。
古い記事ですがとても参考になりました。
ただ私も同様のエラー「情報の読み込みに失敗しました」が表示されます。
ソースはjqueryのパスを変更したぐらいです。
試行錯誤の結果判明した原因は「フォルダー名が日本語」だと上記エラーが出るようです。
今後同様のエラーで悩める方への情報としてコメントさせて頂きました。
ありがとうございます。
サーバー上で動作確認しました。
質問なんですが、
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の方もそのままで連動しますでしょうか？
見よう見まねで増やしては見たものの読込まなくなってしまいました。
難しそうですね。。。
コメントありがとうございます。
読み込まなくなってしまったのは、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を作っていくのは少し面倒ですが）。
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をはれればベストなんですが、サンプルも未だ見つからずな状態です。
がんばりますね！
コメントありがとうございます。
返信が遅くなりました。すみません。
独り言みたいな内容なのに、コメントをいただけると、モチベーション上がるのでありがたいです。
リンクをクリックしたら該当地点を中心としたMAPを表示させるだけだったら、サンプルのソースコードのままファイル名を「map.php」に変更し、13行目を
var latlng = new google.maps.LatLng(, );
にしてやると動きます。（本当は、引数の内容をちゃんと精査しないといけなかったり、色々やらんといかんですけど、とりあえず動きます。）
http://mspec.jp/sample/gmap/sp3/
こんな感じで…。
サンプルのようなサイトを作る場合は、データの持たせ方とか色々と考えないといけないですけど（データ量が少ないなら、CSVなどのテキストファイル、多くなったらMySQLなどのDBを考えます。）、MAP表示周りはこのエントリーの内容で一通り行けると思います、
お互い頑張りましょう！
私の前々回のコメントですが…。
ソースの一部が欠落してますね…。
正しくは
‘;
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”;
?>
です。
すみません。元も一応直しておきます。
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ファイルを直接読み込んだ場合のみマーカーの設置に成功しました。散々調べたのですが全く原因が分からないので何かアドバイス等ありましたらよろしくお願いします。
度々すいません。先ほどの補足です。ブラウザの実行画面で上記だとタグが表示されていませんが、実際にはちゃんと表示されています。
イベントリスナに登録するところのスニペットで、addListenerのイベント名が’idol’になっていますよ（＾＾）； typo?
うっわー…恥ずかしー＞＜
修正しました！
ご指摘ありがとうございました。。。
あれ？？
随分昔にコメントいただいている方がいる。。。
すみません完全に見落としてましたorz
ごめんなさい。。。
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
大変勉強になりました。少し変更させて頂き，mysqlから条件検索を行ってマップに表示させるデータを出力までは出来たのですが，更に検索フォームを追加して，条件を加えてやると，データベースを読み込めなくなりました・・・。サンプルコードの111行目でphpにデータを渡す必要があるのでしょうか？phpファイルで$KeyWord=htmlspecialchars($_GET[“用意した検索フォームのname”]);と追加するだけでは，$KeyWordに値は渡されないのでしょうか・・・ 少し説明がざっくりとなってしまい申し訳ありません。よろしければご教授下さいませ。
>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,
とする感じでしょうか。
ただこれだと、意図せずキーワード検索が実行されてしまうかもですので、仕様をもう少しツメる必要があるかもしれませんが^^;
大変お世話になりました！
ありがとうございました！
お礼のみで失礼します！
絶賛PHPとJSを使ってGoogleMapAPIを叩く機能を実装しているものです！
何度もお世話になっております！
ありがとうございます！
こちらの記事のおかげで機能を実装することができました！
ありがとうございます！