とりあえずHP の使い方

初級編

地図を掲載しよう地図コードの取得方法「Googleマップ」編

このページでは管理画面の「地図の設定」で使う「地図コード」の取得方法をご紹介しています。

まずはGoogleマップにアクセスします

こちらのページではGoogleマップを使った、地図コードの取得方法をご紹介しております。まずは以下より「Googleマップ」にアクセスします。

Googleマップ(外部サイト)
https://www.google.co.jp/maps

埋め込みたい地図を表示します

検索欄に住所や建物名を入力し、地図を表示させます。

※地図の拡大率についてもこの画面で調整します。

Googleマップ住所等入力画面
メニューから[地図を共有または埋め込む]をクリックします

画面左上(検索欄の左側)にあるメニューボタン(Ξ)をクリックし、
表示されたメニューから[地図を共有または埋め込む]をクリックします。

Googleマップのメニューボタン画面

Googleマップ[地図を共有または埋め込む]クリック画面
表示されるボックスの上部にある[地図を埋め込む]タブを選択します
Googleマップ[地図を埋め込む]画面
表示された埋め込みコードをコピーして、管理画面に貼り付けます

表示されたコードの右側にある「HTMLをコピー」をクリックすると、コードがコピーされます。
コピーしたHTMLコードを「とりあえずHP」の管理画面の「地図の設定」ページに貼り付けてください。

※「メモ帳」などのテキストエディタソフトに貼り付けて保存しておくと安心です。

※サイズの指定(小・中・大・カスタム)を行えるようになっていますが、
いずれのサイズをお選びいただいた場合でも、「とりあえずHP」の地図ページに貼り付けていただくとテンプレートのデザインに合わせたサイズで表示されます。

Googleマップの埋め込みコード表示画面

管理画面での入力方法は以下をご確認ください。
地図を掲載する

複数箇所にピンを立てたい/ルートを表示したい場合

ご自身のGoogleアカウントを持っている場合、表示するGoogleマップの中の複数の箇所に印をつけたり、ルートを表示した状態で掲載することができます。
掲載の手順について、以下に簡単にご紹介させていただきます。

  1. Googleにログインした状態でGoogleマップにアクセスします。
  2. 画面左上のメニューボタン(Ξ)をクリックし、[マイプレイス]を開きます。
  3. [マイマップ]をクリックし、[地図を作成]をクリックします。
  4. 「無題の地図」を書き換え、検索欄に表示させたい所在地を入力し、[地図に追加]をクリックします。また、ルートの表示なども設定できます。
  5. 表示したい地図が完成したら、左上の地図タイトルの下にある[共有]ボタンをクリックし、[このリンクを知っている人なら誰でも表示できる]をクリックし、[閉じる]をクリックします。
  6. ふたたび地図の画面で、地図のタイトルの右側にあるメニューアイコン(…が縦に並んだようなマーク)をクリックし、[自分のサイトに埋め込む]をクリックします。
  7. 表示された埋め込みコードをコピーして管理画面に貼り付けます。

マイマップの詳しい操作方法は以下ページでも紹介されているようです。

▼Google「マイマップ ヘルプセンター」(外部サイト)
https://support.google.com/mymaps/#topic=3024924

※上記以外にも「Googleマップ マイマップ 作成方法」などで検索すると、より詳しい情報が得られます。

【ヒント】Googleマップにお店・会社の名前を表示したい!

Googleマップでは「Googleマイビジネス」に登録することで、自分のお店や会社の情報を無料で掲載することができます。

以下より「Googleマイビジネス」にアクセスし、案内に沿ってご自身のお店やビジネスの情報を登録するとGoogleマップをはじめとしたGoogleサービス上に自分のお店・会社名や営業日などが表示されます。

▼Google マイビジネス(外部サイト)
https://www.google.co.jp/intl/ja/business/

上記の登録を行い、Googleマップにお店の名前が表示されている状態で地図を埋め込むと、ホームページ上でもお店の名前等が表示された状態で表示されます。
Googleアカウントを持っていればすぐに登録申請することができるようなので、試してみてはいかがでしょうか?

※「Googleマイビジネス」はGoogleのサービスです。詳しい情報は上記の「Google マイビジネス」のページでご覧ください。

Googleマイビジネスのメリットや登録手順について、以下でも詳しくご紹介しています。
自分でできるSEO対策|Googleマイビジネスに登録して地域の顧客にアピールする

ロゴマークを表示させる

Googleビジネスプロフィールに登録しよう

外部フォームを利用する

Googleタグマネージャーを設置する

アクセス解析を見る

無料オンラインサポート実施中

\ホームページを作る前に知っておきたい/

ホームページの作り方 動画講座

動画URLを無料で入手

\ホームページ制作のプロに個別相談/

とりあえずHP無料個別レッスン

個別レッスンの詳細

簡単に自分で作れるホームページ作成ソフト「とりあえずHP」

簡単HP作成ソフト「とりあえずHP」

無料お試しはこちら