Googleマップで複数の場所にマーカーを立てることができれば、地域内の各種レストランや訪問場所を見やすく表示できます。また訪問場所の距離感を比較するのにとても便利です。
これを実現するには、Googleマップの「マイマップ」という機能を使って実現します。
Googleマップのマイマップの使い方【初級】
簡単にマイマップの使って複数マーカー表示の方法について説明します。
まず最初に、グーグルクロームを開いてログインしておきます。
新しいマイマップを作成する
例として東京都世田谷区の駒沢公園西口近くのカフェ６件を、マーカー表示するGoogleマップを作ります。そしてワードプレスのサイトに張り付けるまでを順に説明します。
①Mr.FARMER 駒沢公園
②フレッシュネスバーガー駒沢
③Tacos Guild 駒沢
④TONE駒沢
⑤Curry House 咖喱座
⑥スターバックス駒沢
- マイマップで地図を作成するため「Google マイマップ」を開きます
- 左上の「新しい地図を作成」をクリックすると以下の英語表示が出ます。
- 右下の「CREATE」をクリックすると「無題の地図」と検索窓が表示されます。
- 「無題の地図」をクリックし、地図タイトルを入力して保存（例：駒沢公園西口）
- 上部の検索窓にマーカーを付けたいお店の名前（住所）を入力して検索する。※①
- 地図上にマーカーが表示されるので、そこが該当場所であれば「地図に追加」をクリック
- 必要に応じマーカの色と形はここで変更する。当面レイヤー名の変更は不要
- 続けて検索窓に、次の店のお店の名前（住所）を入力して検索･･･⑤～⑦の繰返しで店情報入力
- 入力が終わったら、サイドバー上の「共有」をクリックする
- 「地図の共有」の２か所のスイッチをONにして閉じます
- 記事内に地図を張るには、左上の┇から「自分のサイトに埋め込む」をクリックします
- 表示されているHTMLをサイトにコピペすれば＜iframe＞で埋め込みが完成します
- 注意：このままだと地図のヘッダーに作成者名が表示されてしまうので、コピペの際に下段の「ヘッダーにはオーナーの写真と名前を含めてください」をOFFにしてからOKを押します。※②
※① 地図上から登録するには、検索窓下の「マーカを追加」アイコンをクリックします。するとマウスポイントが+に変わって地図上の希望地点をクリックすれば登録できます。
マイマップ共有する時にアカウント名を非表示にしたい
※②参考までにマップヘルプのコミュニティで、以下のやり取りがあったので記しておきます。
2023.9.8 マイマップをHPに埋め込む際に作成者名などを非表示にしたいです。ネットで調べて出てきた「この地図で自分の名前と写真を公開する」をOFFにする。をしようにもONOFFのボタンは表示されないです。
2023.9.8 特にGoogleから発表になっているわけではないので断言はできませんが、作成者名を表示するように仕様が変わってしまったのではないかと思われます。新規のマイマップを共有した場合は、現在はアカウント名公開のみしか選択肢がないようです。
2023.9.23「自分のサイトに埋め込む」をクリックした画面でアカウント名の公開／非公開設定ができるようになったとの報告が、Googleマップのユーザーさんからありました。以下のページを参照ください。https://support.google.com/maps/thread/235665116?msgid=235667570
作成事例の地図表示【初級】
カフェ案内（6件）
世田谷区の駒沢公園西口のお店（レストラン）６件の案内用に作成してみました。
駒沢公園西口 公園通り
①Mr.FARMER 駒沢公園
②フレッシュネスバーガー駒沢
③Tacos Guild 駒沢
④TONE駒沢
⑤Curry House 咖喱座
⑥スターバックス駒沢
マイマップによる案内地図
左上の┇から「自分のサイトに埋め込む」をクリックして表示されたHTMLを以下にコピペしました。
マイマップの編集
作成済みのマイマップを編集する【初級】
- グーグルクロームを開いてログインする
- 左サイドバーの「保存済み」をクリック
- サイドバー上右の「マイマップ」をクリック
- その下の「マイマップを開きます」をクリック
- 今までに作成したサムネイル一覧が表示されるので、編集するマップを選択しクリック
- 作成した地図が表示されるので、追加する新しい店があれば検索して追加する
- 編集が終了したら、左上の┇から「自分のサイトに埋め込む」をクリックします
- 表示されているHTMLをサイトにコピペ（上書き）して完成です
地図表示の大きさを変更する【初級】
ワードプレスのエディタをコード表示にして、コピペするHTMLを編集します。
デフォルトでは、width=”640″ height=”480″ですが、ここのピクセルを好きな大きさに変更します。
●デフォルト（横640px 縦480px）
<iframe width=”640″ height=”480″ src=”https://www.google.com/maps/d/embed?･･･</iframe>
●変更例（横900px 縦600px）
<iframe width=”900″ height=”600″ src=”https://www.google.com/maps/d/embed?･･･</iframe>
マーカーの形や色を変更する【初級】
マーカーをクリックすると編集ができます。
ここでアイコンの形や色を変更してください。
他のアイコンを選択すればより多くの種類のアイコンが表示されます。
また、自分で作成した画像のアイコンを選ぶこともできます。
マーカーを番号に変更する【中級】
マーカの編集で「他のアイコン」を選択して番号の画像をアップロードすればマーカーを番号に変更できます。
番号画像は、pngで横36px、縦36pxを使いました。
お店の名前と場所の関係が分かりやすいように、1～6の番号を付けてみました。
Mr.FARMER 駒沢公園
フレッシュネスバーガー駒沢
Tacos Guild 駒沢
TONE駒沢
Curry House 咖喱座
スターバックス駒沢
マーカーを店名に変更する【上級】
ChatGPTに聞いてみた
マイマップで 地図上のマーカーに文字表示する
Googleマップの マイマップ では、地図上に配置したマーカーの「横に名前を表示」する機能は標準ではありません。
ただし、以下の方法で「場所名を見やすくする」ことができます。
方法1：マーカーをクリックすると名前を表示
マイマップでマーカーを置くと、そのマーカーをクリックすると「タイトル（場所名）」と「説明」が吹き出しとして表示されます。
横に常時テキストを出すことはできませんが、この方法が基本的な使い方です。
方法2：マーカーアイコンを工夫する
マーカーの色やアイコンを変更して、判別しやすくする。アイコンに番号を振る（例：①、②、③）などして、右側のリストと照合する。
方法3：KML/KMZ編集（上級者向け）
マイマップをエクスポートして KMLファイル を編集すると、ラベル（地図上に常時表示されるテキスト）を設定できます。
編集後に再度マイマップへインポートすると、マーカーの横に名前を常時表示することが可能です。
常に名前を表示させる
📌 Googleマイマップの標準機能だけでは「常時ラベル表示」はできません。
（名前はクリックしないと吹き出しに出ない仕様です）
① アイコンに文字を入れる
マイマップの「カスタムアイコン」機能を使い、
地名や番号入りのアイコン画像 をアップロードして使う。
→ これなら地図上で常に名前や番号が見えます。
（例：丸いアイコンに「A」「B」「C」と入れておく → リストで「A＝東京駅」など対応）
② マーカー横に短縮したテキストを画像で表示
場所名を短くしたラベル画像（例：「新宿」「渋谷」）を作成し、アイコンとして利用。
実質「マーカーの横に文字がある」ように見せられます。
③ 他サービスを利用
uMap（OpenStreetMapベース） や Mapbox を使うと、
Googleマイマップより柔軟に「ラベル常時表示」ができます。
とくに uMap は無料で日本語対応しており、操作も簡単です。
uMapを使ってみる
uMapはGoogleマップとは全く異なるサービスでOpenStreetMap（OSM） というオープンデータの地図をベースにした無料サービスです。
Googleマイマップと似たように「自分専用の地図」を作成して、マーカーや線、エリアを追加できます。
URLを共有したり、Webサイトに埋め込んだりすることも可能です。
Googleマイマップとの違い
| 項目 | Googleマイマップ | uMap |
|---|---|---|
| ベース地図 | Googleマップ | OpenStreetMap |
| ラベル常時表示 | ❌ できない | ✅ 可能（オプションで設定） |
| 共有方法 | Googleアカウント前提 | リンク共有OK、アカウント不要でも使える |
| カスタマイズ | 限定的（色・アイコン程度） | 豊富（常時ラベル、レイヤー切替、アイコン画像アップロードなど） |
| 商用利用 | 条件あり（Google規約） | OSM規約に準拠（比較的自由） |
とりあえすログインせずにuMapを使ってみましたが、慣れていないので使いにくいのと、表示がすごく遅くて使いずらい。やはりGoogleマップの表示スピードは素晴らしい。
ネット速度が速くても、uMapの動作が遅いのは ユーザー環境ではなくサービス側の仕組み による部分が大きいです。
1. 地図データの違い
Googleマップ：商用サービス。巨大なCDN（世界中に分散したサーバー）でキャッシュを効率化し、爆速で表示。
uMap（OpenStreetMapベース）：オープンソースで非営利。サーバーはGoogleほど分散していないため、地図タイルの読み込みに時間がかかることがあります。
2. キャッシュの影響
ブラウザのキャッシュは効いていますが、uMapは利用者ごとにカスタム地図を動的に生成するので、Googleほどキャッシュ効果が強くありません。
3. 利用者数とサーバー負荷
OSM系サービスは寄付やボランティアで運営されているため、アクセス集中時に遅くなりがちです。
Googleマップで「ラベル常時表示」に近づける裏技
1. アイコンに文字を入れて使う
マイマップでは「カスタムアイコン」を設定可能。
そこで 地名や略称を入れたアイコン画像 を作成し、アップロードして利用。
→ 見た目は「マーカーの横に文字が出ている」ように見えます。
📌 例：
「渋谷」→「SHIBUYA」入りの丸アイコン
「新宿」→「Shinjuku」入りの小ラベル画像
2. 番号入りアイコン + リスト対応
マーカーに「①②③」など番号を入れたアイコンを使い、サイドのリストや凡例に「①＝東京駅、②＝新宿駅…」と書く。
→ 地図上では番号が常に見えるので、ラベル代わりになります。
3. Googleマイマップの「図形・線分」を活用
マーカーだけでなく「テキスト代わりの線や図形」を描くことも可能。
例：地名を「短いラインのタイトル」にして配置 → 半ばラベル代わりになる。
4. スクリーンショットで「完成版の地図」を作る
マイマップで大枠を作る → スクリーンショットに地名を直接書き込む（画像編集）
静的な「完成マップ画像」として配布するなら、この方法が一番わかりやすい。
5. Google Earthを活用
Google Earthでは「マーカー横に名前表示」ができます。
作成したKMLをGoogleマップにも読み込めるので、少し応用すれば近い使い方が可能です。
マイマップ埋め込み時の拡大率を変更する【上級】
GoogleマップをWebサイトにiframe埋め込みするとき、縮尺は「&zoom=15」で指定できます。数値を大きくするほど拡大され、小さくするほど縮小表示されます。
zoom=0 → 世界全体（最も引いた状態）
zoom=5 → 日本全体が見える
zoom=10 → 都道府県レベル
zoom=15 → 街区レベル（駅周辺など）
zoom=20 → 建物単位（最も詳細）
しかしGoogleマイマップの埋め込みURLでは &zoom=XX が効きません。理由は、マイマップはユーザーが保存したカスタム地図データを優先して表示する仕様だからです。
このため変更したい場合は、地図の中心点を強制してマイマップのURLに ll=緯度,経度&z=拡大率 の形式を付け加えます。
つまり駒沢公園西口だと&ll=35.62819, 139.65654&z=15 を付与するとズームレベルが効きます。
地図の中心点と拡大率を付けた場合
地図の中心点を駒沢公園西口（Mr.FARMER）緯度35.62819, 経度139.65654 マップから抽出
拡大率 18 希望の値
コメント