Enviar pesquisa
Carregar
Html5 canvasとgoogle maps apiで遊んでみた
•
0 gostou
•
4,118 visualizações
真吾 森
Seguir
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 45
Baixar agora
Baixar para ler offline
Recomendados
D3.jsと学ぶVisualization(可視化)の世界
D3.jsと学ぶVisualization(可視化)の世界
AdvancedTechNight
Gdg geo2
Gdg geo2
Kentaro Ishimaru
Wikipediaで位置情報のテキストマインニングっぽいことをやってみた 20121208
Wikipediaで位置情報のテキストマインニングっぽいことをやってみた 20121208
真吾 森
Dart flightschool cloudendpoint with dart
Dart flightschool cloudendpoint with dart
啓介 大橋
Googlemaps tutorial
Googlemaps tutorial
Hiroki Kouchi
Geo x html5 on MapsAPI three minutes cooking
Geo x html5 on MapsAPI three minutes cooking
Kentaro Ishimaru
Webteko#10 GoogleMaps
Webteko#10 GoogleMaps
だいすけ ふるかわ
日本Androidの会のハンズオンセミナー資料(20130315)
日本Androidの会のハンズオンセミナー資料(20130315)
eijikushida
Recomendados
D3.jsと学ぶVisualization(可視化)の世界
D3.jsと学ぶVisualization(可視化)の世界
AdvancedTechNight
Gdg geo2
Gdg geo2
Kentaro Ishimaru
Wikipediaで位置情報のテキストマインニングっぽいことをやってみた 20121208
Wikipediaで位置情報のテキストマインニングっぽいことをやってみた 20121208
真吾 森
Dart flightschool cloudendpoint with dart
Dart flightschool cloudendpoint with dart
啓介 大橋
Googlemaps tutorial
Googlemaps tutorial
Hiroki Kouchi
Geo x html5 on MapsAPI three minutes cooking
Geo x html5 on MapsAPI three minutes cooking
Kentaro Ishimaru
Webteko#10 GoogleMaps
Webteko#10 GoogleMaps
だいすけ ふるかわ
日本Androidの会のハンズオンセミナー資料(20130315)
日本Androidの会のハンズオンセミナー資料(20130315)
eijikushida
Hadoop事始め
Hadoop事始め
You&I
Geolocation2
Geolocation2
Jun Chiba
Qtiles plugin for QGIS
Qtiles plugin for QGIS
Hideo Harada
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
Unity Technologies Japan K.K.
Yolp30分クッキング 2012北海道
Yolp30分クッキング 2012北海道
Yahoo!デベロッパーネットワーク
災害監視無人機システムと 災害監視無人機システムとFOSS4Gとの関わり ((独)宇宙航空研究開発機構 都甲 様)
災害監視無人機システムと 災害監視無人機システムとFOSS4Gとの関わり ((独)宇宙航空研究開発機構 都甲 様)
OSgeo Japan
ArcGISの便利な印刷周りの機能に、QGIS APIを駆使して挑んでみたお話
ArcGISの便利な印刷周りの機能に、QGIS APIを駆使して挑んでみたお話
Kosuke Asahi
Lecuture on Deep Learning API
Lecuture on Deep Learning API
Naoki Watanabe
Angular js はまりどころ
Angular js はまりどころ
Ayumi Goto
WWW2017論文読み会 Information Cascades と Graph Algorithms
WWW2017論文読み会 Information Cascades と Graph Algorithms
cyberagent
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
Atsushi Tadokoro
asm.jsとWebAssemblyって実際なんなの?
asm.jsとWebAssemblyって実際なんなの?
Yosuke Onoue
俺とシビックテックとDiy
俺とシビックテックとDiy
Masayuki KaToH
Google mapとgps機能を使ってみた。
Google mapとgps機能を使ってみた。
Eiichi Tsuru
LeafletでWebGIS入門
LeafletでWebGIS入門
Yasunori Kirimoto
Trat sprint6
Trat sprint6
tratwakate
Webアプリケーション開発での位置情報活用
Webアプリケーション開発での位置情報活用
Masakazu Muraoka
Gaelyk
Gaelyk
Kiyotaka Oku
JavaScriptでいいじゃなイカ
JavaScriptでいいじゃなイカ
Yuuichi Akagawa
スマホにおけるWebGL入門
スマホにおけるWebGL入門
Yohta Kanke
Money forwardとりそなVISAデビットの関係を良くしたい
Money forwardとりそなVISAデビットの関係を良くしたい
真吾 森
最底辺から送る目指せ最底辺の振り返り #-0.5
最底辺から送る目指せ最底辺の振り返り #-0.5
真吾 森
Mais conteúdo relacionado
Semelhante a Html5 canvasとgoogle maps apiで遊んでみた
Hadoop事始め
Hadoop事始め
You&I
Geolocation2
Geolocation2
Jun Chiba
Qtiles plugin for QGIS
Qtiles plugin for QGIS
Hideo Harada
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
Unity Technologies Japan K.K.
Yolp30分クッキング 2012北海道
Yolp30分クッキング 2012北海道
Yahoo!デベロッパーネットワーク
災害監視無人機システムと 災害監視無人機システムとFOSS4Gとの関わり ((独)宇宙航空研究開発機構 都甲 様)
災害監視無人機システムと 災害監視無人機システムとFOSS4Gとの関わり ((独)宇宙航空研究開発機構 都甲 様)
OSgeo Japan
ArcGISの便利な印刷周りの機能に、QGIS APIを駆使して挑んでみたお話
ArcGISの便利な印刷周りの機能に、QGIS APIを駆使して挑んでみたお話
Kosuke Asahi
Lecuture on Deep Learning API
Lecuture on Deep Learning API
Naoki Watanabe
Angular js はまりどころ
Angular js はまりどころ
Ayumi Goto
WWW2017論文読み会 Information Cascades と Graph Algorithms
WWW2017論文読み会 Information Cascades と Graph Algorithms
cyberagent
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
Atsushi Tadokoro
asm.jsとWebAssemblyって実際なんなの?
asm.jsとWebAssemblyって実際なんなの?
Yosuke Onoue
俺とシビックテックとDiy
俺とシビックテックとDiy
Masayuki KaToH
Google mapとgps機能を使ってみた。
Google mapとgps機能を使ってみた。
Eiichi Tsuru
LeafletでWebGIS入門
LeafletでWebGIS入門
Yasunori Kirimoto
Trat sprint6
Trat sprint6
tratwakate
Webアプリケーション開発での位置情報活用
Webアプリケーション開発での位置情報活用
Masakazu Muraoka
Gaelyk
Gaelyk
Kiyotaka Oku
JavaScriptでいいじゃなイカ
JavaScriptでいいじゃなイカ
Yuuichi Akagawa
スマホにおけるWebGL入門
スマホにおけるWebGL入門
Yohta Kanke
Semelhante a Html5 canvasとgoogle maps apiで遊んでみた
(20)
Hadoop事始め
Hadoop事始め
Geolocation2
Geolocation2
Qtiles plugin for QGIS
Qtiles plugin for QGIS
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
Yolp30分クッキング 2012北海道
Yolp30分クッキング 2012北海道
災害監視無人機システムと 災害監視無人機システムとFOSS4Gとの関わり ((独)宇宙航空研究開発機構 都甲 様)
災害監視無人機システムと 災害監視無人機システムとFOSS4Gとの関わり ((独)宇宙航空研究開発機構 都甲 様)
ArcGISの便利な印刷周りの機能に、QGIS APIを駆使して挑んでみたお話
ArcGISの便利な印刷周りの機能に、QGIS APIを駆使して挑んでみたお話
Lecuture on Deep Learning API
Lecuture on Deep Learning API
Angular js はまりどころ
Angular js はまりどころ
WWW2017論文読み会 Information Cascades と Graph Algorithms
WWW2017論文読み会 Information Cascades と Graph Algorithms
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
asm.jsとWebAssemblyって実際なんなの?
asm.jsとWebAssemblyって実際なんなの?
俺とシビックテックとDiy
俺とシビックテックとDiy
Google mapとgps機能を使ってみた。
Google mapとgps機能を使ってみた。
LeafletでWebGIS入門
LeafletでWebGIS入門
Trat sprint6
Trat sprint6
Webアプリケーション開発での位置情報活用
Webアプリケーション開発での位置情報活用
Gaelyk
Gaelyk
JavaScriptでいいじゃなイカ
JavaScriptでいいじゃなイカ
スマホにおけるWebGL入門
スマホにおけるWebGL入門
Mais de 真吾 森
Money forwardとりそなVISAデビットの関係を良くしたい
Money forwardとりそなVISAデビットの関係を良くしたい
真吾 森
最底辺から送る目指せ最底辺の振り返り #-0.5
最底辺から送る目指せ最底辺の振り返り #-0.5
真吾 森
[2011.09.17 Nagoya.pm #01]●●●でPerl
[2011.09.17 Nagoya.pm #01]●●●でPerl
真吾 森
[LT]UMLとCloudのススメ SP1
[LT]UMLとCloudのススメ SP1
真吾 森
いろんなCRuby on windows
いろんなCRuby on windows
真吾 森
[第38回FLOSS桜山勉強会]貧乏人のための仮想化Tips
[第38回FLOSS桜山勉強会]貧乏人のための仮想化Tips
真吾 森
Mais de 真吾 森
(6)
Money forwardとりそなVISAデビットの関係を良くしたい
Money forwardとりそなVISAデビットの関係を良くしたい
最底辺から送る目指せ最底辺の振り返り #-0.5
最底辺から送る目指せ最底辺の振り返り #-0.5
[2011.09.17 Nagoya.pm #01]●●●でPerl
[2011.09.17 Nagoya.pm #01]●●●でPerl
[LT]UMLとCloudのススメ SP1
[LT]UMLとCloudのススメ SP1
いろんなCRuby on windows
いろんなCRuby on windows
[第38回FLOSS桜山勉強会]貧乏人のための仮想化Tips
[第38回FLOSS桜山勉強会]貧乏人のための仮想化Tips
Html5 canvasとgoogle maps apiで遊んでみた
1.
HTML5 canvasと Google Maps
APIで 遊んでみた はてな 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.
Demo
6.
Agenda ・
そもそも何作ったのさ?? ・ Google Maps APIの情報は?? ・ Google Mapsを組み込むには?? ・ 地図上の座標を取得するには?? ・ 指定座標の地図を取得するには?? ・ 取得した地図を貼り合わせるには?? ・ 貼りあわせた地図を保存するには?? ・ その他、バッドノウハウ
7.
http://code.google.com/
intl/ja/apis/maps/ 日本語情報完備!
8.
今回使うのは: ・ Maps JavaScript
API ・ Static Maps API
9.
Agenda ・
そもそも何作ったのさ?? ・ Google Maps APIの情報は?? ・ Google Mapsを組み込むには?? ・ 地図上の座標を取得するには?? ・ 指定座標の地図を取得するには?? ・ 取得した地図を貼り合わせるには?? ・ 貼りあわせた地図を保存するには?? ・ その他、バッドノウハウ
10.
とても簡単。 指定した<div>要素を APIに渡すだけ。
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.
こいつを使えばよいっぽい↓ MapCanvasProjectionクラス: ・ fromLatLngToDivPixel() ・ fromDivPixelToLatLng()
14.
だけど、 このインスタンスを 取得する方法が 判らない。orz
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 JavaScript
API ・ 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.
HTML5 <canvas> ペイントやGIMPみたいな ドロー系ソフトっぽい機能を JavaScript APIで提供
28.
超絶参考 http://www.html5.jp/canvas/
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.
<canvas>のAPI: toDataURL()
を使う
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と Static
Maps 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.
その1: User-Agentを ランダム化する
44.
その2: Query Stringの 順序をランダム化する
45.
その3: 座標の走査順序を ランダム化する
Baixar agora