AMS使い方マニュアル

簡単ホームページ作成ツール「AMS」のマニュアルサイト

ホーム ≫ ページ内にGoogleMapを埋め込みたい ≫

[ケーススタディ]
ページ内にGoogleMapを埋め込む

ケーススタディ

GoogleMapを求人情報ページ内に埋め込みたい。

1.AMSにログインし、スクリプト使用許諾を確認する

AMSにログインし、「スクリプト使用許諾」にチェックが入っているかを確認します。

チェックが入っていない場合は、チェックを入れます。

スクリプト使用許諾にチェックが入っていないと、GoogleMapを埋め込むことができません。

2.GoogleMapにアクセスする

map_gmb

GoogleMapのサイトにアクセスします。

左上のテキストエリアに、社名、住所等を入力して「Enter」キーを押し、ビジネス情報を表示します。

map_address

マイビジネスの登録がない場合は、住所を入力して「Enter」キーを押し、マップを表示します。

※右下にある「+」または「-」のアイコンをクリックすると拡大縮小が調整できます。

GoogleMapを埋め込む

画像の下にある「共有」をクリックします。

3.埋め込みコードを取得する

GoogleMapを埋め込む03_コピー_コピー

地図を埋め込む」をクリックします。

GoogleMapを埋め込む04_コピー

HTMLをコピー」をクリックします。

GoogleMapを埋め込む05_コピー

画面を閉じます。GoogleMap側の作業はこれで終わりです。

4.記事を追加する

ページ記事追加01_コピー

動画を埋め込むページ(ここでは求人情報ページ)の編集画面で、一番上の記事にカーソルを置きます。背景が黄緑色になったらクリックします。

ページ記事追加03_コピー

記事を追加」ボタンをクリックします。

Youtube動画を埋め込む09

本文」の「ソース」ボタンをクリックして、ソース編集モードに切り替えます。

5.GoogleMap埋め込みコードを入力する

Youtube動画を埋め込む10

テキストエリア内をクリックします。

iframeを埋め込む

続けて、テキストエリア内を右クリックします。

表示されるメニューから「貼り付け」を選択します。

GoogleMapを埋め込む10_コピー
GoogleMapの埋め込みコードが入力されました。

6.埋め込みコードの値を編集する

GoogleMapを埋め込む09_コピー
width(Mapの横幅)の初期値は600ですが、これを100%に変更します。
GoogleMapを埋め込む07_コピー

widthを100%に変更したら、埋め込み作業は完了です。

map_iframe

再度、「本文」の「ソース」ボタンをクリックして、通常編集モードに戻します。

IFRAMEが表示されていることを確認し、編集画面左下の「登録」ボタンを押します。

さらに、記事一覧編集画面の「登録」ボタンも押します。

7.編集画面で確認する

GoogleMapを埋め込む11_コピー

編集画面に戻ると、「オブジェクトスペース」として表示されます。正常に埋め込みコードが入っていても、編集画面上に地図は表示されません

地図はプレビューで確認します。

8.プレビューで確認する

画面右上の「プレビュー」ボタンを押します。

GoogleMapを埋め込んだページに地図が表示されていれば埋め込み完了です。

公開ボタン押しましょう

最後に「公開」ボタンをクリックして、修正内容を反映させます。

otukaresamadesita