質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.50%

google maps api v3 を使って描画した地図をキャプチャする方法

解決済

回答 5

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 4,173

score 13

まず、自サイトにgoogle maps api v3 を使って地図を表示させ、ユーザーに自由に場所やズームレベルを変更してもらいます(※この時、地図上にマーカーを付けたり、ストリートビューに変更することも可能とします)。
そして、好きなタイミングでブラウザ上の「OK」ボタンを押すと、その地図をキャプチャして画像として取得する。というようなことをしたいのですが、この地図→画像変換をする良い方法が見つからずに困っております。。。最終的にはその画像をcanvasの背景画像として使用したいのですが、どなたか良い変換方法をご存知の方おられませんでしょうか?

宜しくお願いします。

【捕捉】
無理にキャプチャではなくても、たとえばKMLなどの形式で外部出力する方法でも構いません。
要件は、ユーザーが任意に変換させた地図情報を、(再度、サイトを開き直した時に)まったく同じ状態で再現出来ればそれでもOKです。

動的マップ→静的マップの完全変換などでも、情報お持ちの方おられたは、是非お願いしますm(__)m
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 5

checkベストアンサー

+1

何度も失礼いたします。

正しいやり方かどうか怪しいですが、ストリートビューに切り替わってからの値取得方法をちょっと見つけましたので(^_^;)

とりあえず、getStreetView()で定義しておいて…

getVisible() でストリートビューが表示されているかどうか
getPosition() で座標
getPov() で視点情報(オブジェクト)

が取得できます。


サンプルHTML(かなり適当ですが…動確しています)
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>TEST</title>
    <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript" charset="UTF-8"></script>

</head>
<body>
<div id="gmap" style="width : 500px; height : 500px;"></div>
<input type='button' value='consoleに情報出力' onclick='test();'>
<script type="text/javascript"> 
    var map = document.getElementById("gmap");
    var gmap;
    var streetViewPanorama;
    
    google.maps.event.addDomListener(window, 'load', function() { 
        var options = {
            zoom: 16, 
            center: new google.maps.LatLng(35.686773, 139.68815), 
            mapTypeId: google.maps.MapTypeId.ROADMAP 
        }; 
        sv = new google.maps.Map(map, options); 
        streetViewPanorama = sv.getStreetView(); //とりあえず定義
        streetViewPanorama.setVisible(false);    //見えないよーに
    }); 

    function test() {
        console.log(streetViewPanorama.getVisible());
        console.log(streetViewPanorama.getPosition());
        console.log(streetViewPanorama.getPov());
    }
</script>
</body>
</html>

お望みのことができるかどうかアレですが…GIS系好きなので応援しています。



投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/06/16 08:55

    noiseさん、とても有用な情報ありがとうございます。

    教えていただいた方法を利用すれば、ストリートビューの場合にも対応できるかもしれません。

    自分でも色々と調べてみたのですが、はやりライセンスの絡みで、
    キャプチャ保存をすること自体問題がある可能性が高いので。

    サイトの利用者(ユーザー)が行った一つ一つの操作を何らかの方法で
    記憶して、必要になった時に地道に同じ状態を、都度再現する方法になりそうです。

    noiseさんにも応援していただき、とても励みになります。
    皆さんから頂いた情報を無駄にせず何とか形にしたいと思います。

    ご協力、本当にありがとうございました。

    キャンセル

+1

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/14 09:48

    回答ありがとうございます。

    やはり、クロスドメインなところが難しいところですよね。。。
    サーバーサイドでのキャプチャ取得も考えてみたのですが、ブラウザで地図がどのように表示されているのかを、正確にサーバーに伝えるのが難しいため、何とかブラウザで側で取得出来れば。。と考えているところなんです。。。

    キャンセル

+1

水を差すような回答で申し訳ありません。

Google Mapをご利用になるのであれば、使用許諾にご留意ください。

Google 使用許諾
Google マップおよび Google Earth に関する使用許諾ガイドライン 
https://www.google.co.jp/permissions/geoguidelines.html

オフラインでの使用: Google マップまたは Google Earth からの対象コンテンツを切り取る、またはその他の形でエクスポートする、またはオフラインでの使用のために保存することはできません。

対象および、用い方に問題なければ、失礼の段お詫び申し上げます。


投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/06/14 10:40

    ご指摘ありがとうございます。

    現在、取得したキャプチャをオフラインで使用することは考えておりませんが、オンラインでかつその場の一時的な使用に限定した場合でも、google maps api を使用して描画した地図をキャプチャするというそもそもの行為がライセンスに抵触するかという部分については十分留意し、必要な措置をとっていこうと考えております。

    キャンセル

+1

google maps api v3でとは別の回答になりますが、
ガラケー用に地図を画像で表示させるためのGoogle Static Maps APIというのを以前に使ったことがあります。
今は使用できるか確認はしていません。


投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/06/14 15:42

    回答ありがとうございます。

    そうなんです、質問欄に記載させていただいた「静的マップ」とはgoogle maps api でいうところのstatic mapのことなんです。
    通常のgoogle maps api v3 ←→ static map を完全に相互変換(モード変換のように)できると理想なんです(><)

    キャンセル

+1

位置と縮尺だけであれば…

ボタンが押されたときに、中心点座標と縮尺を取得して記録する方法でいかがでしょうか。

中心座標の取得
center_latlng = 地図id.getCenter();

縮尺の取得
zoom_level = 地図id.getZoom();

値を(外部ファイル、DB、cookieなどで)何かしらクライアント情報と紐付けて記録し、再訪時に再現できるかと思われます。

追加マーカー情報など付与情報は、付与操作ごとに記録して再現…
ストリートビューに切り替わったアトは……思いつきませんでしたm(__)m

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/06/14 18:01

    noiseさん、度々の回答ありがとうございます!

    そーなんですよねぇ。。。ストリートビューに切り替わる前の段階は容易に考え付くのですが、その後が問題なんです(><)

    ストリートビューへの切り替えをOFFにすることも考えたのですが、それではせっかくgoogle map を使用している意味がなくなってくるんです。

    はやり、難しいですねぇ。。。。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る