お知らせ: Google Maps Platform に間もなく新しい基本地図のスタイルが導入されます。このアップデートでは、デフォルトのカラーパレットが新しくなり、ピンが最新になったほか、地図のエクスペリエンスとユーザビリティも改善されています。すべての地図のスタイルは、2025 年 3 月に自動的に更新されます。ご利用の詳細およびいち早く使用する方法については、Google Maps Platform の新しい地図のスタイルをご覧ください。

このページは 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>
```

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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>index.html

サンプルを試す

JSFiddle.net Google Cloud Shell

次のステップ

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

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

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

HTML を使用してマーカーを追加する（ベータ）

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

TypeScript

JavaScript

CSS

HTML

サンプルを試す

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

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

TypeScript

JavaScript

CSS

HTML

サンプルを試す

次のステップ

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

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

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