そこではGoogle MapsへのリクエストURLを加工することで何とかしていましたが、
自作ウェブサーバからAPI経由でGoogle Mapsを呼び出し、
地図を表示する方がより便利なので作ってみました。
今のところ利用するのはGoogle Mapsだけなので
正確に言うと"マッシュアップ"ではないのかもしれませんが、
語感がかっこいいので"マッシュアップ"ということにしておきます。
基本は前回の環境を使いまわして、必要な部分だけ追加とします。
なおGoogleの開発者サイトの
[Google Maps API のライセンス]リンクの飛び先の
Google Maps API(for Business でない方)に書かれているように、
エンド ユーザーが自由にアクセスできる一般公開のサービスであれば
APIを利用してマッシュアップできます。
最初にAPIを利用できるようにします。
開発コンソールで[Create project]をクリックし、
[Google Maps JavaScript API v3]を"ON"に切り替えます。
次いで左ペインの[Credentials]をクリックし、[Create new Key]、[Browser Key]と押して
APIを利用するウェブサーバのurl(*はワイルドカード)を設定します。
[Create]によりAPI KEYが決定されます。
次はウェブサーバでコンテンツを作ります。
以下のような内容の"map.php"スクリプトファイルを
ウェブブラウザからアクセスできるように配置します。
<?
$fp=fopen("/tmp/location","r");
$pl=fgets($fp);
fclose($fp);
$l=explode(",",$pl);
?>
<html>
<head>
<title>map</title>
<meta http-equiv="refresh" content="10;URL=./">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=<API KEY>&sensor=false">
</script>
<script type="text/javascript">
function init() {
<?
printf(" var latlng = new google.maps.LatLng(".$l[0].",".$l[1].");\n");
?>
var opts = {
zoom: 18,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), opts);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
}
</script>
</head>
<body onload="init()">
<h1>map</h1>
<div id="map" style="width:80%; height:80%"></div>
</body>
</html>
ブラウザから"map.php"を開くと先に作成したAndroidアプリケーションが送信した位置に基づいて地図が表示されます。
くれぐれも第3者に位置がばれないように気をつけてください。
0 件のコメント:
コメントを投稿