{"id":9414,"date":"2022-10-18T15:56:26","date_gmt":"2022-10-18T18:56:26","guid":{"rendered":"https:\/\/geoblog.mkwebb.com.br2\/?p=9414"},"modified":"2024-07-29T19:03:14","modified_gmt":"2024-07-29T22:03:14","slug":"marcadores-avancados-do-google-maps-customize-seus-mapas-com-os-novos-recursos","status":"publish","type":"post","link":"https:\/\/geoambiente.com.br\/blog\/marcadores-avancados-do-google-maps-customize-seus-mapas-com-os-novos-recursos\/","title":{"rendered":"Marcadores avan\u00e7ados do Google Maps: customize seus mapas com os novos recursos"},"content":{"rendered":"\r\n

Os marcadores <\/strong>do Google Maps <\/strong>ajudam a criar experi\u00eancias de mapeamento imersivas e relevantes para os usu\u00e1rios, seja qual for o caso de uso, o setor, se na web ou nos dispositivos m\u00f3veis. O marcador \u00e9 elemento central para uma experi\u00eancia baseada em mapas!<\/p>\r\n\r\n\r\n\r\n

O Google inova constantemente para tornar os recursos de marcadores do Google Maps<\/strong> mais avan\u00e7ados e f\u00e1ceis de usar. E agora anuncia a visualiza\u00e7\u00e3o de marcadores avan\u00e7ados para a JavaScript API <\/strong>do Google Maps. Com ela, voc\u00ea pode criar marcadores de desempenho mais r\u00e1pidos e altamente personalizados que proporcionam uma experi\u00eancia de usu\u00e1rio mais rica, exibem sua marca e economizam tempo e recursos.<\/p>\r\n\r\n\r\n\r\n<\/span>\r\n\r\n\r\n\r\n

Marcadores do Maps: principais recursos e casos de uso<\/h2>\r\n\r\n\r\n\r\n

Personalize o \u201calfinete\u201d (pin) vermelho do Google Maps
<\/em><\/strong>A possibilidade de personalizar o pino vermelho padr\u00e3o \u00e9 uma solicita\u00e7\u00e3o antiga dos desenvolvedores. Com a nova classe \u201cPinView\u201d em marcadores avan\u00e7ados, agora \u00e9 poss\u00edvel alterar a cor, o plano de fundo, o \u00edcone e o contorno do pino vermelho padr\u00e3o diretamente em seu c\u00f3digo, sem a necessidade de imagem.<\/p>\r\n\r\n\r\n\r\n

Na pr\u00e1tica, essa funcionalidade tem v\u00e1rias aplica\u00e7\u00f5es. Por exemplo:<\/p>\r\n\r\n\r\n\r\n

    \r\n
  • Uma rede de restaurantes<\/strong> pode alterar os marcadores dos locais de suas lojas para refletir as cores da marca;<\/li>\r\n
  • Uma empresa do setor de viagens<\/strong> pode alterar as cores e os \u00edcones ao redor dos hot\u00e9is, para facilitar a escolha do hotel ideal pelos usu\u00e1rios com base nas comodidades ao redor;<\/li>\r\n
  • Uma empresa de log\u00edstica<\/strong> pode alterar a cor de um marcador para refletir o status de um pacote ou ve\u00edculo conforme as altera\u00e7\u00f5es ocorrem em tempo real.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n

    Suporte direto de SVGs e PNGs para criar marcadores personalizados
    <\/em><\/strong>Outro modo de personalizar um marcador \u00e9 usar seu pr\u00f3prio recurso de imagem, como um \u00edcone ou uma foto. \u00c9 poss\u00edvel usar qualquer formato de imagem compat\u00edvel com a tag HTML img<\/code>, como PNGs e SVGs. Ou usar CSS para estilizar e animar marcadores avan\u00e7ados dinamicamente, incluindo altera\u00e7\u00e3o de tamanho, opacidade, posi\u00e7\u00e3o, cor e muito mais.<\/p>\r\n\r\n\r\n\r\n

    Ficou mais f\u00e1cil adicionar experi\u00eancias de marcadores din\u00e2micos em um mapa do Google do que nunca. Por exemplo, voc\u00ea pode usar seu logotipo ou outros ativos de marca para incorporar sua marca mais profundamente em seus mapas.<\/p>\r\n\r\n\r\n

    \r\n
    \"\"\r\n
    Exemplo de marcadores animados personalizados criados com imagens SVG<\/em><\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n

    Experi\u00eancias contextuais e interativas com marcadores personalizadas
    <\/em><\/strong>Tamb\u00e9m \u00e9 poss\u00edvel criar marcadores avan\u00e7ados personalizados usando qualquer elemento HTML personalizado que responda \u00e0s intera\u00e7\u00f5es do usu\u00e1rio e possa ser estilizado com toda a flexibilidade do CSS. Com isso, voc\u00ea cria experi\u00eancias de marcador atraentes e interativas que antes eram dif\u00edceis de construir sem o uso de sobreposi\u00e7\u00f5es personalizadas complexas. Como exemplo, uma empresa imobili\u00e1ria agora pode permitir que os marcadores exibam pre\u00e7os de propriedades e informa\u00e7\u00f5es \u00fateis adicionais, como endere\u00e7o da propriedade, metragem quadrada e n\u00famero de quartos e banheiros.<\/p>\r\n\r\n\r\n

    \r\n
    \"\"\r\n
    Demonstra\u00e7\u00e3o do uso de caso de empresa imobili\u00e1ria utilizando marcadores personalizados com elementos HTML para exibir os pre\u00e7os dos im\u00f3veis<\/em><\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n

    Melhor desempenho e acessibilidade do marcador Google Maps<\/h2>\r\n\r\n\r\n\r\n

    Marcadores avan\u00e7ados podem carregar at\u00e9 66% mais r\u00e1pido do que marcadores tradicionais e fornecer panor\u00e2mica e zoom mais r\u00e1pidos. O recurso tamb\u00e9m suporta tempos de carregamento r\u00e1pidos para uma quantidade maior de marcadores.<\/p>\r\n\r\n\r\n\r\n

    H\u00e1 v\u00e1rias melhorias de acessibilidade, permitindo que voc\u00ea crie produtos para usu\u00e1rios que utilizam leitores de tela ou navega\u00e7\u00e3o por teclado. Com elas, os usu\u00e1rios podem navegar entre marcadores, arrast\u00e1-los e solt\u00e1-los, tudo pelo teclado. O t\u00edtulo do marcador \u00e9 selecionado automaticamente pelo leitor de tela e o padr\u00e3o do marcador \u00e9 a fun\u00e7\u00e3o de acessibilidade.<\/p>\r\n\r\n\r\n

    \r\n
    \"\"\r\n
    Um mapa carregando, panor\u00e2mica e zoom de 500 marcadores, usando marcadores avan\u00e7ados<\/em><\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n

    Assim como a rec\u00e9m-lan\u00e7ada funcionalidade de customiza\u00e7\u00e3o data-driven, os marcadores avan\u00e7ados fazem parte dos Mapas Din\u00e2micos da Maps JavaScript API como o recurso mais recente adicionado ao estilo de mapas baseado em nuvem. Confira mais detalhes sobre como usar os marcadores no v\u00eddeo abaixo:<\/p>\r\n\r\n<\/span>\r\n

    \r\n