【解決方法】ウェブサイト用のレスポンシブマップを作成するにはどうすればよいですか

Mike が提案したように、クエリに HTML と JavaScript のタグを付けた場合、最初のリンクは次のとおりです。 レスポンシブ Google マップをウェブサイトに追加する 5 つの方法[^]

単純な Google マップについては、次の最も簡単な方法があります。 ここで別の参考資料[^]:

1. Google マップ Web サイトにアクセスします。
2. 埋め込み地図で取り上げたい場所を検索します。
3. 「共有」をクリックします。
4.[マップを埋め込む]をクリックして、埋め込みのプレビューを表示します。 ここでは、地図エリア、ズーム、タイプ (市街図または衛星地図)、およびサイズ (必要に応じてカスタム サイズを含む) を切り替えることができます。
5. 埋め込む準備ができたら、「HTML をコピー」をクリックします。
6. HTML ファイルで、ページ上の地図を表示する場所に埋め込みコードを貼り付けます。 コードは次のようになります (マップに選択したサイズによっては異なる場合があります)。
7. HTML ファイルを保存し、Web ブラウザでファイルを開いて、実際のマップを表示します。
8. HTML と CSS を少し追加して、埋め込みマップの応答性を高めます
コード：
1. 既存の埋め込みコードを取得し、HTML ドキュメントに配置します。 次に、 <iframe> コンテナ内の要素 (マップを表す) <div> クラス google-map を使用します。

<div class="google-map">
     <iframe src="[your unique google URL] " width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

2. 次に、CSS に次のコードを追加します。

.google-map {
     padding-bottom: 50%;
     position: relative;
}

.google-map iframe {
     height: 100%;
     width: 100%;
     left: 0;
     top: 0;
     position: absolute;
}

画面サイズに合わせて Web サイト上に地図を作成するには、Google Maps JavaScript API または別のマッピング ライブラリを利用できます。 マップ コードをコンテナ div 内に配置するだけです。

<div id="map-container"></div>

CSS を使用して、パーセントベースの幅を使用するなどのデザイン原則を適用します。 さまざまな画面サイズを制御するには、以下のようなメディア クエリの採用を検討するとよいでしょう。

#map-container {
    height: 60vh; /* Adjust the height as needed */
    width: 100%;
}