スマホで見つける、もっと可愛い私

【簡単】Googleマップを埋め込んでWebページに表示させる方法

【簡単】Googleマップを埋め込んでWebページに表示させる方法


Googleマップの埋め込み時のサイズ変更は可能?

GoogleマップをWebサイトやブログに埋め込む際に、全体のバランスを考えて、レイアウトを行います。自分のWebサイトやブログの内容に閲覧者の興味を持たせるため、サブ的な要素がメインの記事よりも目立たないようにする必要があります。

Googleマップを埋め込めば、閲覧者は具体的なロケーションを把握できるので助かります。しかし、埋め込まれているGoogleマップが大きすぎれば、大切なメインの内容を覆い隠し、読者や訪問者の注意を反らしてしまう可能性があります。

適切な場所に、適切なサイズで埋め込まれてこそ、Googleマップは輝きを見せます。GoogleマップをWebサイトやブログに埋め込む際に、サイズ変更はできるのでしょうか。

Googleマップには、地図の縮尺だけでなく、経度や緯度を調整する機能も実装されています。これから具体的に、Googleマップのサイズ変更を行う方法を紹介します。

地図の縮尺を調整する方法

最初に紹介するのは、Googleマップの縮尺、つまりサイズを変更する方法です。サイズ変更は簡単に行えます。ここでは、コードでGoogleマップを埋め込む方法を例にして説明します。

Googleマップを開き、自分が埋め込みたい場所や店舗などをGoogleマップに表示させましょう。その後この記事ですでに説明したように、「共有」→「地図を埋め込む」の順序で進んで行きます。

画面中央に表示される「共有」のポップアップがマップに変わります。マップ左上に「中」とあるので、それをクリックしましょう。

サイズ変更

ドロップメニューが表示されます。変更可能なサイズの種類です。「小」「中」「大」「カスタムサイズ」の4つです。

サイズの種類

実際にサイズ変更をすると、マップ上ではどれくらいの大きさになるのかを確認します。最初は「大」です。

大

次は「中」です。

中

次は「小」です。

小

最後は「カスタムサイズ」です。カスタムサイズは、自分の希望する大きさにサイズチェンジするため、数値を変更できるようになっています。

カスタムサイズ

経度や緯度を調整する方法

次に紹介するのは、Googleマップの経度や緯度を変更する方法です。これを実行するには、3つのステップを踏む必要があります。(1)Googleマップで経度と緯度を確認する、(2)Google Driveでリストを作成する、(3)Google My Mapsを起動させる、の3つです。

まずGoogleマップで埋め込みたい場所の経度と緯度をチェックします。Googleマップを開き、埋め込みたい場所をGoogleマップに表示させましょう。表示させたらマップ上に付けられた「ピン」を右クリックします。

メニューが表示されるので「この場所について」を選択しましょう。

この場所について

画面下に経度と緯度が表示されます。

経度と緯度

次にGoogle Driveを立ち上げます。「My Drive」をクリックしドロップメニューを表示させます。メニューの中から「Google Sheets」を選択しましょう。

My Drive

「経度、緯度、場所の名前」を含んだリストを作成します。先ほど確認した、経度と緯度、また場所名をここに入力しましょう。

リストの作成

次にGoogle My Mapsを立ち上げます。画面に表示されている「新しい地図の作成」をクリックしましょう。

Google My Maps

「新しい地図の作成」画面の左上にメニューボックスが表示されます。その中から「インポート」を選択しましょう。

新しい地図の作成

「インポートするファイルの選択」画面に表示されるファイルの一覧から、先ほど作成したファイルを選択します。

インポートするファイルの選択

「目印を配置する列の選択」が表示されるので、「緯度」「経度」にチェックを入れ、インポートを確認する黄色の小さい画面にも、緯度と経度にチェックを入れましょう。

目印を配置する列の選択

「マーカーのタイトルとして使用する列」が表示されるので、「場所の名前」にチェックを入れ、「完了」をクリックします。

マーカーのタイトルとして使用する列

「新しい地図の作成」画面に戻ります。画面の左メニューにある、埋め込みたい場所の名称が書かれた「ピン」をクリックしましょう。

新しい地図の作成

埋め込みたい場所の経度と緯度が表示されます。同じ小さな画面に「ペン」の形をした編集アイコンがあるのでクリックしましょう。

編集

ここで経度と緯度が調整できます。

緯度と経度の調整

「新しい地図の作成」画面の左メニューにある「︙」をクリックします。ドロップメニューが表示されるので「自分のサイトに埋め込む」を選択しましょう。

自分のサイトに埋め込む

Googleマップの埋め込みが出来ない原因

GoogleマップをWebサイトやブログなどに埋め込むため、これまで紹介した方法を試しても上手くいかない場合があります。原因は何でしょうか。これから考えられる2つの原因を紹介します。

地図のリクエスト数が限度を超えている

Googleマップの埋め込みが出来ない、考えられる1つの目の原因は、地図のリクエスト数が限度を超えていることです。地図のリクエスト数は、毎月28,000回までと決められています。これを超えて行いたいなら、お金を払い、有料プログラムを購入する必要があります。

Maps JavaScript APIが無効

Googleマップの埋め込みが出来ない、考えられる2つの目の原因は、Maps JavaScript APIが無効になっていることです。Maps JavaScript APIとは、WebサイトでGoogleマップをカスタマイズして表示させるためのプログラムのことです。

そのためMap JavaScript APIが無効になっていると、地図の埋め込みは出来ません。

この記事に関するキーワード

新型コロナウイルスの影響により、施設や店舗の営業状況が記事掲載当時と異なる場合がございます。事前にご確認ください。