Q&A
noiseさん、度々の回答ありがとうございます！
そーなんですよねぇ。。。ストリートビューに切り替わる前の段階は容易に考え付くのですが、その後が問題なんです(><)
ストリートビューへの切り替えをOFFにすることも考えたのですが、それではせっかくgoogle map を使用している意味がなくなってくるんです。
はやり、難しいですねぇ。。。。
まず、自サイトにgoogle maps api v3 を使って地図を表示させ、ユーザーに自由に場所やズームレベルを変更してもらいます(※この時、地図上にマーカーを付けたり、ストリートビューに変更することも可能とします)。
そして、好きなタイミングでブラウザ上の「OK」ボタンを押すと、その地図をキャプチャして画像として取得する。というようなことをしたいのですが、この地図→画像変換をする良い方法が見つからずに困っております。。。最終的にはその画像をcanvasの背景画像として使用したいのですが、どなたか良い変換方法をご存知の方おられませんでしょうか？
宜しくお願いします。
【捕捉】
無理にキャプチャではなくても、たとえばKMLなどの形式で外部出力する方法でも構いません。
要件は、ユーザーが任意に変換させた地図情報を、(再度、サイトを開き直した時に)まったく同じ状態で再現出来ればそれでもOKです。
動的マップ→静的マップの完全変換などでも、情報お持ちの方おられたは、是非お願いしますm(__)m
回答5件
0
ベストアンサー
何度も失礼いたします。
正しいやり方かどうか怪しいですが、ストリートビューに切り替わってからの値取得方法をちょっと見つけましたので（＾_＾；）
とりあえず、getStreetView()で定義しておいて…
getVisible() でストリートビューが表示されているかどうか
getPosition() で座標
getPov() で視点情報（オブジェクト）
が取得できます。
サンプルHTML（かなり適当ですが…動確しています）
lang
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>TEST</title> 6 <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript" charset="UTF-8"></script> 7 8</head> 9<body> 10<div id="gmap" style="width : 500px; height : 500px;"></div> 11<input type='button' value='consoleに情報出力' onclick='test();'> 12<script type="text/javascript"> 13 var map = document.getElementById("gmap"); 14 var gmap; 15 var streetViewPanorama; 16 17 google.maps.event.addDomListener(window, 'load', function() { 18 var options = { 19 zoom: 16, 20 center: new google.maps.LatLng(35.686773, 139.68815), 21 mapTypeId: google.maps.MapTypeId.ROADMAP 22 }; 23 sv = new google.maps.Map(map, options); 24 streetViewPanorama = sv.getStreetView(); //とりあえず定義 25 streetViewPanorama.setVisible(false); //見えないよーに 26 }); 27 28 function test() { 29 console.log(streetViewPanorama.getVisible()); 30 console.log(streetViewPanorama.getPosition()); 31 console.log(streetViewPanorama.getPov()); 32 } 33</script> 34</body> 35</html>
お望みのことができるかどうかアレですが…GIS系好きなので応援しています。
投稿2015/06/15 07:14
総合スコア256
0
位置と縮尺だけであれば…
ボタンが押されたときに、中心点座標と縮尺を取得して記録する方法でいかがでしょうか。
中心座標の取得
lang
1center_latlng = 地図id.getCenter();
縮尺の取得
lang
1zoom_level = 地図id.getZoom();
値を（外部ファイル、DB、cookieなどで）何かしらクライアント情報と紐付けて記録し、再訪時に再現できるかと思われます。
追加マーカー情報など付与情報は、付与操作ごとに記録して再現…
ストリートビューに切り替わったアトは……思いつきませんでしたm(__)m
投稿2015/06/14 08:10
総合スコア256
0
google maps api v3でとは別の回答になりますが、
ガラケー用に地図を画像で表示させるためのGoogle Static Maps APIというのを以前に使ったことがあります。
今は使用できるか確認はしていません。
投稿2015/06/14 03:40
総合スコア90
回答ありがとうございます。
そうなんです、質問欄に記載させていただいた「静的マップ」とはgoogle maps api でいうところのstatic mapのことなんです。
通常のgoogle maps api v3 ←→ static map を完全に相互変換（モード変換のように）できると理想なんです(><)
0
水を差すような回答で申し訳ありません。
Google Mapをご利用になるのであれば、使用許諾にご留意ください。
Google 使用許諾
Google マップおよび Google Earth に関する使用許諾ガイドライン
https://www.google.co.jp/permissions/geoguidelines.html
オフラインでの使用: Google マップまたは Google Earth からの対象コンテンツを切り取る、またはその他の形でエクスポートする、またはオフラインでの使用のために保存することはできません。
対象および、用い方に問題なければ、失礼の段お詫び申し上げます。
投稿2015/06/14 01:13
総合スコア256
ご指摘ありがとうございます。
現在、取得したキャプチャをオフラインで使用することは考えておりませんが、オンラインでかつその場の一時的な使用に限定した場合でも、google maps api を使用して描画した地図をキャプチャするというそもそもの行為がライセンスに抵触するかという部分については十分留意し、必要な措置をとっていこうと考えております。
0
DOM要素をSVG画像に変換する事で、キャプチャできるようですが、制限が多い為、Mapでは使えないように思えます。
https://developer.mozilla.org/ja/docs/Web/HTML/Canvas/Drawing_DOM_objects_into_a_canvas
後はCanvasを使った描画ですが、親子関係があるとMapが動かなくなるようなので、これも使えないかもしれません。
http://lab.informarc.co.jp/javascript/canvas_meets_googlemaps.html
サーバーサイドを利用すれば、Webページ自体をキャプチャできますので、工夫次第で実現は可能かと思われます。
http://shobon.hatenablog.com/entry/2014/08/04/202726
もっとシンプルで簡単な実装方法があるかもしれませんが、思いつくものとしては以上になります。
投稿2015/06/13 23:39
総合スコア1464
回答ありがとうございます。
やはり、クロスドメインなところが難しいところですよね。。。
サーバーサイドでのキャプチャ取得も考えてみたのですが、ブラウザで地図がどのように表示されているのかを、正確にサーバーに伝えるのが難しいため、何とかブラウザで側で取得出来れば。。と考えているところなんです。。。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/06/15 23:55