サイト/ブログへマップを埋め込む方法

はじめに

 Google Maps を始めとして、オンラインのマップサービスは沢山存在します。今回は特にサイトやブログにマップを埋め込む方法について、プログラミング不要なものに限定して、それらのサービスをまとめたいと思います。

マーカーで場所を伝える方法

 お店の場所などをサイト訪問者に伝える方法です。

Google Maps 埋め込みコード

 Google Maps では、「共有」→「地図を埋め込む」から簡単にサイト用の埋め込みコードを取得することができます。おそらく最もスタンダードな地図の埋め込み方法です。ユーザーも Google Maps を使っている可能性が高いので、サイトを見た人がすぐに場所を保存できるのが魅力だと思います。
→「Googleマップをホームページやブログに埋め込むカンタンな方法」
 

WP OSM プラグイン

 ワードプレスを使ってサイトを運営している人なら、「WP OSM Plugin」を使って、OSM の地図をサイトに埋め込むことができます。色々な種類のマーカーを使ったり、インフォウィンドウ(ポップアップ)に文章を書き込んだりすることが可能です。
 

Google Maps ディープリンク

 埋め込みマップとは異なりますが、Google Maps ではある地点を中心としてマップが開くようなリンクを提供しています。内容については別ページにまとめたので、そちらをご参照ください。

 

ルートマップを作る方法

 複数のマーカーを描画して、ルートマップを作る方法です。

Google My Map

 Google Maps には、ドライブ上に保存したマップを共有できる「Google My Map」という機能があります。Google My Map では、複数のマーカーを立てたり、それらのマーカーに通し番号を振ったりすることができます。Google アカウントさえあれば、誰でもすぐに利用することができます。
→「Googleマップの「マイマップ」とは?使い方や活用方法を紹介」
 

Leaflet Maps Marker

 WordPress 上でマップを管理したいなら、「Leaflet Map Maker」が便利です。Leaflet Map Maker では、WordPress の管理画面上で編集・データ保存をすることができます。有償版にすれば、より複雑なカスタマイズを行うことも可能です。
 (→「OSMをWordPressに組み込めるプラグイン:Leaflet Maps Marker」
 

KML-LogoFullscreen-LogoGeoRSS-Logo
Leaflet Map Maker

マップを読込み中 - しばらくお待ち下さい...

東京駅: 35.680708, 139.767122
神田: 35.691452, 139.770877
秋葉原: 35.698135, 139.773259
御徒町: 35.706630, 139.774654
上野: 35.713560, 139.776435

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です