【GatsbyJS製ブログ】Google マップをAPIなしでブログに埋め込む

2022年5月30日2023年12月5日

皆さんはGoogle マップをブログに使っていますか？

ブログの種類にもよりますが、マップを使う場面も出てくると思います。

この記事ではGoogle マップをAPIなしでブログに埋め込む方法を説明します。

ちなみに、ここで紹介する方法は全て無料の方法です（２０２２年５月現在）。Googleさん、やっぱりスゴイですね。

この記事はこんな人にオススメ

Gatsby製ブログにGoogle マップをAPI無しで埋め込みたい！
APIなしってAPIありと何が違うの？

とりあえずGoogle マップをAPIなしでブログに埋め込む

びっくりするほど簡単です。

用途によって「指定した場所周辺のマップを埋め込む」「ルートマップを埋め込む」「ルート指定したものを埋め込む」の３パターンを紹介します。

クマ

状況に応じて使い分けてください。

指定した場所周辺のマップを埋め込む

Googleマップから、埋め込みたい地点を検索して「共有」→「地図を埋め込む」→「HTMLをコピー」して、WordPressならカスタムHTMLに貼り付け、GatsbyならJSXやマークダウンにそのまま貼り付けます。iframeタグで埋め込むイメージですね。

クマ

こんな感じになります。超簡単！

ルートマップを埋め込む

地点Aから地点Bのルートを埋め込みたい、という場合もほとんど同じです。簡単なのですが、このやり方だと、Googleマップでのルート検索でヒットした最初のルートしか埋め込めません。

STEP

ルート検索する

欲しいルートを検索して左上の「メニュー」をクリック。

STEP

地図を共有または埋め込む、をクリック

STEP

地図を埋め込む→HTMLをコピー

WordPressならカスタムHTMLに貼り付け、GatsbyならJSXやマークダウンにそのまま貼り付けます。

ルート指定したものを埋め込む

先ほどのやり方だと、第一候補のルートしか埋め込めません。第一候補以外のルートを埋め込みたい、という場合は「マイマップ」を使わなければなりません。

この方法の場合、ルートを自由にカスタムできたり、と自由度は高いです。ただし、イメージ的には「自分のアカウントの地図に地点やルートを登録する」という、まさに「マイマップ（自分用のマップ）」を公開するような感じになります。よって、地点やルートを登録しないといけない、とう手間はかかります。

STEP

マイマップを開く

こちらにアクセスしてマイマップを開いてください。Googleアカウントが必要ですが、先ほど述べたように「自分のアカウントのマップを公開する」というイメージになります。なんとなくプライベートなアカウントは嫌だな、と思う方は新たにアカウントを取ってもいいかもしれません。

ログインしたら、「新しい地図を作成」します。

STEP

地点を追加

目的地を検索したり直接探して選び、「地図に追加」します。

STEP

ここまでのルートを表示する

「ここまでのルートを表示」します。

STEP

出発地点を検索

「ここまでのルートを表示する」と、レイヤが追加されるので、A地点（出発地）を検索して表示します。

STEP

ルートを確定する

ルートが表示されますが、ルートの好きな場所をドラッグ＆ドロップすれば、お好みのルートに変更できます。

STEP

ルートを決めたら「共有」の設定をする

このままだとマップの埋め込みコードが表示されないので、「共有」の設定をします。

STEP

地図の共有のチェックを入れる

上図の赤丸部分の共有チェックを入れます。~~「この地図で自分の名前と写真を公開する」にはチェックを入れる必要はありません。~~

2023年9月時点で、ここでの設定は名前とプロフィール写真を公開する仕様になっています。

後述する「自分のサイトに埋め込む」ところで、名前と写真の非表示ができるようになっています。

STEP

サイトに埋め込むコードを表示

上図のメニューを開いて、「自分のサイトに埋め込む」をクリックします。

STEP

表示されたコードを自分のブログに貼り付ける

WordPressならカスタムHTMLに貼り付け、GatsbyならJSXやマークダウンにそのまま貼り付けます。

クマ

ちょっと手間はかかりますが、マイマップでしかできないこともあります！

BearFruitのマスコットキャラ「クマ」がLINEスタンプになりました！

LINE STORE

LINEスタンプ　クマの毎日日記

LINE STORE

クマの毎日日記２

Gatsbyブログでパフォーマンスを考慮したGoogle マップの埋め込み

こちらでも解説していますが、Gatsby製ブログは調子に乗って色々と機能を実装していくと、パフォーマンスが下がる場合があります。今回解説しているGoogleマップやYoutubeなど外部の機能を読み込もうとすると、WordPressを使った場合でも同様にパフォーマンスが下がることがあります。

あわせて読みたい

【GatsbyJS製ブログ】パフォーマンス改善 Gatsbyでブログを立ち上げて運営し始めてから、色々とカスタムも加えていきました。 GoogleMapやYoutubeを埋め込んだり、アドセンスやアフィリエイトを埋め込んだり…お…

ただ、外部の機能を読み込もうとするときにパフォーマンスが下がる、ということさえわかっていれば対処はしやすいです。

基本的には「どうにか工夫して遅延読み込みをする」のが手っ取り早いでしょう。

例えばこちらで解説しているように、Youtubeの場合、最初に読み込むのはサムネイルだけにする、という実装をしてやればパフォーマンスの改善が見込めます。

あわせて読みたい

【GatsbyJS製ブログ】Youtubeの埋め込み（レスポンシブ対応も）ブログを書いていて「ここにあのYoutubeを埋め込みたい！」もしくは「自分の作ったYoutubeを紹介したい！」ということがあると思います。ちなみに実際Youtubeの埋め込み…

前置きが長くなりましたが、今回はuseInViewというhookを使って画面内にGoogleマップが入ったときに読み込みます。

クマ

useInViewは、リッチなサイトでよくある「スクロールしたらフワッと要素が現れる」ようなアニメーションを作るのにもよく使います。

準備．react-intersection-observerをインストールする

yarnでreact-intersection-observerをインストールします。

$ yarn add react-intersection-observer

useInViewを使ったGoogleマップ表示のコード

とりあえずコードを載せておきます。

import React from "react"
import { useInView } from 'react-intersection-observer'
import * as styles from '../../styles/embedmap.module.scss'

const EmbedMap = ({children}) => {
    const [ref, inView] = useInView({ //←ここがポイント
        triggerOnce: true,
    });

    return (
        <div className={styles.mapwrapper}
            ref = {ref} //←一番外側のdivに先ほどのrefを渡しておく※１
        >
            {inView ? ( //←三項演算子
                <div className={styles.googlemap}>
                    {children}
                </div>            
            ) : (
                <div></div>
            )}
        </div>
    )
}

export default EmbedMap

少しずつ解説していきます。

まず１つ目は、これはパーツ化しているコード、ということです。つまり、他のJSファイルやMDXファイルで、次のようにして呼び出せばGoogleマップが表示されます。

<EmbedMap>
  （先ほどのいずれかの方法で取得したiframeコード）
</EmbedMap>

（先ほどのいずれかの方法で取得したiframeコード）が上記のchildrenに渡るイメージですね。

「MDX？」という方はこちらを参考にしてください。

あわせて読みたい

【GatsbyJS製ブログ】MDXを使えるようにする！あと書き方とか！ GatsbyでWebサイトを作るようなときは無理にマークダウン形式（.md）を使う必要はないかな、と思うのですが、ブログであればマークダウン形式で記事をガシガシ書いてい…

２つ目が最大のポイントになりますが、useInViewの使い方です。まずはインポートします。

import { useInView } from 'react-intersection-observer'

そして、次のようにして使います。

const [ref, inView] = useInView({
    triggerOnce: true,
});

refは画面内に入ったかどうか判定する要素に渡しておきます（※１の部分）。これで、この要素が画面内に入ったらinViewがtrueになります。

ちなみにtriggerOnceは一度しか判定しない、つまり一度画面内に入ってしまったら、それが画面外に外れてもinViewはtrueのまま、ということです。他にも、「refを持った要素が〇〇px過ぎたら」「refを持った要素が画面に入って一定時間過ぎたら」などといったオプションもあります。詳しくはこちら。（英語のサイトです）

最後に、inViewを使って、trueならiframeを表示（つまりGoogleマップをロード）、そうでなければ空のdivを表示（つまりGoogleマップをロードしない）しています。