Google MapをHTMLページに埋め込む方法
このページでは、Google MapをHTMLに埋め込む方法を詳しく解説します。各セクションには、基本的な方法から応用例まで幅広くカバーしています。
Google Mapの基本的な埋め込み方法
Google MapをHTMLに埋め込むには、Google Mapsの「共有」機能を利用して埋め込みコードを取得する方法が最も簡単です。
- Google Mapsを開き、表示したい場所を検索します。
- 左上のメニューから「共有」を選択します。
- 「地図を埋め込む」タブを開き、表示されたコードをコピーします。
- コピーしたコードをHTMLの適切な場所に貼り付けます。
以下は、埋め込みコードを使用した例です。
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.8354345093647!2d144.95373531531665!3d-37.8162794420217!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0xf577d6c2009db9d3!2sFederation%20Square!5e0!3m2!1sen!2sjp!4v1234567890123!5m2!1sen!2sjp"
width="600"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy"
></iframe>
このコードを貼り付けるだけで、地図が表示されます。
ページのトップに戻る埋め込みコードを使用する方法
iframeタグを使った埋め込みはシンプルですが、表示する地図の範囲や場所を微調整したい場合があります。その際は、埋め込みコード内のクエリパラメータを変更します。
パラメータの例
- width: 地図の幅(例:600px)。
- height: 地図の高さ(例:450px)。
- src: 埋め込む地図のURL。
以下は、特定の場所を指定した例です。
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.8354345093647!2d144.95373531531665!3d-37.8162794420217"
width="800"
height="600"
style="border:1px solid black;"
allowfullscreen=""
loading="lazy"
></iframe>
ページのトップに戻る
Google Maps APIの基本
Google Maps APIを使用すると、より高度な地図の操作や表示が可能です。APIを使用するには、Google Cloud PlatformでAPIキーを取得する必要があります。
- Google Cloud Platformにログインします。
- 新しいプロジェクトを作成し、「Google Maps JavaScript API」を有効化します。
- APIキーを取得し、コード内で使用します。
以下は、Google Maps APIを使用したシンプルな地図表示の例です。
<div id="map" style="height:500px; width:100%;"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script>
function initMap() {
var location = { lat: -37.816279, lng: 144.953735 };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: location
});
var marker = new google.maps.Marker({
position: location,
map: map
});
}
window.onload = initMap;
</script>
ページのトップに戻る
静的地図を表示する方法
動的な地図ではなく、静的な地図画像を埋め込みたい場合は「Google Static Maps API」を使用します。
以下は、静的地図の例です。
<img src="https://maps.googleapis.com/maps/api/staticmap?center=Federation+Square,Melbourne&zoom=14&size=600x300&key=YOUR_API_KEY" alt="Static Map">
ページのトップに戻る
動的地図を表示する方法
動的地図では、地図のズームやパン、マーカーの追加などの機能を提供します。以下は基本的なコードです。
<div id="dynamicMap" style="height:400px; width:100%;"></div>
<script>
function initDynamicMap() {
var location = { lat: 35.6895, lng: 139.6917 };
var map = new google.maps.Map(document.getElementById('dynamicMap'), {
zoom: 10,
center: location
});
}
initDynamicMap();
</script>
ページのトップに戻る
地図のカスタマイズ
Google Maps APIでは、スタイルやマーカー、情報ウィンドウなどをカスタマイズできます。
以下は、カスタマイズの例です。
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: { lat: -37.816279, lng: 144.953735 },
styles: [
{ featureType: "water", stylers: [{ color: "#blue" }] },
{ featureType: "road", stylers: [{ visibility: "off" }] }
]
});
ページのトップに戻る