Html5 canvasとgoogle maps apiで遊んでみた

HTML5 canvasとGoogle Maps APIで遊んでみたはてな Id:babydaemons Twitter babydaemons

自己紹介・ 35歳、妻一人、男の子一人・組込系・制御系からオープン系・業務系までこなすホントはWeb系がやりたいPG/SE・中小企業ブラックから中堅企業ブラックへ転職： →エイチームさんには落ちましたorz・ Perfume “JPN”がマイブーム

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

http://code.google.com/ intl/ja/apis/maps/日本語情報完備！

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

とても簡単。指定した<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);

こいつを使えばよいっぽい↓MapCanvasProjectionクラス：・ fromLatLngToDivPixel()・ fromDivPixelToLatLng()

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

しょうがないのでググりましたw http://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();

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

使用制限・ 1人の閲覧者が1日にリクエストできるユニークな（一意の）画像は 1000 件まで!!・ 24 時間内の制限を超えた場合やサービスを不正に使用した場合は一時的に機能しなくなる!!・制限を超える日が続くとアクセスがブロックされる!!

エンドポイントにパラメータを指定してGETする：・ sensor GPSから取得?・ center 地図の中心座標・ size 地図のサイズ(pixel)・ zoom ズームレベル ...etchttp://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();

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);

<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] . "rn" . "User-Agent: " . $userAgent . "rn" ));$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;?>

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

基本はコレ↓

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

その2: Query Stringの順序をランダム化する

その3:座標の走査順序をランダム化する

Html5 canvasとgoogle maps apiで遊んでみた

by Shingo MORI on Dec 02, 2011

Accessibility

Upload Details

Usage Rights

2 Embeds 29

Statistics

Html5 canvasとgoogle maps apiで遊んでみた — Presentation Transcript

http://d.hatena.ne.jp	28
http://translate.googleusercontent.com	1