Google MapをHTMLページに埋め込む方法

Google MapをHTMLページに埋め込む方法

このページでは、Google MapをHTMLに埋め込む方法を詳しく解説します。各セクションには、基本的な方法から応用例まで幅広くカバーしています。

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" }] }
    ]
});
        
ページのトップに戻る

コメントを残す

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