【今すぐできる】HTMLでGoogleマップを作ってWebサイトをワンランクアップ！
HTMLとGoogleマップを緯度経度でリンクする方法
このチュートリアルでは、HTMLを使用して、特定の緯度と経度を指定したGoogleマップへのリンクを作成する方法を説明します。
方法
-
Googleマップを開く
-
目的の場所へ移動
-
リンクを取得
以下のいずれかの方法で、マップのリンクを取得できます。
- 共有ボタンを使用する:
- 画面右上の共有ボタンをクリックします。
- 「リンクを共有」または「埋め込みコードを取得」を選択します。
- 生成されたURLをコピーします。
- 共有ボタンを使用する:
-
HTMLにリンクを挿入
取得したリンクを、HTMLの
<a>タグ内に挿入します。<a href="{リンク}">場所名</a>{リンク}を、取得した実際のリンクに置き換えます。場所名は、リンクテキストとして表示されるテキストです。
例
以下の例は、緯度37.7749、経度-122.4194にあるゴールデンゲートブリッジへのリンクを作成するものです。
<a href="https://www.google.com/maps/@37.7749,-122.4194,17">ゴールデンゲートブリッジ</a>
補足
- 複数の場所へのリンクを作成したい場合は、
<ul>と<li>タグを使用してリストを作成することができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Googleマップへのリンク</title>
</head>
<body>
<a href="https://www.google.com/maps/@35.6895863,139.762044,17">東京駅</a>
<a href="https://www.google.com/maps/@40.689241,-74.044500,17">自由の女神</a>
<a href="https://www.google.com/maps/@48.8583796,2.294504,17">エッフェル塔</a>
</body>
</html>
このコードを実行すると、以下の結果が表示されます。
説明
- このコードは、HTML5を使用して記述されています。
<a>タグを使用して、ハイパーリンクを作成しています。href属性には、リンク先のURLを指定します。- リンクテキストは、
<a>タグ内のテキストとして表示されます。
カスタマイズ
このコードは、ニーズに合わせてカスタマイズすることができます。
- リンク先の緯度と経度を変更して、別の場所へのリンクを作成できます。
- リンクテキストを変更して、よりわかりやすい説明にすることができます。
- CSSを使用して、リンクのスタイルを変更することができます。
Googleマップへのリンク作成方法：その他の方法
Googleマップ上で目的の場所を表示している場合、共有機能を使用して簡単にリンクを作成できます。
- 生成されたURLをコピーして、好きな場所に貼り付けます。
地名または住所
緯度・経度がわからない場合は、地名または住所を使用してリンクを作成できます。
- Googleマップで検索バーに地名または住所を入力します。
- 検索結果から目的の場所を選択します。
- 上記のGoogleマップの共有機能と同様に、共有ボタンを使用してリンクを取得します。
パラメータ付きURL
Googleマップは、URLにパラメータを追加することで、様々なオプションを設定することができます。
基本的なURLは以下の通りです。
https://www.google.com/maps?q={場所名または住所}
このURLを以下のようにパラメータを追加することで、ズームレベルやマーカーの表示などを設定できます。
z: ズームレベル（例：z=17）marker: マーカーの位置（例：marker=37.7749,-122.4194）output: 出力形式（例：output=embed）
詳しくは、Googleマップのドキュメント https://developers.google.com/maps/get-started を参照してください。
プラグインやライブラリ
WordPressなどのCMSを使用している場合は、Googleマップへのリンク作成を容易にするプラグインやライブラリが利用できます。
これらのツールを使用すると、緯度・経度を入力するだけで簡単にリンクを作成したり、マップをカスタマイズしたりすることができます。
HTMLと緯度・経度以外にも、様々な方法でGoogleマップへのリンクを作成することができます。
目的に合った方法を選択して、ご自身のWebサイトやブログにGoogleマップを埋め込んでください。
html google-maps
