マップにマーカーを追加する

プラットフォームを選択: Android iOS JavaScript

各マーカーを使って地図上に場所を表示します。このページでは、プログラマティックに追加する方法とカスタム HTML 要素を使用して追加する方法を説明します。

高度なマーカー ライブラリを読み込む

地図に高度なマーカーを追加するには、AdvancedMarkerElement と PinElement を提供する marker ライブラリを、地図のコードで読み込む必要があります。これは、アプリでマーカーをプログラマティックに読み込む場合も、HTML を使う場合も同様です。そのためには、アプリで事前に Maps JavaScript API を読み込む必要があります。

ライブラリの読み込みに使用する方法は、ウェブページが Maps JavaScript API を読み込む方法によって異なります。

  • ウェブページで動的スクリプトの読み込みを使用している場合は、ここに示すように、マーカー ライブラリを追加し、実行時に AdvancedMarkerElement（および任意で PinElement）をインポートします。

    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  • ウェブページでダイレクト スクリプト読み込みタグを使用している場合は、次のスニペットに示すように、読み込みスクリプトに libraries=marker を追加します。これにより、AdvancedMarkerElement と PinElement の両方がインポートされます。

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&libraries=marker" defer ></script>

マップ ID を設定する

高度なマーカーを使用するにはマップ ID が必要です（DEMO_MAP_ID を使用できます）。次のように、地図オプションでマップ ID を設定します。

const map = new Map(document.getElementById('map') as HTMLElement, {     center: { lat: 37.4239163, lng: -122.0947209 },     zoom: 14,     mapId: 'DEMO_MAP_ID', });

ウェブ コンポーネントを使用している場合は、gmp-map 要素でマップ ID を直接設定できます。

<gmp-map center="37.4239163,-122.0947209" zoom="14" map-id="DEMO_MAP_ID"></gmp-map>

マップ ID について詳しくは、こちらをご覧ください。

カスタム HTML 要素を使用してマーカーを追加する

カスタム HTML 要素を使用して高度なマーカーを追加するには、gmp-advanced-marker 子要素を gmp-map 要素に追加します。ウェブページにマーカーを追加するスニペットは次のとおりです。

<gmp-map   center="43.4142989,-124.2301242"   zoom="4"   map-id="DEMO_MAP_ID"   style="height: 400px" >   <gmp-advanced-marker     position="37.4220656,-122.0840897"     title="Mountain View, CA"   ></gmp-advanced-marker>   <gmp-advanced-marker     position="47.648994,-122.3503845"     title="Seattle, WA"   ></gmp-advanced-marker> </gmp-map>
index.html

サンプル ソースコードの全文を見る

このサンプルは、マーカーが配置された地図を HTML を使って作成する方法を示しています。

TypeScript

// This example adds a map with markers, using web components. async function initMap(): Promise<void> {     console.log('Maps JavaScript API loaded.'); } declare global {     interface Window {       initMap: () => void;     }   } window.initMap = initMap;
index.ts

JavaScript

// This example adds a map with markers, using web components. async function initMap() {   console.log("Maps JavaScript API loaded."); }  window.initMap = initMap;
index.js

CSS

/*   * Always set the map height explicitly to define the size of the div element  * that contains the map.   */ #map {   height: 100%; }  /*   * Optional: Makes the sample page fill the window.   */ html, body {   height: 100%;   margin: 0;   padding: 0; }  gmp-map {   height: 400px; } 
style.css

HTML

<html>   <head>     <title>Add a Map with Markers using HTML</title>      <link rel="stylesheet" type="text/css" href="./style.css" />     <script type="module" src="./index.js"></script>   </head>   <body>     <gmp-map       center="43.4142989,-124.2301242"       zoom="4"       map-id="DEMO_MAP_ID"       style="height: 400px"     >       <gmp-advanced-marker         position="37.4220656,-122.0840897"         title="Mountain View, CA"       ></gmp-advanced-marker>       <gmp-advanced-marker         position="47.648994,-122.3503845"         title="Seattle, WA"       ></gmp-advanced-marker>     </gmp-map>      <!--        The `defer` attribute causes the script to execute after the full HTML       document has been parsed. For non-blocking uses, avoiding race conditions,       and consistent behavior across browsers, consider loading using Promises. See       https://developers.google.com/maps/documentation/javascript/load-maps-js-api       for more information.       -->     <script       src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=maps,marker&v=beta"       defer     ></script>   </body> </html>
index.html

サンプルを試す

プログラマティックにマーカーを追加する

プログラマティックに高度なマーカーを地図に追加するには、次の例に示すように、新しい AdvancedMarkerElement を作成して地図に追加します。

TypeScript

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;  async function initMap() {     // Request needed libraries.     const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;     const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;      const marker = new AdvancedMarkerElement({         position: { lat: 37.4239163, lng: -122.0947209 },     });     mapElement.append(marker); }
index.ts

JavaScript

const mapElement = document.querySelector('gmp-map'); async function initMap() {     // Request needed libraries.     const { Map } = await google.maps.importLibrary("maps");     const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");     const marker = new AdvancedMarkerElement({         position: { lat: 37.4239163, lng: -122.0947209 },     });     mapElement.append(marker); }
index.js

地図からマーカーを削除するには、markerView.remove() を呼び出します。または、markerView.map または position のいずれかを null に設定します。

サンプル ソースコードの全文を見る

このサンプルは、地図にマーカーを追加する方法を示しています。

TypeScript

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;  async function initMap() {     // Request needed libraries.     const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;     const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;      const marker = new AdvancedMarkerElement({         position: { lat: 37.4239163, lng: -122.0947209 },     });     mapElement.append(marker); } initMap();
index.ts

JavaScript

const mapElement = document.querySelector('gmp-map'); async function initMap() {     // Request needed libraries.     const { Map } = await google.maps.importLibrary("maps");     const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");     const marker = new AdvancedMarkerElement({         position: { lat: 37.4239163, lng: -122.0947209 },     });     mapElement.append(marker); } initMap();
index.js

CSS

/*   * Always set the map height explicitly to define the size of the div element  * that contains the map.   */ gmp-map {   height: 100%; }  /*   * Optional: Makes the sample page fill the window.   */ html, body {   height: 100%;   margin: 0;   padding: 0; } 
style.css

HTML

<html>   <head>     <title>Default Advanced Marker</title>      <link rel="stylesheet" type="text/css" href="./style.css" />     <script type="module" src="./index.js"></script>     <!-- prettier-ignore -->     <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(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})         ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>   </head>   <body>     <gmp-map center="37.4239163,-122.0947209" zoom="14" map-id="4504f8b37365c3d0"></gmp-map>   </body> </html>
index.html

サンプルを試す

次のステップ