あなたのウェブサイトにグーグルマップを埋め込む方法

公開: 2022-05-15

顧客やクライアントが実際の店舗を見つけられるようにすることは、対面での売り上げを最大化するために不可欠です。 Google My Businessを使用して、ビジネスをGoogleマップに追加できます。 ただし、連絡先ページなどのWebサイトにGoogleマップを埋め込むこともできます。

思ったより簡単です。

ウェブサイトにGoogleマップを埋め込むことは、消費者があなたのビジネスを見つけるのを助ける簡単な方法です。 毎月1億5000万人以上のユーザーがGoogleマップにアクセスしているため、このユーザーベースを活用したいと考えています。 結局のところ、それはあなたが顧客、クライアント、あるいは将来の従業員であるかどうかにかかわらず、企業や企業を見つけるための頼りになる方法です。

グーグルマップを埋め込む、ウェブサイトにグーグルマップを埋め込む

この記事では、会社のサイトであれローカルストアであれ、ウェブサイトにGoogleマップを埋め込む方法について説明します。

あなたのマーケティングを高めてください! 今日SEOとPPCの売り上げを伸ばすために無料相談をスケジュールしてください!

ウェブサイトにGoogleマップを埋め込む方法

Googleマップをウェブサイトに埋め込むには、HTMLコードとAPIキーの2つの方法があります。

HTMLコードの使用

Googleマップには、システムに統合された「地図の共有または埋め込み」機能があります。 ウェブサイトのHTMLコード内で地図のHTMLコードを使用して、ページ上のGoogleマップへの直接リンクを作成します。

  1. google.com/mapsにアクセスします。
  2. 埋め込みたい場所を見つけて選択します。
  3. 左上隅のメニュータブにある3本の水平線をクリックします。
  4. 「マップの共有または埋め込み」オプションを選択します。

共有リンクを使用して、FacebookやTwitterなどのソーシャルメディア、またはその他の互換性のあるプラットフォームでリンクを送信または共有できます。
ウェブサイトへのリンクを追加するには、[地図を埋め込む]タブをクリックします。

  1. ポップアップメニューの左側のドロップダウンタブで、マップの大きさを決定します:小、中、大、またはカスタムサイズ
  2. 「HTMLのコピー」オプションを選択し、WebサイトのHTMLセクションに貼り付けます。
  3. あなたはあなたのウェブページの好きな場所に地図を置くことができます。 ただし、地図を埋め込むことにより、Googleの利用規約に従うことに同意したことになります。 また、ライブの交通情報など、埋め込み地図のすべてのGoogleマップの機能にアクセスすることはできません。

おすすめのブログ:売り上げを伸ばすためのすぐに使えるアイデアトップ20とSEOとは? 検索エンジン最適化の初心者ガイド。

APIキーを使用してGoogleマップを埋め込む

このメソッドを実装するには、コーディングにある程度の熟練が必要です。

ステップ1:APIキーを生成する

  1. GoogleCloudPlatformのGoogleマップセクションに移動します。
    (プロジェクトを設定するときは、有効なAPIが必要です)
  2. 左側のメニューで、[資格情報]を選択します。
  3. 「+CREATECREDENTIALS」をクリックします。
  4. メニューから「APIキー」を選択し、表示されたAPIをコピーします(後で必要になります)。

ステップ2:マップを機能させるためのコードを作成する

  1. ページのマップスタイリングコードを決定します。
    <スタイル>
    #map {幅:100%;

    高さ:400px;

    背景色:灰色;

    }

    </ style>

  2. ビジネスの座標を使用してマップスクリプトを追加します。
    <script>関数initMap(){

    var macc = {lat:<緯度>、lng:<経度>};

    var map = new google.maps.Map(

    document.getElementById('map')、{zoom:15、center:macc});

    varmarker = new google.maps.Market({position:macc、map:map});

    }

    </ script>

ステップ3:GoogleスクリプトをHTMLドキュメントに追加する

  1. 以下のスクリプト非同期にAPIキーを追加し、「YOUR_API_KEY」を置き換えます。
    <script async
    src =” https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&callback=initMap”>
    </ script>
  2. スクリプトをHTMLドキュメントに追加して完了します。

Googleは地図をロードする場所を初期化して追加するためにこれを必要とするため、initMap()関数を使用する必要があります。 この関数内には、場所の緯度と経度が含まれている必要があります。

終了すると、顧客が使用できるレスポンシブマップができあがります。

おすすめのブログ:変換するコンテンツマーケティングファネルを作成する方法とコピーライティングとは何ですか? デジタルコピーライティングで売り上げを伸ばす方法。

なぜあなたのウェブサイトにグーグルマップを埋め込むのですか?

おそらくあなたはあなたがグーグルマップを追加したい特定の目的を持っているでしょう。 そうでない場合は、ここにあなたがウェブサイトにグーグルマップを埋め込むべきであるいくつかの理由があります。

あなたの店を探す

すべての地元企業は、ウェブサイトに埋め込まれたGoogleマップを含めることを優先する必要があります。 Googleマップのスクリーンショットは役に立ちますが、完全に機能する埋め込みマップの詳細レベルにはほど遠いものです。 たとえば、顧客はスクロールして、店舗が自宅からどれだけ離れているかを確認できます。

あなたの店を見つけることができることはあなたの店内の足跡、売上高、そして利益を増やすでしょう。 これは、オンラインプレゼンスを実際のビジネスにリンクする簡単な方法です。

おすすめのブログ:新しいShopifyストアへのトラフィックを獲得する方法、ビジネスを成長させるためのブランド認知戦略のアイデア、および中小企業向けの5つの効果的なオンラインマーケティングのアイデア。

連絡先ページに価値を追加する

住所をリストすることは1つのことですが、顧客はGoogleマップにアクセスして検索するだけです。 マーケティングにはルールがあります–顧客がとる必要のあるステップを最小限に抑えます。 余分なクリックや検索を行うたびに、顧客が失われます。

埋め込まれたGoogleマップアプリを追加することで、連絡先ページに付加価値を付け、顧客の時間を節約できます。 あなたのビジネスが少し邪魔であるかどうかは重要です。

ルートを示す

いくつかのビジネスは役に立ちます。 ハイキングシューズやランニングトップを販売している場合は、顧客に試してみるためにウォーキングやランニングをお勧めしたいと思うかもしれません。 (それは素晴らしいブログ投稿になります。)Googleマップで強調表示されたルートを使用するよりも、そのような情報を表示するためのより良い方法はありません。

おすすめのブログ:デジタルマーケティングとは? マーケティングにおけるデジタルの基礎、Google My Businessのメリット、および私のWebサイトのサイトマップを見つける方法。

ウェブサイトにグーグルを埋め込むことを学ぶのは簡単です

それは少し気が遠くなるように見えるかもしれません。 ただし、上記のガイドを段階的に実行すると、顧客が理解できるように完全に埋め込まれたマップが作成されます。 それは便利で便利です、そしてそれはまたあなたのビジネスを後押しします。 他のオプションよりもはるかに多くの機能を提供するため、API手法を試す価値があります。

もちろん、本当に苦労している場合は、いつでも専門家に連絡して支援を求めることができます。 ウェブサイトの設定とGoogleマップの埋め込みの経験があります。 そして、私たちは喜んでお手伝いします。