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

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

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

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

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

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

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

それでは早速。

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

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

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

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

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

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

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

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

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

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

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

▼共有してないよと怒られる！

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

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

▼共有する前に名前と説明を追加する。

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

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

▼変更をクリックすると以下の画面になる。

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

▼公開された設定になった。

▲「完了」を押す

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

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

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

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

▼こんな感じになったら失敗だ。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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