Google マップをウェブページに追加する

HTML、CSS、JavaScript コードを使用して、Google マップをウェブページに追加できます。このページでは、ウェブページに地図を追加し、プログラムで地図インスタンスにアクセスする方法について説明します。

概要

地図を読み込むには、ウェブページで次のことを行う必要があります。

  • ブートストラップ ローダを使用して Maps JavaScript API を読み込みます。ここに API キーが渡されます。HTML または JavaScript のソースファイルに追加できます。
  • 地図を HTML ページに追加し、必要な CSS スタイルを追加する。
  • maps ライブラリを読み込み、地図を初期化する。

gmp-map 要素を使って地図を追加する

gmp-map 要素は、Google マップをウェブページに追加する推奨の方法です。これは、ウェブ コンポーネントを使用して作成されるカスタム HTML 要素です。gmp-map 要素を使用して地図をウェブページに追加する手順は次のとおりです。

  1. ブートストラップを含む script 要素を HTML ページに追加するか、script 要素なしで JavaScript または TypeScript のソースファイルに追加します。API キーとその他のオプションでブートストラップを構成します。動的ライブラリのインポートまたはスクリプトの直接読み込みのいずれかを選択できます。この例は、HTML ページに動的スクリプト読み込みブートストラップを追加する方法を示しています。

    <script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async