グーグルマップ上でお店のランキング・店名表示する方法

管理人が訪れたおすすめのラーメン・中華そばのページをつくった。

今後もラーメン・中華そばを食べて随時更新していきたい。

しかし上記のページを作るときにGoogleマップでランキングの数字、店名が一つのマップで表示できるように学習したのでその方法の備忘録。

同一のマップ上で複数のフラグを立てるということね。

Googleマップのマイマップ

参考にさせていただいたのは以下のサイト。

【googleマップ】マイマップの作り方。食べ歩きやショッピング、旅行で大活躍! | できるネット

最近は、分からない人の気持ちを理解せず、自分しか分からないだろうという記事が目立つ中、ほんとにありがとうございます!

それでは早速。

▼Googleマップを開きメニューボタンをクリックする。
googleマップ

▼マイプレイスをクリックする。
マイプレイス

▼マイマップをクリックする。
マイマップ

▼地図を作成をクリックする。
地図を作成

▼検索して場所を追加していく。
検索する

▼具体的な場所を選択すると、左側の「レイヤ」に表示され、マウスを持っていくと+ボタンが浮かび上がる。
プラスボタンを押す

▼+ボタンを押して、追加したい場所をさらに検索し、+ボタンで追加していく。
マップに追加

左側のレイヤに追加され、地図上にもフラグが立っている。

▼サイトに埋め込む準備をする。
サイトに埋め込む準備

▲四角で囲ったボタンをクリックする。

▼「自分のサイトに埋め込む」をクリック。
自分のサイトに埋め込む

▼共有してないよと怒られる!
埋め込みOK

▲OKを押して設定をする。

▼共有ボタンをクリックする。
共有

▼共有する前に名前と説明を追加する。
地図タイトルをつける

▲名前を付けたら「OK」をクリック。

▼非公開になっているので、公開に設定変更する。
非公開を公開に

▼変更をクリックすると以下の画面になる。
ウェブ上で一般公開

▲「オン-ウェブ上で一般公開」にチェックを入れる。
「保存」を押す。

▼公開された設定になった。
完了を押す

▲「完了」を押す

▼サイトに埋め込むをやり直し
サイトに埋め込む準備

自分のサイトに埋め込む

▼ソースコードをコピーする。
ソースコード

このコードをブログ記事に貼り付けるわけだが、レスポンシブのブログの場合、「width”640”」となっている部分、「640」を書き換えてご自身のブログ幅など調整可能だよ。

ワードプレスやはてなブログなど、「html編集」とか、「テキスト」などのモードで入力しないとコードがそのまんま表示されてしまうので注意が必要だよ~

▼こんな感じになったら失敗だ。
コード貼り付け失敗

▼はてなブログの場合「html編集」にして貼り付け。

htmlはてな

▼ワードプレスの場合は「テキスト」にして貼り付け。
ワードプレステキスト

ざっとマイマップを作成してブログに貼り付ける、までを解説したが、順位と店名を表示させることは後からでも可能なので、先に貼り付けるところまでを解説した。

Googleマップで設定すれば自分のブログに埋め込んだマップにも反映されるので、マイマップを編集すれば良いわけだ。
滅茶苦茶便利!

続いてランキングと店名を表示するように設定する説明を行う。

▼マイプレイスをクリックする。
マイプレイス

▼マイマップをクリックする。
マイマップ

▼先ほど作成したマップをクリックする。
マイマップ選択

▼「マイマップで開く」をクリックする。
マイマップで開く

▼「個別スタイル」をクリックする。
個別スタイル

▼「場所のグループ化方法」、「ラベルを設定」を変更する。
名前とラベルの設定

▼「続き番号」、「名前」に変更する。
続き番号と名前

▼店名には数字が、マップ上には店名が追加された。
マップに表示された

順番は追加した順番になっているので、ランキングに変更したい。

「函館朝市」を前後にドラッグして順位が変わる。

順位変更

もちろん地図上も連動してランキング表示されるし、この操作を行ったら自分のブログに貼り付けたマップも連動している。

Googleマップのこの機能は非常に楽しい。

いろいろなマップを作って他人と共有したりするとさらに楽しいかも!