Google MAPを入れる

他社ツールご利用の前にお読みください

Google MAPは、Googleが運営するサービスです。そのため、予告なく仕様や操作手順が変更となる場合があります。ご利用の際には、Googleが提供している最新情報ページやヘルプページなどをご確認ください。サービスの詳細などは、Googleへお問い合せください。 以下の情報は、2013年12月現在の情報です。

ここでは、Google MAP（グーグル マップ） の入れ方をご案内します。

Google MAPを入れるには、専用部品を利用する方法と、HTML部品を利用する方法があります。

以下の手順で入れます。

  1. 部品の追加
  2. コードの取得
  3. ページの更新

１．部品の追加

Google MAPを入れたい場所へ、部品を追加します。

 

１）Google MAPを入れるエリアを決めます

 

２）［+部品を追加する］ボタンから、Google MAPを入れるための部品を入れます。

 

３）メインエリア以外に入れる場合は、「ヘッダー・サイド・フッターエリアにも追加」をクリックします。全ページにGoogle MAPを入れる場合は、「共通部品も表示」にクリックします。

 

▼Point

共通部品も表示

共通部品を入れたいときに、クリックします。

クリックすると、共通部品用の黄色い［ここに共通部品を追加］バーも表示されます。

ヘッダー・サイド・フッターエリアにも追加

メインエリア以外のエリアに部品を入れたいときに、クリックします。

クリックすると、メインエリア以外のエリアにも［ここに追加］バーが表示されます。

 

4）地図を入れるための部品をクリックし、［決定］ボタンをクリックします

Google MAPを入れることができる部品は、下表をご参照ください。

Google MAPを入れられる部品

Google MAPを入れられる部品は以下のとおりです（2013年12月現在）

どのくらいの大きさで入れたら良いかを迷う場合は、地図の大きさに制限のある、地図、会社概要、文章+地図などのHTML以外の部品をおすすめします。

Google MAPの大きさを自分で指定したい場合は、大きさの融通がきく「HTML部品」を入れてください。

 

エリア部品名分類
ヘッダーエリアHTMLおもな要素で選ぶ－その他－HTML部品
メインエリアHTMLおもな要素で選ぶ－その他－HTML部品
地図コンテンツで選ぶ－会社概要－地図
文章+地図コンテンツで選ぶ－会社概要－文章+地図
サイドエリア地図＜上＞コンテンツで選ぶ－地図－地図＜上＞
地図＜下＞コンテンツで選ぶ－地図－地図＜下＞
HTMLおもな要素で選ぶ－その他－HTML
フッターエリア

会社概要＜バナー

３+地図＞

コンテンツ別－会社概要－会社概要＜バナー３+地図＞
HTMLおもな要素で選ぶ－HTML

 

２．コードの取得

5）Googleの検索キーワード欄に「グーグルマップ」と入力し、検索、「Googleマップ」をクリックし、開きます。

Googleマップの利用について

Googleマップの利用規約内でご活用ください。
企業サイト内にGoogleマップを表示してもかまいませんが、Googleマップそのものを使って収益を上げる活動は認められていません。
→Googleの利用規約はこちら （外部サイト）
 
以下は2013年11月現在の情報です。

6）Googleのサイトで、左上の検索窓に住所（会社名）を入力して地図を表示させます。

7）左上に表示されるメインメニュー（三本線のマーク）をクリックします。

8）でてきたメニューのなかから[地図を共有 / 埋め込む] をクリックします。

9）「地図を埋め込む」のタブをクリックします。

10）地図のサイズを選択します。

地図のサイズについて

地図部品を使用する場合、[カスタムサイズ]を選択し、地図のサイズを半角で入力します。
地図のサイズは使用する部品によって異なります。下表をご参照ください。

Google MAPのサイズを自分で指定したい場合は、大きさの融通がきく「HTML部品」を入れてください。（GoogleMAP既定の小・中・大サイズを指定したい場合もHTML部品をご利用ください）

エリア部品名分類推奨サイズ
（横幅×高さ）
ヘッダーエリアHTMLおもな要素で選ぶ－その他－HTML部品任意
メインエリアHTMLおもな要素で選ぶ－その他－HTML部品任意
地図コンテンツで選ぶ－会社概要－地図640×500
文章+地図コンテンツで選ぶ－会社概要－文章+地図249×192
サイドエリア地図＜上＞コンテンツで選ぶ－地図－地図＜上＞173×173
地図＜下＞コンテンツで選ぶ－地図－地図＜下＞173×173
HTMLおもな要素で選ぶ－その他－HTML任意
フッターエリア

会社概要
＜バナー３+地図＞

コンテンツ別－会社概要
－会社概要＜バナー３+地図＞		260×192
HTMLおもな要素で選ぶ－HTML任意

※「高さ」は推奨サイズより大きくなっても構いません

11）下記の通り、表示されているHTMLタグを全てコピーします。
(<iframe src から始まる部分です。)

12）ホームページ更新の画面に戻り、地図を入れる部品をクリックします。

13）右パネルのHTML欄に、手順　11）でコピーしたタグを貼り付けます。

ページの更新

12）編集中の部品以外をクリックして、確定します。


Point!　ホームページ更新の画面では、地図は表示されません。

13）左パネルで編集中のページにある［更新］ボタンをクリック

14）上パネルで［公開中のページを見る］ボタンをクリックします。

Google MAPが入ります

 

手順は以上です。

▲クリックすると、ページ上部に戻ります▲

「大きな地図で見る」の文字色を解除する

「大きな地図で見る」の文字の左側にある以下のHTMLを削除します。 color:#0000FF;

以下のような状態にします

以下のような状態にします

「編集」－「すべて選択」をクリック

HTMLの中で右クリックし「コピー」をクリック

手順11に戻り、メモ帳の内容を地図の部品に貼り付けます。

▲クリックすると、ページ上部に戻ります▲

拡張機能を利用した横幅の確認

各エリアや、部品内に入れることができるGoogle MAPの横幅は、選択しているデザインによりそれぞれ異なります。以下の手順を元に、入れたい部分の横幅を調べます。

横幅を調べる前に、あらかじめ部品を入れておきます。

地図用部品ごとの横幅は、手順10内に記載されています。また、HTML部品の場合は地図のサイズを自由に指定することができるため、横幅の確認をする必要はありません。

 

1）上パネルで［プレビュー］ボタンをクリック

2）キーボードの［F12］キーを押下します

ウィンドウ下部に Google Chrome の拡張機能（デベロッパーツール）が表示されます。

左下にある虫眼鏡をクリック

横幅を確認したい部分にマウスを置きます

マウスを置いた場所の大きさが表示されるので（例：260px　×　96px）、メモをとります。

キーボードの［F12］キーを再度押下します

ウィンドウ下部に表示されていた、デベロッパーツールが閉じられます。

3）「上パネル」で［プレビューを終了する］ボタンをクリック

▲クリックすると、ページ上部に戻ります▲

パスワードのリセット方法

よくある
ご質問

サイドメニュー