Esta página foi traduzida pela API Cloud Translation.

Personalizar um mapa do Google Maps: legendas personalizadas

Visão geral

Confira este tutorial para saber como criar legendas em um mapa do Google. Geralmente, as legendas descrevem os símbolos e marcadores de um mapa. É possível criá-las usando o recurso de posicionamento dos controles personalizados.

O mapa a seguir contém uma legenda com informações sobre três marcadores personalizados.

A seção abaixo mostra todo o código necessário para criar o mapa e a legenda neste tutorial.

TypeScript

let map: google.maps.Map;  function initMap(): void {   map = new google.maps.Map(document.getElementById("map") as HTMLElement, {     zoom: 16,     center: new google.maps.LatLng(-33.91722, 151.23064),     mapTypeId: "roadmap",   });    const iconBase = "https://maps.google.com/mapfiles/kml/shapes/";   const icons: Record<string, any> = {     parking: {       name: "Parking",       icon: iconBase + "parking_lot_maps.png",     },     library: {       name: "Library",       icon: iconBase + "library_maps.png",     },     info: {       name: "Info",       icon: iconBase + "info-i_maps.png",     },   };    const features = [     {       position: new google.maps.LatLng(-33.91721, 151.2263),       type: "info",     },     {       position: new google.maps.LatLng(-33.91539, 151.2282),       type: "info",     },     {       position: new google.maps.LatLng(-33.91747, 151.22912),       type: "info",     },     {       position: new google.maps.LatLng(-33.9191, 151.22907),       type: "info",     },     {       position: new google.maps.LatLng(-33.91725, 151.23011),       type: "info",     },     {       position: new google.maps.LatLng(-33.91872, 151.23089),       type: "info",     },     {       position: new google.maps.LatLng(-33.91784, 151.23094),       type: "info",     },     {       position: new google.maps.LatLng(-33.91682, 151.23149),       type: "info",     },     {       position: new google.maps.LatLng(-33.9179, 151.23463),       type: "info",     },     {       position: new google.maps.LatLng(-33.91666, 151.23468),       type: "info",     },     {       position: new google.maps.LatLng(-33.916988, 151.23364),       type: "info",     },     {       position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775),       type: "parking",     },     {       position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496),       type: "parking",     },     {       position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587),       type: "parking",     },     {       position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267),       type: "parking",     },     {       position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644),       type: "parking",     },     {       position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569),       type: "parking",     },     {       position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781),       type: "parking",     },     {       position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578),       type: "library",     },   ];    features.forEach((feature) => {     new google.maps.Marker({       position: feature.position,       icon: icons[feature.type].icon,       map: map,     });   });    const legend = document.getElementById("legend") as HTMLElement;    for (const key in icons) {     const type = icons[key];     const name = type.name;     const icon = type.icon;     const div = document.createElement("div");      div.innerHTML = '<img src="' + icon + '"> ' + name;     legend.appendChild(div);   }    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend); }  declare global {   interface Window {     initMap: () => void;   } } window.initMap = initMap;index.ts

JavaScript

let map;  function initMap() {   map = new google.maps.Map(document.getElementById("map"), {     zoom: 16,     center: new google.maps.LatLng(-33.91722, 151.23064),     mapTypeId: "roadmap",   });    const iconBase = "https://maps.google.com/mapfiles/kml/shapes/";   const icons = {     parking: {       name: "Parking",       icon: iconBase + "parking_lot_maps.png",     },     library: {       name: "Library",       icon: iconBase + "library_maps.png",     },     info: {       name: "Info",       icon: iconBase + "info-i_maps.png",     },   };   const features = [     {       position: new google.maps.LatLng(-33.91721, 151.2263),       type: "info",     },     {       position: new google.maps.LatLng(-33.91539, 151.2282),       type: "info",     },     {       position: new google.maps.LatLng(-33.91747, 151.22912),       type: "info",     },     {       position: new google.maps.LatLng(-33.9191, 151.22907),       type: "info",     },     {       position: new google.maps.LatLng(-33.91725, 151.23011),       type: "info",     },     {       position: new google.maps.LatLng(-33.91872, 151.23089),       type: "info",     },     {       position: new google.maps.LatLng(-33.91784, 151.23094),       type: "info",     },     {       position: new google.maps.LatLng(-33.91682, 151.23149),       type: "info",     },     {       position: new google.maps.LatLng(-33.9179, 151.23463),       type: "info",     },     {       position: new google.maps.LatLng(-33.91666, 151.23468),       type: "info",     },     {       position: new google.maps.LatLng(-33.916988, 151.23364),       type: "info",     },     {       position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775),       type: "parking",     },     {       position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496),       type: "parking",     },     {       position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587),       type: "parking",     },     {       position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267),       type: "parking",     },     {       position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644),       type: "parking",     },     {       position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569),       type: "parking",     },     {       position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781),       type: "parking",     },     {       position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578),       type: "library",     },   ];    features.forEach((feature) => {     new google.maps.Marker({       position: feature.position,       icon: icons[feature.type].icon,       map: map,     });   });    const legend = document.getElementById("legend");    for (const key in icons) {     const type = icons[key];     const name = type.name;     const icon = type.icon;     const div = document.createElement("div");      div.innerHTML = '<img src="' + icon + '"> ' + name;     legend.appendChild(div);   }    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend); }  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; }  #legend {   font-family: Arial, sans-serif;   background: #fff;   padding: 10px;   margin: 10px;   border: 3px solid #000; }  #legend h3 {   margin-top: 0; }  #legend img {   vertical-align: middle; } style.css

HTML

<html>   <head>     <title>Custom Legend</title>      <link rel="stylesheet" type="text/css" href="./style.css" />     <script type="module" src="./index.js"></script>   </head>   <body>     <div id="map"></div>     <div id="legend"><h3>Legend</h3></div>      <!--        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&callback=initMap&v=weekly"       defer     ></script>   </body> </html>index.html

Testar amostra

JSFiddle.net (link em inglês) Google Cloud Shell

Nas seções abaixo, explicamos as principais etapas da criação de legendas.

Criar o contêiner de legenda

A tabela abaixo explica o código que personaliza a legenda.

Código e descrição
`<div id="legend"><h3>Legend</h3></div>`	Cria uma `div` para armazenar o conteúdo. Adiciona um cabeçalho de três (3) níveis à `div`.
`map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push (document.getElementById('legend'));`	Posiciona a `div` no canto inferior direito do mapa adicionando uma posição de controle. Confira mais opções de posição de controle.
`<style> #legend { font-family: Arial, sans-serif; background: #fff; padding: 10px; margin: 10px; border: 3px solid #000; } </style>`	Aplica estilo ao controle de legenda usando CSS.

Adicionar o conteúdo da legenda

Use a definição de estilo dos marcadores atuais para inserir conteúdo na legenda.

var legend = document.getElementById('legend'); for (var style in styles) {   var name = style.name;   var icon = style.icon;   var div = document.createElement('div');   div.innerHTML = '<img src="' + icon + '"> ' + name;   legend.appendChild(div); }