Google Mapの基本的な埋め込み方法

Google MapをHTMLに埋め込むには、Google Mapsの「共有」機能を利用して埋め込みコードを取得する方法が最も簡単です。

1. Google Mapsを開き、表示したい場所を検索します。
2. 左上のメニューから「共有」を選択します。
3. 「地図を埋め込む」タブを開き、表示されたコードをコピーします。
4. コピーしたコードを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キーを取得する必要があります。

1. Google Cloud Platformにログインします。
2. 新しいプロジェクトを作成し、「Google Maps JavaScript API」を有効化します。
3. 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" }] }
    ]
});