Como incorporar um widget de mapa em qualquer site

Comece no gerador (o único trabalho de verdade)

Tudo começa no gerador de incorporação de mapa. A geocodificação acontece uma única vez, ali — o trecho de código que você copia carrega coordenadas fixas, então uma queda do geocodificador ou uma “normalização de endereço” nunca vai mover seu pino depois. Digite o endereço, veja o pino aparecer e arraste-o até a sua entrada real antes de copiar: esses dez segundos de arraste são a diferença entre “a rua certa” e “a porta certa”.

Quer ver uma configuração pronta com várias filiais antes de montar a sua? Abra a demonstração do gerador — ela carrega uma empresa de exemplo com três filiais, com endereços, pinos numerados e coloridos e o painel de locais ao vivo na pré-visualização, prontos para explorar.

WordPress: shortcode do plugin ou iframe puro?

Os dois caminhos terminam no mesmo widget — escolha pelo gosto.

Com plugin (recomendado): baixe whatismylocation-widget.zip → wp-admin ▸ Plugins ▸ Adicionar novo ▸ Enviar plugin → Ativar. Depois adicione um bloco Shortcode:

[whatismylocation_map lat="48.858400" lng="2.294500" name="Acme SARL" address="Champ de Mars, Paris"]

Os atributos seguem as opções do gerador: theme, marker, zoom, height, directions e, para filiais, pins="lat,lng,Label~Address|…" com panel= e motion= (veja a tabela de referência abaixo). A seção WordPress do gerador monta o shortcode completo para você — sem digitar nada.

Sem plugin: cole o iframe do gerador em um bloco HTML personalizado. É o mesmo widget e não há plugin para atualizar; em troca, o conteúdo fica com um código mais longo e você perde a edição por atributos depois.

Squarespace, Shopify, Notion — e o resto

Fora do WordPress, o trabalho normalmente é um único colar: adicione o elemento de HTML/incorporação da sua plataforma (Wix Embed HTML, bloco Code do Squarespace, Embed do Webflow) e cole o iframe. Uma diferença deixa o widget de mapa mais fácil que o widget de localização: ele não precisa do atributo allow="geolocation", porque nunca pede nada aos visitantes — então não há nada frágil para preservar quando o construtor de páginas reescreve seu HTML.

Squarespace: adicione um bloco Code e cole. Um detalhe que vale saber desde já: os blocos de código exigem o plano Business ou superior — no plano Personal, o bloco mostra seu código como texto simples em vez de renderizá-lo.

O Shopify merece mais que um colar: nós oferecemos uma seção de tema pronta — um arquivo no seu tema já dá um painel de configurações nativo, com as filiais como blocos que você reordena arrastando, sem app e sem chave de API.

Notion e Google Sites incorporam por URL, não por HTML. Eles não aceitam um trecho de iframe — em vez disso, clique em Copiar URL do widget no gerador e cole no bloco /embed do Notion ou em Incorporar ▸ Por URL do Google Sites. O widget é uma página completa e independente, então renderiza perfeitamente das duas formas.

Salesforce Experience Cloud (sites públicos de comunidade): coloque o iframe em um componente HTML Editor — depois peça ao seu administrador para adicionar whatismylocation.ai em Setup ▸ Trusted URLs com a diretiva CSP frame-src, ou o Salesforce bloqueia o frame em silêncio. Quem desenvolve com código pode envolver a mesma URL em um Lightning Web Component de ~10 linhas:

<!-- wimlMap.html -->
<template>
  <iframe src={src} width="100%" height="340"
          loading="lazy" title="Map"></iframe>
</template>

// wimlMap.js
import { LightningElement } from 'lwc';
export default class WimlMap extends LightningElement {
  src = 'https://whatismylocation.ai/widget/map?lat=48.858400&lng=2.294500&name=Acme';
}

Várias filiais: o painel de locais

Cabem até 10 locais em uma incorporação. No modo Avançado do gerador, posicione cada pino, dê a ele um rótulo e um endereço e clique em Adicionar local. Os visitantes recebem um painel de locais — um acordeão ao lado do mapa no computador, uma faixa de cartões deslizável no celular — com pinos numerados. Ao escolher uma filial, o mapa voa até ela e mostra o endereço dela com seu próprio link de rota.

• panel= escolhe o layout: auto (padrão — ao lado em iframes largos, faixa nos estreitos), side, bottom ou none para apenas pinos + pop-ups.
• motion= define a animação da troca: smooth (voo padrão), fade, lively ou none. Visitantes com “reduzir movimento” ativado no sistema sempre recebem a versão instantânea, qualquer que seja a sua escolha.
• open=no começa com todas as entradas recolhidas; o mapa se ajusta automaticamente a todas as filiais e o seu zoom passa a ser o máximo.

Referência de opções

Solução de problemas no WordPress

O shortcode aparece como texto literal na página. Aquele bloco não processa shortcodes. No editor de blocos, use um bloco Shortcode (não um bloco de código ou pré-formatado); no Elementor, use o widget Shortcode; no Divi, um módulo Code. Quem usa o editor clássico: digite na aba Visual como texto simples.

Nada aparece. Veja o código-fonte da página e procure por whatismylocation. Um comentário HTML sobre lat/lng ausentes significa que as coordenadas estão faltando ou são inválidas — copie o shortcode completo do gerador em vez de digitar os atributos à mão.

O iframe desaparece quando você salva (rota sem plugin). O WordPress remove iframes das funções de usuário sem a permissão unfiltered_html — em multisite isso inclui os administradores por padrão — e alguns plugins de segurança fazem o mesmo. O shortcode do plugin é a solução limpa: ele não depende de a sua função ter permissão para salvar iframes brutos.

O mapa está cinza / os tiles não carregam. Os tiles vêm de tile.openstreetmap.org; um bloqueador de anúncios muito agressivo ou uma rede corporativa pode bloqueá-los (o cartão de overlay continua aparecendo). Confirme em outra rede ou no celular com dados móveis.

Sem painel de locais. O painel aparece a partir de 2 pinos — um único local recebe o cartão de overlay clássico. Verifique também se panel="none" não está definido.

A animação de troca não roda. Quase sempre é a configuração “reduzir movimento” do sistema operacional do visitante (ou do seu) — o widget respeita isso por design e faz a troca na hora. Não é um bug, e os outros visitantes continuam vendo o preset que você escolheu.

As edições não aparecem. Um plugin de cache (ou o cache da hospedagem) está servindo a página antiga. Limpe o cache da página depois de editar os atributos do shortcode — o widget em si não tem nada para armazenar em cache.