カテゴリ:

あなたのHPにGoogleMapを表示させてみよう

最近は、お店のHPなどに、GoogleMapが表示されているのをよく見かけますね。

「あんなふうにしたいけど…」と思ったことはありませんか?

今回は、あなたのHPにも、簡単にGoogleMapを埋め込む方法をご紹介します!

 


1. 住所を決めます

 地図に表示させたい場所の住所を、Googleマップで検索→表示させましょう。

 駅や公共施設など、Googleマップで検索できる施設なら、名前検索でOKです。

 https://www.google.co.jp/maps/

 

 今回は、弊社シグナイトの住所で検索してみます。

GoogleMap表示_01

GoogleMap表示_02

 

 


2. 「共有マーク」をクリックします

 検索の結果が表示されると、左にメニュー画面が出てきますので、「共有」マークをクリックします。

 →すると、画面上に共有の小ウインドウが表示されますので、「地図を埋め込む」をクリックします。

GoogleMap表示_03

 

 表示される地図のイメージが表示されます。

GoogleMap表示_04

 


3. 表示させたい地図の大きさを選択します

 右側のプルダウンリストから、「小」「中」「大」「カスタムサイズ」を選ぶことができます。

(最初は「中」が表示されています)

 

GoogleMap表示_05

 

  「小」「中」「大」→共有ウインドウがそれぞれの大きさに変更されます。

  「カスタムサイズ」→サイズを入力する小ウインドウが開くので、表示させたい大きさを入力してください。

   ※「実サイズでプレビュー」をクリックすると、左上に実寸のウインドウが表示される為、

    確認しながら数値を変更できます。

GoogleMap表示_06

 


4. 「埋め込みコード」をGETします

 共有ウインドウ内に「埋め込みコード」が表示されています。

 右側の「HTMLをコピー」をクリックすると、コードがコピーできます。

GoogleMap表示_07

  ※「カスタムサイズ」を設定した場合は、設定ウインドウ内の「HTMLをコピー」

GoogleMap表示_08

 


5. 「埋め込みコード」を貼り付けます

 あなたが地図を表示させたいHPなどのHTMLに「埋め込みコード」をペーストします。

 →HPに地図が表示されました!

 (注:弊社のHPのものは、カスタマイズされています)

GoogleMap表示_09

 


「HTMLのどこに埋め込めばいいの?」など、ご質問のある方は、お問い合わせフォームより、お気軽にご質問ください。

 

「こんな感じに変更できない?」

「こんな情報も一緒に載せたい!」

…などのご相談もお気軽にどうぞ!

 

The following two tabs change content below.
WriterSignite
シグナイト公式ライター。イベントや勉強会の様子や、最新のお役立ち情報をお届けします。 お問い合わせはこちらからどうぞ。

おすすめの記事

    【2019年4月】Facebook の QR コードを表示する方法
    【2019年4月】Facebook の QR コードを表示する方法
    続・FacebookでQRコードを表示する方法
    続・FacebookでQRコードを表示する方法
    今話題の Android 乗っ取り危機から身を守る!?
    今話題の Android 乗っ取り危機から身を守る!?
    【Day1】マイクロソフトの開発者イベント「de:code 2019」基調講演まとめ  #decode19
    【Day1】マイクロソフトの開発者イベント「de:code 2019」基調講演まとめ #decode19
    モバイルで写真の切り抜き。Adobe Photoshop Mix を使ってみた。
    モバイルで写真の切り抜き。Adobe Photoshop Mix を使ってみた。
    知ってました? Googleマップの新機能。
    知ってました? Googleマップの新機能。