legend

Sample code supporting Google Maps Platform JavaScript API documentation. author(s): Geo Developer IX Documentation Team

HTML

<!doctype html>
<!--
 @license
 Copyright 2026 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->

<html>
  <head>
    <title>Custom Legend</title>

    <script>
      // prettier-ignore
      (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))})({
            });
    </script>
  </head>
  <body>
    <gmp-map center="-33.91722,151.23064" zoom="16.5" map-id="DEMO_MAP_ID">
      <div id="legend" slot="control-inline-start-block-start"></div>
    </gmp-map>
  </body>
</html>

CSS

/**
 * @license
 * Copyright 2026 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#legend {
  background-color: #fff;
  width: 15em;
  margin: 1em;
  border-radius: 8px;
  font-family: Roboto, Arial, sans-serif;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.title {
  padding: 0.5em 1em;
  font-weight: bold;
  font-size: 1.5em;
  margin-bottom: 0.5em;
  background-color: rgb(66, 133, 244);
  color: white;
  box-sizing: border-box;
}

.legend-item {
  margin: 0.5em 1em;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-bottom: 0.5em;
}

.legend-icon {
  margin-right: 1em;
  font-size: 24px;
}

.legend-text {
  font-size: 1.5em;
}

JavaScript

'use strict';
/**
 * @license
 * Copyright 2026 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */

const parkingSvg = `<svg fill="white" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M13 3H6v18h4v-6h3c3.31 0 6-2.69 6-6s-2.69-6-6-6zm.2 8H10V7h3.2c1.1 0 2 .9 2 2s-.9 2-2 2z"/></svg>`;
const librarySvg = `<svg fill="white" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 11.55C9.64 9.35 6.48 8 3 8v11c3.48 0 6.64 1.35 9 3.55 2.36-2.19 5.52-3.55 9-3.55V8c-3.48 0-6.64 1.35-9 3.55zM12 8c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3z"/></svg>`;
const infoSvg = `<svg fill="white" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>`;

const icons = {
  parking: {
    name: 'Parking',
    icon: parkingSvg,
    color: '#1E88E5', // Blue
  },
  library: {
    name: 'Library',
    icon: librarySvg,
    color: '#43A047', // Green
  },
  info: {
    name: 'Info',
    icon: infoSvg,
    color: '#E53935', // Red
  },
};

async function init() {
  const [{ AdvancedMarkerElement, PinElement }, { event }] = await Promise.all([
    google.maps.importLibrary('marker'),
    google.maps.importLibrary('core'),
    google.maps.importLibrary('maps'),
  ]);

  const mapElement = document.querySelector('gmp-map');
  const innerMap = mapElement.innerMap;

  // Wait for the map to load before building the legend.
  event.addListenerOnce(innerMap, 'idle', () => {
    void makeLegend();
  });

  const features = [
    {
      position: { lat: -33.91721, lng: 151.2263 },
      type: 'info',
    },
    {
      position: { lat: -33.91539, lng: 151.2282 },
      type: 'info',
    },
    {
      position: { lat: -33.91747, lng: 151.22912 },
 ...