複数の地点を登録したGoogleMapを自分のサイトに埋め込む方法

App, Design, Google, WordPress, インターネット, 備忘録

地域サイト等やっていて
サイト内の登録したすべての地点が掲載された地図を
作りたくて色々調べてみました。。。

Googleアカウントを持っている方はログインして下さい。

作業の流れとしては、

 1. スプレッドシートで住所等を入力
 2. Googleマップのマイプレイス>マイマップで地図を作成
 3. マイドライブからスプレッドシートをインポート
 4. 共有を設定する
 5. 自分のサイトに埋め込む。

001

ログインした状態でGoogleのトップページの
3x3の■が並んだところをクリックすると
上記の ドライブ をクリックしてください。

Googleドライブのページになったら

新規でスプレッドシートを作成

002

新規 > Google スプレッドシート を選びます。

スプレッドシートに項目を入力する

003

タイトルも入れておいてください。

Googleマップを開きマイマップを作成

004

赤線のメニューから

005

マイプレイス > マイマップ > 地図を作成 を選びます。

006

インポート > マイドライブ で

007

先程作成したスプレッドシートを選択。

008

目印を配置する列の選択と

009

マーカーのタイトルとして使用する列 を設定します。

010

共有を設定しURLを取得してサイトに埋め込む

すると地図が表示されます。。。

012

赤線の 共有 のところをクリックし

013

非公開になっているので、変更 をクリックし

014

赤線のところの ウェブ上で一般公開をオン に設定します。

015

自分のサイトに埋め込む を選び
URLをコピーし、表示したいページにペーストします。

016

こんな感じに表示されました。

実際のページはこちら

スプレッドシートは初めて使ってみましたが、
以外に簡単に地図にできました。

2016年5月20日追記:
住所だと実際の地図の位置とずれてる場合がありますので
ポイントを動かして調整して下さい。



No Comments

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>