SAMPLE IMAGE この画像は差し替えてご利用ください

061 Google マップの挿入

Google マップを利用してホームページ上に地図を載せます。

 

Googleマップコンテンツの仕様変更により、コンテンツ編集画面で、以下の設定項目がなくなりました。

  • 尺度調整
  • 地図の種類
  • スケール
  • リスト(ストリートビューの人型アイコン(ペグマン)
  • 行き先までのルート
  • 地図の高さ 
http://jp-help.jimdo.com/%E5%9F%BA%E6%9C%AC%E6%83%85%E5%A0%B1/%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84/google%E3%83%9E%E3%83%83%E3%83%97/

目次

061-1 地図で表示する目的地が一箇所の場合

➊[Google マップ]を追加する

① Google マップを追加する位置にマウスを移動し、[+コンテンツを追加]をクリック、続いて[その他コンテンツ]をクリックする

②[Google マップ]をクリックする

jdg03B_01:Google マップ
jdg03B_01:Google マップ

➋ 目的地を表示する

① 住所の入力欄に目的地の住所などを入力する。特定の住所を入力すると候補が表示されるので、候補をクリックする。

② マップ上にその住所周辺が表示される。

③ 場所を確認して[保存]をクリックする。

jdg03B_02:「地図」で目的地を表示
jdg03B_02:「地図」で目的地を表示

ページに Google マップが追加される。

設定項目

地図のタイプ:

[地図][Earth]から地図の表示方法を変更できる

所在地:

表示させる所在地の住所を入力し[検索]することができる

拡大地図を表示:

クリックすることで、地図をGoogleマップ画面で表示することができる

地図の表示サイズ

地図の表示サイズ(高さ)を変更する時は、地図の中央下部にあるアイコンを上下にドラッグする。

横幅の場合は、カラムを使用して地図を表示する。隣のカラムには説明文を記述するのも良い。

061-2 地図で表示する目的地が複数の場合

現在のGoogleマップでは、複数の目的地を設定できなくなりました。

複数の地点を表示させるには、Google マップのマイマップにて地図を作成の上、埋め込みコードを取得し、ウィジェット/HTMLコンテンツに貼り付けます。

➊ Google マップを開く

jdg03B_03:Google アプリ一覧からマップを開く
jdg03B_03:Google アプリ一覧からマップを開く

➋ メニューから[マイプレイス]を選択する

jdg03B_04:[メニュー]から[マイプレイス]を選択する
jdg03B_04:[メニュー]から[マイプレイス]を選択する

➌ Google アカウントでログインする

Googleアカウントでログインしていない場合はログイン画面が表示されるので、IDとパスワードを入力する。

 

参照:「Y00 関連資料」>「Y11 Google アカウント

❹[マイマップ]を選択し[地図を作成]をクリックする

jdg03B_05:[マイマップ]から[地図を作成]をクリックする
jdg03B_05:[マイマップ]から[地図を作成]をクリックする

マイプレイスのタブ

ラベル付き
今までにGoogleマップ上に個人がつけたラベル一覧を表示する
[自宅]と[職場]は自動生成される
保存済み
[お気に入り][行きたい場所][スター付きの場所]のグルーピングに加えてオリジナルグループで保存された地点を表示する。リストのスポット名をクリックするとスポットの詳細情報を表示可能。
訪れた場所
スマホのGPS情報から訪問履歴を表示する。Googleマップアプリの「設定」メニューから「個人的なコンテンツ」の中の「ロケーション履歴」をオンに設定しておく必要がある。
マイマップ
保存されている個人用の地図のリスト。

❺ 地図の名称を入力する

無題の地図」をダブルクリックすると、「地図のタイトルと説明を編集」画面が表示される

地図タイトル」と「説明」を入力する

例:「地図タイトル」は「活動拠点マップ」、「説明」は「かるがも元気人の活動拠点2箇所」等とする。

保存]をクリックする

 

jdg03B_06:[無題の地図]をクリックし「地図のタイトルと説明を編集」入力
jdg03B_06:[無題の地図]をクリックし「地図のタイトルと説明を編集」入力

❻ 検索欄に地点名を入力して検索する

ここでは検索ボックスに「ほどがや」「かるがも」等と入力する。

② 候補地がボックス下にリストされるので合致する候補をクリックする

jdg03B_07:地点名を検索し、見つかったら[+地図に追加する]
jdg03B_07:地点名を検索し、見つかったら[+地図に追加する]

❼ 見つかった箇所を確認して[+地図に追加]をクリックする

① 地図上に緑色のピンが表示され、住所の詳細情報も表示されるので、場所を確認する

+地図に追加]をクリックする。ピンが青色に変化する。

❽ 地図に追加した後は、地点の微調整、地図の表示拡大縮小、地点のアイコンの色の変更などができる

jdg03B_08:地点を示すアイコンの色の変更など可能
jdg03B_08:地点を示すアイコンの色の変更など可能

❾ 同じく2ヶ所目の地点を検索して地点を確認して地図に追加する

jdg03B_09:複数地点を追加した地図
jdg03B_09:複数地点を追加した地図

❿ レイヤオプションを設定する

「レイヤオプション」をクリックしレイヤに名前を付ける

(例:「無題のレイヤ」→「活動拠点」)

「個別スタイル」>「グループ化方法」を「個別スタイル」にセットする。

(例:他には「均一スタイル」「続き番号」など)

「個別スタイル」>「ラベル設定」で「名前」あるいは「説明」とする

各項目の「名前」「説明」内容は鉛筆マークのアイコン(編集します)をクリックして変更できる。

jdg03B_30:レイヤオプション
jdg03B_30:レイヤオプション

⓫ 地図が完成したら、[共有]をクリックする

jdg03B_20:[共有]をクリックする
jdg03B_20:[共有]をクリックする

⓬ アクセス範囲は[オン‐ウェブ上で一般公開]を設定する

最初の状態では[非公開]になっているので[変更]をクリックする

jdg03B_21:アクセスできるユーザーを変更する
jdg03B_21:アクセスできるユーザーを変更する

オン‐ウェブ上で一般公開]を選択する

保存]ボタンをクリックする

jdb03B_22:共有の設定
jdb03B_22:共有の設定

⓭ 変更された共有設定を確認し、[完了]ボタンをクリックする

jdg03B_23:アクセスできるユーザーの設定の完了
jdg03B_23:アクセスできるユーザーの設定の完了

⓮ マイマップのメニューから[自分のサイトに埋め込む]をクリックする

jdg03B_24:[自分のサイトに埋め込む]
jdg03B_24:[自分のサイトに埋め込む]

⓯ 埋め込むコードが表示されるのでコピーする

jdg03B_25:埋め込みコードをコピーする
jdg03B_25:埋め込みコードをコピーする

⓰ Jimdo ページにコードを埋め込む

① Jimdo にログインする

② 埋め込まれるマップの幅は標準 640px (高さ 480px)なので、カラムを使うなどしてページ内のマップの位置(左/右寄せ、中央寄せなど)を定める

③ 埋め込み位置で[ウィジェット/HTML]コンテンツを追加する

jdg03B_26:「ウィジェット/HTML」コンテンツを追加する
jdg03B_26:「ウィジェット/HTML」コンテンツを追加する

④ コピーした地図埋め込み用のコードを貼り付ける

⑤[保存]ボタンをクリックする

jdg03B_27:地図埋め込み用コードを貼り付け、[保存]をクリックする
jdg03B_27:地図埋め込み用コードを貼り付け、[保存]をクリックする

jdg03B_28:貼り付けられた地図
jdg03B_28:貼り付けられた地図

⓱ 埋め込まれたマップを確認する

① プレビューモードで表示する

② マップの名前、目的箇所の表示と説明、などを確認する

jdg03B_29:埋め込まれたマップを確認する
jdg03B_29:埋め込まれたマップを確認する