このページは Cloud Translation API によって翻訳されました。

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

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

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

カスタム 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',
});

マップ 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

サンプルを試す

JSFiddle.net Google Cloud Shell

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

地図に高度なマーカーをプログラマティックに追加するには、次のサンプルに示すように、新しい AdvancedMarkerElement を作成し、LatLng または LatLngAltitude と基本地図への参照を渡します。

  const marker = new AdvancedMarkerElement({
      map,
      position: { lat: 37.4239163, lng: -122.0947209 },
  });

地図からマーカーを削除するには、markerView.map または position を null に設定します。

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

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

TypeScript

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 map = new Map(document.getElementById('map') as HTMLElement, {
        center: { lat: 37.4239163, lng: -122.0947209 },
        zoom: 14,
        mapId: '4504f8b37365c3d0',
    });

    const marker = new AdvancedMarkerElement({
        map,
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
}
initMap();index.ts

JavaScript

async function initMap() {
    // Request needed libraries.
    const { Map } = await google.maps.importLibrary("maps");
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
    const map = new Map(document.getElementById('map'), {
        center: { lat: 37.4239163, lng: -122.0947209 },
        zoom: 14,
        mapId: '4504f8b37365c3d0',
    });
    const marker = new AdvancedMarkerElement({
        map,
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
}
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;
}
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>
  </head>
  <body>
    <div id="map"></div>

    <!-- 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>
  </body>
</html>index.html

サンプルを試す

JSFiddle.net

次のステップ

マーカーの基本的なカスタマイズ

マップにマーカーを追加する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

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

マップ ID を設定する

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

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

TypeScript

JavaScript

CSS

HTML

サンプルを試す

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

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

TypeScript

JavaScript

CSS

HTML

サンプルを試す

次のステップ

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

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

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

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