Googleマップの詳細地図を使って大きな広範囲の地図を作る方法

Googleマップで大きな地図を作りたいときってありませんか？

広範囲のビューにすると、道など情報も大まか過ぎるので、地図情報はある程度詳しくしたいのですが、そうするととても画面には収まりきらないので、スクリーンショットを撮るというわけにもいかないということがありますよね。

実は今回そういうことがあったので、その方法を備忘録的にまとめておきます。

またあるかもしれないので・・・

埋め込み用のコードを使う

ポイントは「自分のサイトに埋め込む」機能を使うことでした。

普通のマップを使う場合

まず地図にしたいおおよその場所をGoogleマップで表示します。

それから左上にある三本線の部分をクリックしてメニューを開きます。

「メニュー」＞「地図を共有または埋め込む」＞「地図を埋め込む」と進み、「HTMLをコピー」します。

これで、「地図を埋め込む」機能の<iframe>がコピーされました。

マイマップを使う場合

マイマップを使う場合は、まず使いたいマイマップを開いて表示します。

左側のウィンドウから「共有」をクリックします。

次に「このリンクを知っている人なら誰でも表示できる」と「インターネットで検索しているユーザーにこの地図を公開する」をオンにして、ウインドウを閉じます。

再び、左側のウィンドウの右上の３点リーダーをクリックして、「自分のサイトに埋め込む」をクリックすると、「この地図を埋め込む」というウィンドウが開くので、そこに表示されているソースコードをコピーして、「OK」をクリックして、ウィンドウを閉じます。

これで、「地図を埋め込む」機能の<iframe>がコピーされました。

HTMLファイルを作る

次に、簡単なHTMLファイルを作って、そこに先ほどコピーした、<iframe>を貼り付けます。

VScodeなどのテキストエディタを使って、例えば「index.html」というファイル名で下のようなテキストファイルを作ります。ファイル名は任意で大丈夫です。

赤字の部分が先ほどコピーしてきた<iframe>を貼り付けたものです。

width と height を調整する

出来上がった index.htmlをブラウザで開くと、大きな地図の一部が画面に表示されます。（上の例の場合、地図の大きさは、6400Pic × 4800Picになります。）

詳細地図を表示して、自分が地図にしたい範囲が含まれるように、widthとheigt（つまり幅と高さ）の値を調整します。

あまり大きくすると、PCにかなりの負荷がかかってフリーズするので、限界はありそうです。

Chrome でページ全体のスクリーンショットを撮る

<Shft>+<Ctrl>+<i>を押して、ディベロッパーツールを開き、さらに、<Shft>+<Ctrl>+<ｐ>を押して、その後、開いたウィンドウに、” full ”と打ち込んで、enterキーを押します。

これでページ全体のスクリーンショットが撮れます。

以上で、詳細表示の広範囲地図ができます。