Google Mapsをマッシュアップ

先日自分の位置を他人に知らせる方法を書きました。
そこでは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者に位置がばれないように気をつけてください。

広告