Downloaded 10 times
![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);](https://image.slidesharecdn.com/html5canvasgooglemapsapi-111202224118-phpapp01/85/Html5-canvas-google-maps-api-11-320.jpg)
![var canvas = $(“canvas”)[0];
var context =
canvas.getContext(“2d”)
context.drawImage(
img, 0, 0, width, height,
dx, dy, width, height);](https://image.slidesharecdn.com/html5canvasgooglemapsapi-111202224118-phpapp01/85/Html5-canvas-google-maps-api-29-320.jpg)
![var canvas = $(“canvas”)[0];
var context =
canvas.getContext(“2d”);
/* ここで何か描画 */
var url =
canvas.toDataURL(“image/png”);
$(“a#download”).attr(“href”, url);](https://image.slidesharecdn.com/html5canvasgooglemapsapi-111202224118-phpapp01/85/Html5-canvas-google-maps-api-32-320.jpg)
![<?php
$userAgents = array(/* 中略 */);
$baseUrl =
"http://maps.google.com/maps/api/staticmap?";
$url = $baseUrl . $_SERVER['QUERY_STRING'];
$userAgent =
$userAgents[mt_rand(0, count($userAgents) - 1)];
/* 続く */](https://image.slidesharecdn.com/html5canvasgooglemapsapi-111202224118-phpapp01/85/Html5-canvas-google-maps-api-37-320.jpg)
![/* 続き */
$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);
/* 続く */](https://image.slidesharecdn.com/html5canvasgooglemapsapi-111202224118-phpapp01/85/Html5-canvas-google-maps-api-38-320.jpg)
![[2011.09.17 Nagoya.pm #01]●●●でPerl](https://cdn.slidesharecdn.com/ss_thumbnails/perl-110916201008-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![[LT]UMLとCloudのススメ SP1](https://cdn.slidesharecdn.com/ss_thumbnails/ltumlcloud-sp1-101212032638-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[第38回FLOSS桜山勉強会]貧乏人のための仮想化Tips](https://cdn.slidesharecdn.com/ss_thumbnails/38flosstips-100521045034-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Html5 canvasとgoogle maps apiで遊んでみた
- 1. HTML5 canvasと Google MapsAPIで 遊んでみた はてな Id:babydaemons Twitter babydaemons
- 2. 自己紹介 ・ 35歳、妻一人、男の子一人 ・ 組込系・制御系から オープン系・業務系までこなす ホントはWeb系がやりたいPG/SE ・ 中小企業ブラックから 中堅企業ブラックへ転職： →エイチームさんには落ちましたorz ・ Perfume “JPN”がマイブーム
- 3. Agenda ・ そもそも何作ったのさ?? ・ Google Maps APIの情報は?? ・ Google Mapsを組み込むには?? ・ 地図上の座標を取得するには?? ・ 指定座標の地図を取得するには?? ・ 取得した地図を貼り合わせるには?? ・ 貼りあわせた地図を保存するには?? ・ その他、バッドノウハウ
- 4. Agenda ・ そもそも何作ったのさ?? ・ Google Maps APIの情報は?? ・ Google Mapsを組み込むには?? ・ 地図上の座標を取得するには?? ・ 指定座標の地図を取得するには?? ・ 取得した地図を貼り合わせるには?? ・ 貼りあわせた地図を保存するには?? ・ その他、バッドノウハウ
- 5.
- 6. Agenda ・ そもそも何作ったのさ?? ・ Google Maps APIの情報は?? ・ Google Mapsを組み込むには?? ・ 地図上の座標を取得するには?? ・ 指定座標の地図を取得するには?? ・ 取得した地図を貼り合わせるには?? ・ 貼りあわせた地図を保存するには?? ・ その他、バッドノウハウ
- 7. http://code.google.com/ intl/ja/apis/maps/ 日本語情報完備！
- 8. 今回使うのは： ・ Maps JavaScriptAPI ・ Static Maps API
- 9. Agenda ・ そもそも何作ったのさ?? ・ Google Maps APIの情報は?? ・ Google Mapsを組み込むには?? ・ 地図上の座標を取得するには?? ・ 指定座標の地図を取得するには?? ・ 取得した地図を貼り合わせるには?? ・ 貼りあわせた地図を保存するには?? ・ その他、バッドノウハウ
- 10.
- 11. 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);
- 12. Agenda ・ そもそも何作ったのさ?? ・ Google Maps APIの情報は?? ・ Google Mapsを組み込むには?? ・ 地図上の座標を取得するには?? ・ 指定座標の地図を取得するには?? ・ 取得した地図を貼り合わせるには?? ・ 貼りあわせた地図を保存するには?? ・ その他、バッドノウハウ
- 13.
- 14.
- 15. しょうがないので ググりましたw http://www.mwsoft.jp/ programming/googlemap/ google_map_v3_custom_overlay.html
- 16. OverlayViewを 継承して、 オレオレマーカーを 作るしか無いっぽい。
- 17. function BoundsMarker(map, latLng){ this._latLng = latLng; this.setMap(map); } BoundsMarker.prototype = new google.maps.OverlayView();
- 18. オレオレマーカーの インスタンスを作れば、 それから取得できる。 var projection = marker.getProjection();
- 19. Agenda ・ そもそも何作ったのさ?? ・ Google Maps APIの情報は?? ・ Google Mapsを組み込むには?? ・ 地図上の座標を取得するには?? ・ 指定座標の地図を取得するには?? ・ 取得した地図を貼り合わせるには?? ・ 貼りあわせた地図を保存するには?? ・ その他、バッドノウハウ
- 20. 今回使うのは： ・ Maps JavaScriptAPI ・ Static Maps API
- 21. 使用制限 ・ 1人の閲覧者が1日にリクエスト できるユニークな（一意の）画像は 1000 件まで!! ・ 24 時間内の制限を超えた場合や サービスを不正に使用した場合は 一時的に機能しなくなる!! ・ 制限を超える日が続くと アクセスがブロックされる!!
- 22. エンドポイントにパラメータを 指定してGETする： ・ sensor GPSから取得? ・ center 地図の中心座標 ・ size 地図のサイズ(pixel) ・ zoom ズームレベル ...etc http://maps.google.com/maps/api/staticmap
- 23. OverlayViewを 継承して、 オレオレマーカーを 作るしか無いっぽい。
- 24. var img =new Image(); var url = endpoint + "?" + params.join("&"); img.onload = function() { /* 画像取得後の処理 */ } img.url = url;
- 25. オレオレマーカーの インスタンスを作れば、 それから取得できる。 var projection = marker.getProjection();
- 26. Agenda ・ そもそも何作ったのさ?? ・ Google Maps APIの情報は?? ・ Google Mapsを組み込むには?? ・ 地図上の座標を取得するには?? ・ 指定座標の地図を取得するには?? ・ 取得した地図を貼り合わせるには?? ・ 貼りあわせた地図を保存するには?? ・ その他、バッドノウハウ
- 27.
- 28.
- 29. var canvas =$(“canvas”)[0]; var context = canvas.getContext(“2d”) context.drawImage( img, 0, 0, width, height, dx, dy, width, height);
- 30. Agenda ・ そもそも何作ったのさ?? ・ Google Maps APIの情報は?? ・ Google Mapsを組み込むには?? ・ 地図上の座標を取得するには?? ・ 指定座標の地図を取得するには?? ・ 取得した地図を貼り合わせるには?? ・ 貼りあわせた地図を保存するには?? ・ その他、バッドノウハウ
- 31.
- 32. var canvas =$(“canvas”)[0]; var context = canvas.getContext(“2d”); /* ここで何か描画 */ var url = canvas.toDataURL(“image/png”); $(“a#download”).attr(“href”, url);
- 33. ただし、 toDataURL()には セキュリテイ上の 使用制限がある!!
- 34. それは： HTMLやJavaScriptの ダウンロード元と、 画像ファイルのダウンロード元が 一致している必要がある。 ※画像が盗めちゃうから
- 35.
- 36. localhostにサーバ立てて HTMLとJavaScriptと StaticMaps Wrapperを そこに置けば解決w
- 37. <?php $userAgents = array(/*中略 */); $baseUrl = "http://maps.google.com/maps/api/staticmap?"; $url = $baseUrl . $_SERVER['QUERY_STRING']; $userAgent = $userAgents[mt_rand(0, count($userAgents) - 1)]; /* 続く */
- 38. /* 続き */ $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); /* 続く */
- 39. /* 続き */ $wanted= "Content-Type: "; foreach ($http_response_header as $http_header) { if (stripos($http_header, $wanted, 0) == 0) { header($http_header); } } fclose($handle); echo $contents; ?>
- 40. Agenda ・ そもそも何作ったのさ?? ・ Google Maps APIの情報は?? ・ Google Mapsを組み込むには?? ・ 地図上の座標を取得するには?? ・ 指定座標の地図を取得するには?? ・ 取得した地図を貼り合わせるには?? ・ 貼りあわせた地図を保存するには?? ・ その他、バッドノウハウ
- 41. Static Maps APIの 制限を掻い潜らなければ ならない!!
- 42.
- 43.
- 44.
- 45.