テイクアウト可能な飲食店マップを簡単に作る方法

この記事について

コロナの影響でテイクアウトを始める飲食店が増えていると思いますが、どこがやってるのかわからなかったり、お店を応援したいけどどうしたら良いかなと思う方もいると思います。

Googleのサービスを用いてテイクアウト可能なお店一覧を作ってみたので、同様に作ってみたい方向けに作成方法をまとめました。

作れるもの

谷根千テイクアウトマップ

数十分くらいでこんな感じで作ることができます(お店のデータを集める時間は除いてます)。一番時間がかかるのはお店をぽちぽち登録することなので笑、実質作成にはほとんど時間はかかりません。

前提

用意するもの

・Googleアカウント(既存でも良いですが別で作りたい場合は新規で取得)
・掲載したいお店のデータ(上記のマップではテイクアウトしているお店のメニュー写真と一言コメントを集めました)

利用する機能

・Googleマップ
・Googleサイト

作り方

1. まずGoogleマップでマイマップを作ります。

概要 - Google マップ

マイマップを新規作成します

作成したマイマップにお店を追加していきます。
検索窓から検索して地図に追加します。

写真を追加したり編集を行うことができます。
また、地図に追加すると左側のレイヤのところに追加されます。

ちなみに、地図の領域を固定したい場合は、デフォルトビューを固定すればその領域で固定されます。

作ったマップを公開したいときや他の編集者と共有したい場合は、共有設定から設定できます。

共有の右にあるプレビューを押すと以下のような画面になります。
ここまででマイマップ側の準備は完了です。

参考) 作った地図を自分のホームページに埋め込みたいとき

今回はGoogleサイトを使ったホームページ作成について説明していきますが、自分の既に持っているホームページにマイマップを埋め込みたい場合についても紹介しておきます。

検索アイコンの右にある3点ポチマークをクリックすると、地図を埋め込むというのが出てきます。

ここで、公開をしていない状態で地図を埋め込むというのをクリックするとエラーになります。右下にある許可設定を変更というところをクリックして共有設定を変更します。

共有したい範囲に合わせて選んでください。ここでは全体へ公開することを前提にウェブ上で一般公開というのを選んでいます。

このあともう一度地図を埋め込むというのをクリックすると以下のように埋め込みのためのHTMLコードが生成されます。これをコピーして設置したいところに貼り付ければ完了です！

2. Googleサイトでホームページを作る

Googleサイトは以下から新規作成できます。
会社内でGoogleを利用している場合などはポータルサイトにも利用していたりすると思います。今回はこのサイトを用いて簡単なホームページを作ります。

Google Drive: Sign-in

右下の+マークから新規作成できます。

今回は最低限の説明ということで地図の埋め込み方法だけ説明します。Googleサイトでは右側にあるメニューを選ぶと説明文を追加したり画像を埋め込んだりと様々なページ編集が行えます。

いろいろなメニューがありますがその中に地図というのもあります。

地図メニューを選んでクリックし、マイマップを選んで埋め込みたいマイマップを選択します。

地図が埋め込まれました！
ちなみに、実際に公開したときに表示される画面をプレビューして確認することができます。右上にあるプレビューアイコンをクリックします。

プレビューはパソコン表示画面でも確認できますし、下のようにスマホだとどのように表示されるかも確認できます。便利！

最後に、作成したサイトを公開します。

公開するためにはウェブアドレスを指定する必要があります。
ウェブアドレス欄に好きな文字を入力します。サイトとして利用できるものであれば入力欄の右端に✔︎が入ります。利用できない場合はエラーが出ます。

入力したら公開をクリックします。

これでホームページとして公開されました！
なお、公開されたサイトの表示を確認することができます。
公開ボタンの右にある▼アイコンをクリックして、公開したサイトを表示というメニューを選びます。

以上です！
アクセス状況も解析したい場合はGoogleアナリティクスも埋め込むことができるので必要な方はぜひ使ってみてください。

コロナで飲食店の皆さんは大変な状況かと思いますが、、こうした形で少しでも応援できればと思っています。