現状では情報ウインドウに特定の文字列を表示しているのみだが，ユーザーから受け取った場所を示す文字列「$word」を活用して，その場所固有の情報を表示するように各自工夫する事．
例)WebAPIの利用(2)を応用し，その地点の天気，最高/最低気温を表示
map_xmlParse2.php
<?php
$word = htmlspecialchars($_POST['word']);
$sensor = htmlspecialchars($_POST['sensor']);
$url = "http://maps.google.com/maps/api/geocode/xml";
$url .= "?address=".$word."&sensor=".$sensor;
$article = simplexml_load_file($url);
$lat = $article->result->geometry->location->lat;
$lng = $article->result->geometry->location->lng;
print<<<EOF
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Geocoding and Maps JavaScript API Example</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text
/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.3&sensor=true"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng($lat, $lng);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: '$word'
});
var contentStr = 'test';
var infowindow = new google.maps.InfoWindow({
content: contentStr,
size: new google.maps.Size(50, 50)
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker)
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
EOF;
?>
情報ウインドウに天気を表示する例
<?php
$word = htmlspecialchars($_POST['word']);
$sensor = htmlspecialchars($_POST['sensor']);
$url = "http://maps.google.com/maps/api/geocode/xml";
$url .= "?address=".$word."&sensor=".$sensor;
$article = simplexml_load_file($url);
$lat = $article->result->geometry->location->lat;
$lng = $article->result->geometry->location->lng;
// get weather
$url2 = "http://www.google.com/ig/api?weather=".$word;
$xml = simplexml_load_file($url2);
$city = $xml->weather->forecast_information->city->attributes();
$forecast_date = $xml->weather->forecast_information->forecast_date->attributes();
$unit_system = $xml->weather->forecast_information->unit_system->attributes();
$current_condition = $xml->weather->current_conditions->condition->attributes();
$temp_c = $xml->weather->current_conditions->temp_c->attributes();
$humidity = $xml->weather->current_conditions->humidity->attributes();
$current_icon = $xml->weather->current_conditions->icon->attributes();
$wind_condition = $xml->weather->current_conditions->wind_condition->attributes();
print<<<EOF
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Geocoding and Maps JavaScript API Example</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text
/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.3&sensor=true"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng($lat, $lng);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: '$word'
});
var contentStr = '$city($forecast_date)[$unit_system]<br />現在の状況：$current_condition<br />気温：$temp_c<br />湿度：$humidity<br /><img src="http://www.google.com$current_icon"><br />風向：$wind_condition';
var infowindow = new google.maps.InfoWindow({
content: contentStr,
size: new google.maps.Size(50, 50)
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker)
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
EOF;
?>
0 件のコメント:
コメントを投稿