晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

Googleマップの詳細かつ広い範囲の地図を印刷する方法。

Googleマップで広い地域を印刷しようとすると、詳細部分が分からなくなる。

詳細な地域の情報を維持したまま広い範囲の地図を印刷する方法を考えた。

以前はGoogle Maps APIを使う方法もあったが、現在APIキーなしで無課金で使用することが難しくなっている。

なので、通常のGoogleマップの機能を使って行う方法を考えた。

事前に準備作業として、Webページをウインドウをはみ出た部分も含めて印刷するChrome拡張機能「Full Page Screen Capture」をインストールしておく。

iframeを使って、ブラウザのウインドウサイズより大きく地図を表示できるWebページを作成したので、これを使う。↓

このWebページを使ってiframe内にGoogleマップを表示すれば、大きな地図を表示できる。widthとheightは任意のサイズを指定できる。

url欄にGoogleマップのurlを入れるのだが、通常のGoogleマップのurlを指定しても、iframe内では開かない。

そこで、Googleマップで印刷したい場所を表示した状態で、左上メニューを開く。

f:id:art2nd:20180913152133j:plain

メニューの中の「地図を共有または埋め込む」を選択する。

f:id:art2nd:20180913151156j:plain

次に表示されるウインドウで、「地図を埋め込む」を選択する。

f:id:art2nd:20180913151206j:plain

次に表示される画面の「中▼」と表示されている右の欄にある「<iframe src="...」の文字列を「HTMLをコピー」でコピーして、一旦メモ帳などにペーストする。

f:id:art2nd:20180913151214j:plain

メモ帳などにペーストした地図埋め込み用の文字列

<iframe src="https://www.google.com/maps/embed?pb=...." width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

のsrc=""で囲まれた部分(https://www.google.com/maps/embed?pb=....)をコピーして、下の「iframeサイズ指定オープン」のurl欄に貼り付けて、表示ボタンを押す。

拡大地図が表示される。

f:id:art2nd:20180913151624j:plain

Chrome拡張機能「Full Page Screen Capture」がインストールされていれば、ブラウザの右上にカメラのようなマークが表示されているので、それをクリックする。

f:id:art2nd:20180913153748j:plain

パックマンが餌を食べるようなアニメーションが表示されてスクリーンキャプチャが実行される。

f:id:art2nd:20180913154030j:plain

スクリーンキャプチャが完了すると次のようなページが表示される。PDFまたはPNG(jpgに変更可能)で大きな地図をダウンロードできる。

これらを印刷すれば詳細かつ大きな地図を印刷できる。

ダウンロードした地図をJTrimなどの画像編集ソフトで必要な部分だけをトリミングして印刷するのがおすすめ。

f:id:art2nd:20180913151632j:plain

「iframeサイズ指定オープン」

のurl欄にはiframe内で表示可能なWebページを指定できる。

例えば、YahooマップAPIで作成した以下の「京都伏見:酒蔵マップ」のurlをそのまま指定して大きな地図を印刷できる。

https://ok2nd.sakura.ne.jp/ymap/spots/?id=244&key=20837964445a613c892239f