Wordpress ブログ ホームページ制作

最新 | ホームページ制作でマイマップを作って埋め込む方法

自社の支社や支店を表示させたい!という要望や不動産のサイトで近隣情報を地図でお知らせできると便利!と考えているんだけど、どうやって表現したらいいのか分からない。

このページでは、そんなお悩み解決にピッタリの「マイマップ」の作成とそれをワードプレスに埋め込む方法を解説しています!

是非参考にして、今よりもユーザエクスペリエンス向上に役立ててください☆

マイマップを埋め込んだホームページがこれです

今回、マイマップの種類は航空写真を選択しています!

グーグルマップを使っています。黄色いところが新しく作ったポイントです。

マイマップの作成方法

あたらしく作ったポイントは黄色で建物のアイコンにしています。

アイコンの種類はめちゃくちゃあります。

最適なアイコンがなくて困るということはまずないでしょう。

むしろ、数が多過ぎて選ぶのに苦労すると思います。

今回は、1つのテーマで作りました。マップ内に載っている新しいポイントは、実は小学校です。

例として小学校にしました。このマップ内に3つの小学校があるのが分かります。

そして、このマイマップの機能には「レイヤード機能」があります。イラストを描く方なら分かると思いますが、「重ねる」という技法が使えます。

  • マイマップ①・・・近隣の小学校(黄色のアイコン)
  • マイアップ②・・・近隣の中学校(未作成)

上記を別々にマップを作って埋め込むこともできるし、①と②を重ねて表示させることもできます。

とても便利です。

  • 各ページにはそれに沿った、アクセスポイントを表示させる。
  • トップページにはすべてを重ねたマップを表示させる。

そんなことが出来ます!

なので、史跡・名所などを扱う旅行系、ガイド系、などに最適です。

たとえば。。。

各ページでは「カテゴリ お寺」として、その近隣のお寺ばかりをマークアップしたマップを表示させる。

トップページには「お寺」「神社」「史跡」すべてのアクセスポイントを表示させる、ということができます。

ということは・・・!?

ココがポイント

トップページに貼っているマイマップのそれぞれのアイコンをクリックして詳細ページをクリックすれば、そのサイト内の個別べーじに飛ばせることが出来、インデックス機能・検索機能としての役割も果たすことになります。

アクセスポイントのアイコンをクリックすると情報が表示させることが出来ます。

しかも、その情報を詳しく書いたページにリンクさせることも可能です。

なんて素敵なんでしょう!

近隣のポイントを検索出来て、なおかつ、詳しいページに飛ばすことが出来ます。

アクセスポイントのアイコンをクリックすると情報が表示させることが出来ます。

▲アイコンをクリックするとそのポイントの情報が表示されます。

ページビューも増加します!サイト内回遊率もアップします!滞在時間もアップします!将来的にはSEOとして高評価されるようになります。

高評価されれば、同じ内容を書いているライバルサイトよりもスコアが高くなり上位検索される可能性が高まります!

上記は少し大げさですがロジックは間違っていませんので、期待はしなくてもマイナスにはならないので良いと思います。

一番は、今以上にユーザーのお役に立てるサイトになるということです。

お役に立てている度合いが高まれば、自然と滞在時間などの各項目がアップしていきます。時間が経てばGoogleもちゃんと評価してくれると思います。

同じカテゴリのポイントを一覧で見ることもできます

同じカテゴリのポイントを一覧で見ることもできます

▲左上に折り畳みの開閉ボタンがあります。

ここをクリックすると黄色いアイコン(同じカテゴリ)の一覧が表示されるようになります。

一番上の「近隣不動産情報○○市」(仮)というところがこのマイマップのタイトルを表示できる場所です。

ここまで実際のマイマップを見ていただきましたがいかがだったでしょうか?

今すぐ使いたーい!と思っていただけましたでしょうか?

では、ここからはマイマップの作り方を解説します!

googleマイマップの作成方法

googleマイマップを開く

googleマイマップの作成方法

ここで「地図の作成」を選びます。

この後はいろんな項目があるので知りたい情報を見に行っていただいても問題ありません。

マイマップにログインします

新しい地図を作成

「新しい地図を作成」というボタンが左上にあるのでクリックしてください。

グーグルマップが表示されます。

マイマップを編集していきます

マイマップを編集

  • マイマップのタイトルを付けます
  • カテゴリ名を付けることが出来ます。レイヤード機能を使うときに便利です。
  • 地図の表示を選べます。(航空写真とか)
  • 検索窓にアクセスポイントとなる住所・件名・建物名などを打ち込んでマップを絞り込みます

アクセスポイントを設定する

今回は沖縄県庁と入力しました!

アクセスポイントを設定する

  1. ポイントを絞り込む!
  2. 「地図に追加」を押す!

マイマップに掲載するアイコンを設定します

マイマップに掲載するアイコンを設定

ここで設定出来ること

  1. アイコンの種類を選べます
  2. アイコンの色を設定できます
  3. アイコンを続き番号にすることが出来ます

※プレビューを押すとマイマップが表示されます!

アクセスポイントの情報を入力します!

アクセスポイントの情報を入力

▲ペンマーク(編集マーク)を押してください!

アクセスポイントの情報を入力

▲このような画面に切り替わります

  1. 説明欄で簡単なコメントやリンクを貼ることが出来ます。<a>タグも使えます。
  2. カメラのマークを押すと画像や動画を追加できます!

上記の処理をすることで、地図上のアイコンをクリックすると「情報」「リンク設置」「画像・動画」が表示されるようになります!

マイマップの埋め込みコードを取得する!

マイマップの埋め込みコードを取得・共有

▲「共有」を押します!

マイマップの埋め込みコードを取得

▲「変更」を押します!

マイマップの埋め込みコードの取り方手順

▲リンクの共有範囲を選択

  1. ウェブ上で一般公開をオンにします
  2. 保存を押します!

マイマップの埋め込みコード取得手順

▲縦に3つの丸があるところを押します!

「自分のサイトに埋め込む」を押します!

「自分のサイトに埋め込む」を押します!

▲マイマップの埋め込みコード<iframe・・・>という部分をコピーします!

マイマップの埋め込みコードを自分のサイトに埋め込む!

マイマップの埋め込みコードを自分のサイトに埋め込む方法

▲上記はワードプレスのブロックエディターを使用しています。HTMLモードで貼り付ければOK!です。

ポイント

旧エディターのクラッシックを使う時はテキストモードで貼り付けてください。

出来たら「下書き保存」または「更新」や「公開」を押してください。完成です!

マイマップ完成!

完成です!マイマップのアイコンをクリックして正常に表示されるか確認してみてください。

変更したい場合は編集を追加してください。

表示が反映されるまでには時間がかかる場合があります。(動画を追加した場合など)

表示がなかなかされない場合は、「ctrl」+「F5」を押して強制リロードしてみましょう。

◎レイヤード機能は複数のマップを重ねることが出来るというものです。今回、このページでは解説しませんでしたが、マップを複数作れるようになると自然とやり方が分かると思います♪ ぜひ挑戦してみてください。

ホームページ制作担当者様へ

今回のマイマップを使ってサイトの使い勝手の幅が広がります。

他社との差別化も簡単にできます。

是非、使ってみてください。

マイマップ制作のポイントまとめ

  • マイマップはGoogleアカウントがあればだれでも利用できる
  • 地図の編集者アカウントを追加・共有することもできる
  • カテゴリごとにマップを制作できる
  • 違うカテゴリのマップを重ねて(レイヤード)表示させることもできる
  • ポイントのアイコンの種類・色は自由に選べて設定できる
  • アクセスポイントの情報を表示させることが出来る
  • アクセスポイントの情報欄には他のページへのリンクを貼ることが出来る
  • 画像や動画を表示させることもできます!
  • クライアントさまに制作したホームページを納品する時は、アカウントを共有してあげれば、クライアントも制作者も編集できるようになります。
  • 編集をコチラでするときは、追加や修正のたびにカスタマイズ・編集料金をいただくことも可能です。
  • 編集をコチラでするときは、毎月の更新料をいただき管理することもできます。

以上、マイマップ作成の参考にしてください。お役に立てれば幸いです☆

本ページに記載のマイマップのスクリーンショット画像はすべてgoogleマイマップさんのモノです

今回解説したマイマップを使用したホームページ制作は、こちらをご覧ください。

このテーマがおすすめです!

こんなの欲しかった!クールでかっこいいWordPressテーマ

「BEAU」使いやすい!クールでかっこいいWordPressテーマNEW!

ブログアフィリエイター向けの高速表示!WEBデザイナーもビックリのトップページ!装飾多数!予約機能付きのWordPressテーマ「BEAU」!人気の高いワードプレステーマでコスパ良しッ!

初心者にもお勧めですよ!

「WING」アフィンガー5

アフィリエイトの成果をアップさせるワードプレステーマ

★アフィリエイトに特化したワードプレステーマ!

WINGはこんな方におすすめ!

アフィリエイトを本気で取り組みたい !

アドセンスブログに本気で挑戦したい!

ドロップシッピングに本気で取り組みたい!

新規ホームページ制作

ホームページ制作サービス

司法書士・行政書士・コンサルティング業を新しく立ち上げるにあたり、専用のホームページが欲しい!必要!という方にピッタリのホームページ制作サービスがあります!これで早く!低価格でホームページが持てます!開設できます!

ブログ開設サービスあり!

ブログ開設を受け付け中

ブログを始めたいけどよく分からない。自分だけの趣味のブログを持ちたい!アフィリエイト、アドセンス、副業などにも使えるブログを開設したい!ワードプレスでブログを作っていきたい!自分だけのドメイン(URL)を設定したブログを持ちたい!「WordpressでBLOGを開設します!ブログを始めたい人に最適!後は記事を入れるだけ!」はそんな夢を叶えるサービスです。

© 2020 WEBデザイナーブログ!ホームページ制作・ネットビジネス!