Google Maps API v3 で GeoRSS フィードを表示する必要があります。このフィードは、次の手順で作成されます。
- ユーザーがキーワードを入力する
- PHP コードのおかげで、RSS ファイルは、3 つの異なる既存の RSS フィードからキーワードを含むニュース項目を取得して作成されます。
- この RSS ファイルのリンクは、Metacarta RSS Geotagger サービス ( http://labs.metacarta.com/rss-geotagger/ )に提供されています。
- 取得した GeoRSS ファイルも KML ファイルに変換する必要があります (KmlLayer 関数の引数として GeoRSS へのリンクを指定すると、Google マップは海にズームインします)。そのために、geonames.org の GeoRSS から KML へのコンバーターを使用しています。
- 結果の URL は、KmlLayer 関数の引数として渡されます。
私の最初の試みでは、すべてうまくいきました。しかし、新しいキーワードを入力すると、Google マップは前のキーワードで試したマーカーを表示しました。新しい KML レイヤーが表示されるまでに 15 分近くかかりました (もちろん、Web ブラウザーの [更新] ボタンをクリックした後です)。この問題を解決して、新しいキーワードを入力した直後に変更された GeoRSS フィードがマップに表示されるようにする方法はありますか?
新規ユーザーのハイパーリンク数に制限があるため、ここにソースコードを入力します。ここからファイルにアクセスできます: http://denizseeu.comule.com/ 私が使用しているファイルは、home.html、my_rss.php、rss.xml、および map.html です。
home.html - キーワードの入力と確認に使用される最初のページ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home</title>
<style type="text/css">
#keyword
{
color:grey;
font: italic 12pt Arial;
}
</style>
</head>
<body>
<form name ="form1" method ="POST" action = "my_rss.php">
<input type="Text" onblur="if(this.value=='') { this.value='Enter keyword'; this.style.color='grey'; this.style.font='italic 12pt Arial'; }" onfocus="if(this.value=='Enter keyword') { this.value=''; this.style.color='#111111'; this.style.font='normal 12pt Arial'; }" value="Enter keyword" name="keyword" id="keyword">
<input type="Submit" name="Submit1" value= "Show news on map" />
</form>
</body>
</html>
my_rss.php - RSS ファイルを作成する PHP ファイル
<html>
<head>
<title>Redirecting...</title>
<meta http-equiv="refresh" content="0;URL=map.html">
</head>
<body>
<?php
$keyword = $_POST['keyword'];
$URL = array("http://www.nytimes.com/services/xml/rss/nyt/GlobalHome.xml","http://feeds.bbci.co.uk/news/world/rss.xml?edition=uk","http://rss.cnn.com/rss/edition.rss");
$output = "
<rss version=\"2.0\">
<channel>
<title>RSS collection</title>
";
for($y=0;$y<count($URL);$y++)
{
$rss[$y] = simplexml_load_file($URL[$y]);
foreach ($rss[$y]->channel->item as $item)
{
if(preg_match("/".$keyword."/",$item->title,$result))
{
$output .= "
<item>
<title>". $item->title ."</title>
<description>". $item->description ."</description>
<link>";
$link=$item->link;
$link = str_replace('&', '&', $link);
$output .= $link ."</link>
</item>
";
}
}
}
$output .= "</channel></rss>";
header ('Content-type: text/html; charset=utf-8');
echo $output;
$xml = "rss.xml";
$file = fopen($xml, 'w') or die("can't open file");
fwrite($file, $output);
fclose($file);
?>
</body>
</html>
map.html - Google Maps API を使用した Web ページ
<!DOCTYPE html>
<html>
<head>
<title>Welcome to my GeoRSS map</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<style type="text/css">
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var initial_point = new google.maps.LatLng(42.02,20.97);
function initialize() {
var myOptions = {
zoom: 2,
center: initial_point,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var geoRSS = new google.maps.KmlLayer('http://ws.geonames.org/rssToGeoRSS?type=kml&feedUrl=http%3A%2F%2Flabs.metacarta.com%2Frss-geotagger%2Ftag%2F%3Furl%3Dhttp%253A%252F%252Fdenizseeu.comule.com%252Frss.xml');
geoRSS.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>