HTML5 canvasと

Google Maps APIで遊んでみた

はてな Id:babydaemonsTwitter babydaemons

自己紹介

・ 35歳、妻一人、男の子一人 ・ 組込系・制御系から

オープン系・業務系までこなす ホントはWeb系がやりたいPG/SE

・ 中小企業ブラックから 中堅企業ブラックへ転職： →エイチームさんには落ちましたorz

・ Perfume “JPN”がマイブーム

Agenda ・ そもそも何作ったのさ?? ・ Google Maps APIの情報は?? ・ Google Mapsを組み込むには?? ・ 地図上の座標を取得するには?? ・ 指定座標の地図を取得するには?? ・ 取得した地図を貼り合わせるには?? ・ 貼りあわせた地図を保存するには?? ・ その他、バッドノウハウ

Agenda ・ そもそも何作ったのさ?? ・ Google Maps APIの情報は?? ・ Google Mapsを組み込むには?? ・ 地図上の座標を取得するには?? ・ 指定座標の地図を取得するには?? ・ 取得した地図を貼り合わせるには?? ・ 貼りあわせた地図を保存するには?? ・ その他、バッドノウハウ

Demo

Agenda ・ そもそも何作ったのさ?? ・ Google Maps APIの情報は?? ・ Google Mapsを組み込むには?? ・ 地図上の座標を取得するには?? ・ 指定座標の地図を取得するには?? ・ 取得した地図を貼り合わせるには?? ・ 貼りあわせた地図を保存するには?? ・ その他、バッドノウハウ

http://code.google.com/intl/ja/apis/maps/

日本語情報完備！

今回使うのは： ・ Maps JavaScript API ・ Static Maps API

Agenda ・ そもそも何作ったのさ?? ・ Google Maps APIの情報は?? ・ Google Mapsを組み込むには?? ・ 地図上の座標を取得するには?? ・ 指定座標の地図を取得するには?? ・ 取得した地図を貼り合わせるには?? ・ 貼りあわせた地図を保存するには?? ・ その他、バッドノウハウ

とても簡単。指定した<div>要素を

APIに渡すだけ。

var center = new google.maps.LatLng(35.700000, 137.000000);

var mapOptions = { zoom: 5, center: center, mapTypeId: google.maps.MapTypeId.ROADMAP};

var map = new google.maps.Map($("#map")[0], mapOptions);

Agenda ・ そもそも何作ったのさ?? ・ Google Maps APIの情報は?? ・ Google Mapsを組み込むには?? ・ 地図上の座標を取得するには?? ・ 指定座標の地図を取得するには?? ・ 取得した地図を貼り合わせるには?? ・ 貼りあわせた地図を保存するには?? ・ その他、バッドノウハウ

こいつを使えばよいっぽい↓

MapCanvasProjectionクラス：

・ fromLatLngToDivPixel() ・ fromDivPixelToLatLng()

だけど、このインスタンスを取得する方法が判らない。orz

しょうがないのでググりましたwhttp://www.mwsoft.jp/

programming/googlemap/google_map_v3_custom_overlay.html

OverlayViewを継承して、

オレオレマーカーを作るしか無いっぽい。

function BoundsMarker(map, latLng) { this._latLng = latLng; this.setMap(map);}BoundsMarker.prototype = new google.maps.OverlayView();

オレオレマーカーのインスタンスを作れば、それから取得できる。

var projection = marker.getProjection();

Agenda ・ そもそも何作ったのさ?? ・ Google Maps APIの情報は?? ・ Google Mapsを組み込むには?? ・ 地図上の座標を取得するには?? ・ 指定座標の地図を取得するには?? ・ 取得した地図を貼り合わせるには?? ・ 貼りあわせた地図を保存するには?? ・ その他、バッドノウハウ

今回使うのは： ・ Maps JavaScript API ・ Static Maps API

使用制限 ・ 1人の閲覧者が1日にリクエスト

できるユニークな（一意の）画像は1000 件まで!!

・ 24 時間内の制限を超えた場合や サービスを不正に使用した場合は一時的に機能しなくなる!!

・ 制限を超える日が続くと アクセスがブロックされる!!

エンドポイントにパラメータを指定してGETする： ・ sensor GPSから取得? ・ center 地図の中心座標

・ size 地図のサイズ(pixel) ・ zoom ズームレベル

...etc

http://maps.google.com/maps/api/staticmap

OverlayViewを継承して、

オレオレマーカーを作るしか無いっぽい。

var img = new Image();var url = endpoint + "?" + params.join("&");img.onload = function() { /* 画像取得後の処理 */ }img.url = url;

オレオレマーカーのインスタンスを作れば、それから取得できる。

var projection = marker.getProjection();

Agenda ・ そもそも何作ったのさ?? ・ Google Maps APIの情報は?? ・ Google Mapsを組み込むには?? ・ 地図上の座標を取得するには?? ・ 指定座標の地図を取得するには?? ・ 取得した地図を貼り合わせるには?? ・ 貼りあわせた地図を保存するには?? ・ その他、バッドノウハウ

HTML5 <canvas>ペイントやGIMPみたいなドロー系ソフトっぽい機能をJavaScript APIで提供

超絶参考http://www.html5.jp/canvas/

var canvas = $(“canvas”)[0];var context = canvas.getContext(“2d”)context.drawImage( img, 0, 0, width, height, dx, dy, width, height);

Agenda ・ そもそも何作ったのさ?? ・ Google Maps APIの情報は?? ・ Google Mapsを組み込むには?? ・ 地図上の座標を取得するには?? ・ 指定座標の地図を取得するには?? ・ 取得した地図を貼り合わせるには?? ・ 貼りあわせた地図を保存するには?? ・ その他、バッドノウハウ

<canvas>のAPI：toDataURL()

を使う

var canvas = $(“canvas”)[0];var context = canvas.getContext(“2d”);

/* ここで何か描画 */

var url = canvas.toDataURL(“image/png”);$(“a#download”).attr(“href”, url);

ただし、toDataURL()には

セキュリテイ上の使用制限がある!!

それは：HTMLやJavaScriptの

ダウンロード元と、画像ファイルのダウンロード元が

一致している必要がある。

※画像が盗めちゃうから

ダメじゃん!!保存できないじゃん!!

localhostにサーバ立てて

HTMLとJavaScriptとStatic Maps Wrapperを

そこに置けば解決w

<?php$userAgents = array(/* 中略 */);

$baseUrl = "http://maps.google.com/maps/api/staticmap?";

$url = $baseUrl . $_SERVER['QUERY_STRING'];

$userAgent = $userAgents[mt_rand(0, count($userAgents) - 1)];

/* 続く */

/* 続き */

$opts = array( 'http' => array( 'method' => "GET", 'header' => "Accept-Language: " . $_SERVER['HTTP_ACCEPT_LANGUAGE'] . "\r\n" . "User-Agent: " . $userAgent . "\r\n" ));$context = stream_context_create($opts);$handle = fopen($url, "rb", false, $context);$contents = stream_get_contents($handle);

/* 続く */

/* 続き */

$wanted = "Content-Type: ";foreach ($http_response_header as $http_header) { if (stripos($http_header, $wanted, 0) == 0) { header($http_header); }}

fclose($handle);

echo $contents;?>

Agenda ・ そもそも何作ったのさ?? ・ Google Maps APIの情報は?? ・ Google Mapsを組み込むには?? ・ 地図上の座標を取得するには?? ・ 指定座標の地図を取得するには?? ・ 取得した地図を貼り合わせるには?? ・ 貼りあわせた地図を保存するには?? ・ その他、バッドノウハウ

Static Maps APIの制限を掻い潜らなければ

ならない!!

基本はコレ↓

その１:User-Agentをランダム化する

その2:Query Stringの

順序をランダム化する

その3:座標の走査順序を

ランダム化する