Precisa de um mapa interativo no seu site WordPress e os mapas padrão do Google não são suficientes? Um mapa iframe comum não oferece regiões clicáveis, dicas de contexto ou um diretório filtrável de objetos. E o seu cliente quer um mapa com pesquisa de moradas e regiões codificadas por cores para estatísticas.

O MapSVG é um dos poucos plugins WordPress que trata de tudo isto numa só ferramenta. É utilizado por mais de 16.000 sites e a versão gratuita no WordPress.org permite experimentar quase todas as funcionalidades básicas sem pagar. A seguir, encontrará uma análise detalhada das funcionalidades, um guia prático de configuração e um veredito honesto sobre para quem este plugin é adequado e quem deve procurar outra solução.

💡 Visão geral rápida:

• Carregue um mapa SVG pronto da biblioteca integrada ou carregue o seu próprio ficheiro.
• Associe objetos da base de dados com campos personalizados às regiões.
• Configure dicas de contexto e janelas popover através do editor de modelos.
• Se necessário, sobreponha o mapa vetorial ao Google Maps.
• Insira o shortcode numa página e verifique o resultado.

O que o MapSVG pode fazer: uma análise das principais funcionalidades

O plugin é desenvolvido por Roman Stepanov (RomanCode no WordPress.org). O projeto está ativo desde 2012 e recebe atualizações regulares: em junho de 2026, a versão 8.6.6 é a atual, com vários lançamentos por mês, de acordo com o registo de alterações. Isto é importante para um plugin que funciona com a API do Google Maps, pois sem atualizações regulares os mapas quebram sempre que a chave da API muda.

Mais de 100 mapas geocalibrados prontos a usar

O plugin inclui uma biblioteca com mais de 100 mapas SVG geocalibrados. O mapa-mundo já está dividido em países clicáveis. Mapas de países com divisões em estados, províncias e regiões estão disponíveis separadamente. Existem também vários mapas especializados.

A geocalibração significa que cada área do mapa está vinculada a coordenadas reais. Pode adicionar marcadores por morada ou latitude/longitude, e eles serão posicionados com precisão na região correta. Não encontra o mapa certo na biblioteca? Desenhe um SVG no Inkscape ou Adobe Illustrator, carregue-o para o MapSVG e o plugin transforma o seu vetor num mapa interativo com zonas clicáveis.

Objetos da base de dados com campos personalizados

Esta funcionalidade distingue o MapSVG da maioria dos plugins de mapeamento para WordPress. Cria entradas (objetos) na base de dados integrada do plugin com qualquer conjunto de campos de que necessite: texto, números, imagens, caixas de seleção, listas suspensas. Depois, associa um objeto a uma região específica do mapa.

Exemplo: uma agência imobiliária cria objetos para imóveis com morada, preço, área e fotos. Cada objeto é associado a uma região no mapa. Um visitante clica numa área e vê a ficha do imóvel numa bela janela popup, vista de detalhe ou dica de contexto. Não é necessário nenhum plugin externo para armazenamento de dados; tudo permanece dentro do MapSVG.

Diretório com filtragem e pesquisa

Os objetos da base de dados podem ser exibidos não só no mapa, mas também como um diretório filtrável ao lado. Quando um utilizador introduz um termo na barra de pesquisa ou seleciona um valor num filtro suspenso, o diretório e o mapa são atualizados em sincronia. Clicar numa região do mapa filtra o diretório e vice-versa.

As versões premium adicionam filtros por categoria, código postal e data. A importação de CSV é suportada e, a partir do plano Plus, os dados podem ser obtidos diretamente do Google Sheets (quando a origem é atualizada, o mapa atualiza automaticamente).

Sobreposição de mapa vetorial no Google Maps

Os mapas padrão do Google via iframe quase não oferecem personalização. O MapSVG resolve este problema de forma radical: sobrepõe a sua própria camada SVG interativa sobre o Google Maps de qualquer tipo (satélite, terreno, mapa rodoviário, híbrido). Tudo o que precisa é de uma chave da API do Google Maps.

A camada vetorial é totalmente clicável: zonas, marcadores e dicas de contexto funcionam exatamente como num mapa SVG normal. O resultado é um mapa com o aspeto do Google Maps, mas que se comporta como uma aplicação web totalmente personalizada. O destaque de pontos de referência, rotas interativas e regiões são todos configuráveis.

Editores integrados de CSS, JavaScript e modelos Handlebars

Para quem trabalha com código, o MapSVG oferece três editores integrados. O editor de CSS permite alterar estilos de tooltips, janelas pop-up e marcadores, vendo os resultados em tempo real. O editor de JavaScript permite ligar-se a eventos do mapa (clique numa região, passagem do rato) e escrever lógica de middleware. O editor de modelos Handlebars dá-lhe controlo total sobre a estrutura HTML das tooltips, janelas popover e vistas de detalhe.

Na prática, isto significa que um modelo de tooltip com uma foto, preço e botão «Saiba mais» pode ser construído em cinco minutos. E através de JavaScript pode, por exemplo, enviar um pedido AJAX ao clicar numa região e carregar dados dinamicamente.

Painel de controlo com pré-visualização em tempo real

A interface do MapSVG é um painel dedicado dentro da administração do WordPress. A criação de mapas é um processo passo a passo: escolha a fonte, configure regiões, cores, tooltips, publique. Todas as alterações aparecem instantaneamente na janela de pré-visualização; não precisa de guardar e atualizar a página para ver os resultados.

A navegação funciona através de um menu dropdown organizado por secções (Regiões, Cores, Modelos, Definições). A interface pode parecer excessiva para principiantes, uma vez que existem muitas opções, mas após a primeira hora a lógica torna-se clara.

Mapas a partir de imagens raster

O MapSVG funciona não só com SVGs vetoriais, mas também com ficheiros PNG e JPEG comuns. As ferramentas de desenho integradas permitem-lhe delimitar áreas sobre uma imagem raster, e estas tornam-se zonas clicáveis. Isto abre cenários que os mapas vetoriais não conseguem cobrir: plantas interativas, mapas de lugares, esquemas técnicos, percursos e planos urbanos.

Tecnicamente, tira uma foto de uma planta de edifício, delimita as divisões com a ferramenta «Desenhar Região», adiciona etiquetas e obtém uma planta interativa onde clicar numa divisão mostra informações sobre a mesma. Os clientes das indústrias de eventos e do imobiliário vão apreciar esta funcionalidade.

Guia prático: instalação e criação do seu primeiro mapa

Instalar o MapSVG não é diferente de qualquer outro plugin do WordPress. A diferença está no processo de criação do mapa: precisa de, pelo menos, uma passagem pelo menu para compreender a lógica da interface. Depois disso, é sempre a andar.

Passo 1. Instalar o plugin

Descarregue o MapSVG do WordPress.org (versão Lite gratuita) ou adquira a versão premium em mapsvg.com. Depois, no painel de administração do WordPress: Plugins → Adicionar Novo → Enviar Plugin.

Clique em Enviar (1), selecione o ficheiro ZIP do plugin (2) e Instalar Agora (3):

Aguarde que a instalação termine e ative:

Pronto. O item MapSVG aparece no menu lateral do painel de administração; clique nele.

Passo 2. Criar um mapa a partir de um modelo pronto

No ecrã inicial do painel do MapSVG, verá as opções: escolher um mapa pronto, criar um mapa do Google (após inserir uma chave de API), construir um mapa de imagem, carregar o seu próprio SVG ou carregar um ficheiro SVG sobre o Google Maps. As ligações Tutoriais e Suporte, no topo do painel, levam à documentação e ao suporte.

Escolha Novo Mapa SVG e encontre o mapa de que precisa na lista suspensa. Para este exemplo, usaremos o mapa da China, que está dividido em províncias e totalmente pronto a usar.

No ecrã seguinte, preencha o título do mapa. Aqui também pode configurar o tamanho, a responsividade (ativada por predefinição), as dicas de contexto e as janelas pop-up. As regiões já são clicáveis e o mapa está pronto para personalização.

Passo 3. Configurar as cores

Vá a Menu → Cores. A paleta de cores permite-lhe definir cores para regiões, fundo, contorno e estados (passagem do rato, ativo). Não há restrições; escolha qualquer tonalidade.

Depois de definir as cores, clique em Guardar Ctrl + S:

O mapa muda imediatamente de cor na janela de pré-visualização. Alguns cliques e o esquema de cores está pronto.

Passo 4. Adicionar dicas de contexto

Crie um modelo de dica de contexto. Vá a Menu → Modelos → Dica de Região. O editor de modelos Handlebars suporta a etiqueta {{title}}, que devolve o nome da região. Modelo básico:

1
Region: <strong>{{title}}</strong>

Clique em Guardar Ctrl + S. Depois, ative as dicas de contexto: Menu → Definições → Dicas de contexto.

Agora, quando passa o cursor sobre uma região, aparece uma dica de contexto com o seu nome. Este é o cenário básico. Para adicionar fotos, preços e outros dados à dica de contexto, vai precisar de campos personalizados.

Passo 5. Campos personalizados através de objetos da base de dados

O MapSVG permite-lhe adicionar campos personalizados às regiões. Os tipos de campo incluem texto, área de texto, caixa de verificação, imagens e outros. Vamos criar um campo de imagem.

Vá a Menu → Regiões e clique em Editar campos:

Clique no botão Imagem para adicionar um campo do tipo imagem e, em seguida, Guardar campos:

Não se esqueça de clicar em Guardar Ctrl + S. Depois, mude para o separador Lista:

Ative o modo Editar Regiões e clique na região desejada (por exemplo, Mongólia Interior). Um novo campo Imagens aparecerá à direita. Clique em Procurar:

Adicione imagens através da biblioteca de media do WordPress e clique em Selecionar imagens:

O sistema irá devolvê-lo ao ecrã de edição da região. Clique em OK (1), depois em Guardar Ctrl + S (2) e volte a mudar para o modo Pré-visualizar (3):

As imagens são adicionadas, mas ainda não aparecerão na dica de contexto; precisa de atualizar o modelo. Vá a Menu → Modelos → Dica de contexto da região e substitua o código:

1
Region: <strong>{{title}}</strong><br />
2
First image:<br />
3
<img src="{{images.0.thumbnail}}" width="40px" /><br /><br />
4
All images:<br />
5
{{#each images}}
6
    <img src="{{thumbnail}}" width="40px" />
7
{{/each}}

Guarde o template. Agora, quando passar o rato sobre Nei Mongol, a dica de contexto mostra as imagens carregadas:

Passo 6. Publicar o mapa no seu site

Guarde todas as alterações. Vá a Páginas → Adicionar nova, clique no botão MapSVG acima do editor:

Selecione o mapa criado na lista e o plugin irá inserir o shortcode [mapsvg id="17" title="China"]. Publique a página e verifique o resultado no frontend:

O mapa é totalmente responsivo; em dispositivos móveis, as regiões e as dicas de contexto funcionam sem perda de funcionalidade. O shortcode pode ser inserido em qualquer artigo, página ou widget, e o mapa será carregado corretamente.

⁉️🤔 Perguntas frequentes

Preciso de uma chave da API do Google Maps para o MapSVG funcionar?

Só se planear usar a camada do Google Maps. Para trabalhar com mapas SVG prontos da biblioteca e com os seus próprios ficheiros SVG, não é necessária qualquer chave. Se precisar mesmo do Google Maps, obtenha uma chave de API na Google Cloud Console e insira-a nas definições do plugin; o processo demora alguns minutos.

Posso carregar o meu próprio ficheiro SVG?

Sim. Desenhe um mapa no Inkscape ou no Adobe Illustrator, guarde como SVG e carregue para o MapSVG. O plugin transformará automaticamente as formas vetoriais em regiões clicáveis. Se o mapa não estiver geocalibrado, os marcadores por morada não funcionarão; terá de os colocar manualmente.

Qual é a diferença entre a versão paga e a gratuita?

A versão Lite gratuita oferece mapas e marcadores ilimitados, dicas de contexto, janelas popover e campos personalizados. Os planos pagos adicionam funcionalidades de forma progressiva: Starter (49 $/ano) adiciona um diretório filtrável e templates personalizados; Plus (99 $/ano) adiciona integração com Google Sheets, ACF e Metabox; Pro (199 $/ano) adiciona agrupamento de marcadores e edição no frontend; Elite (299 $/ano) adiciona REST API e fontes de dados MySQL. Também estão disponíveis licenças vitalícias, que variam entre 99 $ e 599 $.

O plugin é adequado para quem não programa?

Um mapa básico com regiões e dicas de contexto pode, sem dúvida, ser feito sem código; a interface é visual. Mas quando precisar de templates de dicas de contexto personalizados (Handlebars) ou de estilização (CSS), uma compreensão mínima de HTML ajuda. A documentação em mapsvg.com/docs está escrita com exemplos, e o suporte responde rapidamente.

Os mapas tornam o site mais lento?

Não. Um mapa SVG é um vetor que pesa kilobytes, não megabytes. A renderização ocorre via JavaScript no lado do cliente. Com um grande número de marcadores (centenas ou milhares), recomendamos ativar o agrupamento, disponível a partir do plano Pro.

E quanto ao suporte e às atualizações?

O plugin é atualizado várias vezes por mês; o registo de alterações no WordPress.org mostra que o programador corrige bugs e adiciona funcionalidades ativamente. O suporte está disponível através de um chat integrado diretamente no painel de administração (após a ativação). Os utilizadores referem nas avaliações que as respostas são rápidas, mas, devido a diferenças de fuso horário, uma resposta pode demorar várias horas.

Vale a pena comprar o MapSVG: veredito final

O MapSVG é uma ferramenta especializada que se destaca claramente dos plugins padrão do Google Maps quando precisa de interatividade real: regiões clicáveis, diretórios filtráveis e dicas de contexto personalizadas. Se a sua tarefa é «inserir um mapa de direções», o plugin é excessivo. Se a sua tarefa é um mapa de imóveis, um localizador de lojas, estatísticas regionais interativas ou um mapa de lugares, o MapSVG é uma das melhores opções no mercado WordPress.

A versão Lite gratuita cobre cenários em que outros plugins já cobram dinheiro: mapas e marcadores ilimitados, campos personalizados, dicas de contexto e janelas popover. Esta é uma generosidade rara para um modelo freemium; pode lançar um projeto sem orçamento e adquirir um plano quando precisar de filtros, um diretório ou integração com o Google Sheets.

A nossa experiência: após uma noite com a documentação, um mapa da China com dicas de contexto e imagens estava pronto. Sim, a interface não é intuitiva à primeira vista (muitas opções e menus), mas a curva de aprendizagem é curta. Os editores integrados de CSS/JS/Handlebars são uma dádiva para os programadores: não é preciso vasculhar os ficheiros do tema.

Se procura um plugin de mapas para WordPress e não quer esbarrar nas limitações da versão gratuita dentro de um mês, comece com o MapSVG Lite no WordPress.org. E se precisar de uma alternativa, veja o nosso resumo de plugins de mapas para WordPress, onde comparámos uma dúzia de opções para diferentes casos de uso.