--- title: "Mapas interativos no WordPress com MapSVG: Guia rápido" description: "Mapas interativos no WordPress com MapSVG são mapas vetoriais em SVG com regiões clicáveis, ligadas a dados dinâmicos. O MapSVG é um plugin que." url: https://full.services/mapas-interativos-no-wordpress-com-mapsvg/ date: 2026-06-28 author: "Clayton Margiotti" --- # Mapas interativos no WordPress com MapSVG: Guia rápido Criar **mapas interativos no WordPress com MapSVG** leva cerca de 15 minutos e não exige chave de API nem código. Segundo o [W3Techs](https://w3techs.com/technologies/details/cm-wordpress) (2026), o WordPress roda 41,5% de todos os sites da web. O MapSVG renderiza mapas vetoriais em SVG, com regiões clicáveis e tooltips. Escolha SVG para mapas conceituais e Google Maps para localização real. Mapas interativos no WordPress com MapSVG são mapas vetoriais em SVG com regiões clicáveis, ligadas a dados dinâmicos. O MapSVG é um plugin que transforma um arquivo SVG (um país, um estado, uma planta de loja) em um objeto navegável dentro da página, sem depender de chave de API ou de servidor externo. Você define cada região, associa cor, link ou popup, e publica via shortcode. É a alternativa certa quando o objetivo não é mostrar um endereço no mapa rodoviário, e sim destacar territórios, cobertura ou pontos temáticos. Neste guia, a gente usa a plataforma FULL como base de testes e mostra a configuração real, passo a passo, de mapas interativos no WordPress com MapSVG. Para conhecer outras opções, veja [os melhores plugins de mapeamento para WordPress](https://full.services/os-melhores-plugins-de-mapeamento-para-wordpress/) e os [conteúdos de plugins WordPress da FULL](https://full.services/plugins-wordpress/). --- ## Visão geral: MapSVG, Google maps e a escolha certa Existem 3 caminhos para criar mapas interativos no WordPress com MapSVG e alternativas, e cada um cobre um nicho: o MapSVG faz mapas vetoriais sem chave de API, o Google Maps embed resolve localização rodoviária real e o GeoDirectory atende diretórios com busca por endereço. O MapSVG brilha quando você quer regiões clicáveis (estados, bairros, andares) com dados próprios. A tabela abaixo resume o critério de decisão antes de instalar qualquer coisa, porque trocar de abordagem depois custa retrabalho. A escolha errada aparece direto no suporte: gente que instalou um plugin de localização para fazer um mapa temático e ficou presa em chaves de API. Para o caso rodoviário clássico, o tutorial de [integrar o Google Maps no WordPress](https://full.services/integrar-google-maps-wordpress/) é o ponto de partida correto.
Mapas interativos no WordPress: qual abordagem por objetivo
Abordagem Melhor uso Chave de API Custo base
MapSVG Regiões clicáveis e mapas temáticos Não exige US$42 (licença anual)
Google Maps embed Localização rodoviária e rotas Exige (Maps Platform) Gratuito até cota
GeoDirectory Diretórios com busca por endereço Depende do provedor Gratuito + add-ons

Legenda: o editor do MapSVG mostra cada região do SVG como objeto clicável, antes de publicar.

## Por que mapas interativos no WordPress com MapSVG resolvem o que o Google maps não cobre O diferencial dos mapas interativos no WordPress com MapSVG é renderizar mapas em SVG vetorial, que mantém a nitidez em qualquer zoom e pesa poucos KB. Um mapa SVG do Brasil com 27 regiões fica em torno de 80 KB, contra os tiles e scripts pesados de um embed de mapa rodoviário. Como é vetorial, cada estado, bairro ou andar vira um caminho (path) que você estiliza por CSS e liga a um popup, link ou cor condicional. Isso libera casos que o Google Maps não faz bem: pintar regiões por faturamento, marcar áreas de cobertura ou montar a planta de uma loja clicável. A gente vê no suporte da FULL que boa parte dos pedidos de "mapa interativo" na verdade pede esse comportamento temático, e não um pino de endereço. Para entender o conceito de [plugin no WordPress](https://full.services/glossario/plugin-wordpress/) antes de configurar, vale a leitura rápida. ## Passo a passo: Como configurar mapas interativos no WordPress com MapSVG A instalação completa de mapas interativos no WordPress com MapSVG, do upload ao shortcode publicado, leva cerca de 15 minutos em uma instalação WordPress padrão na versão 6.x. O fluxo tem 7 passos lógicos: instalar o plugin, criar o mapa, carregar o SVG, definir regiões, ligar dados, ajustar o estilo e publicar. Cada passo abaixo é um H3 com a ação concreta. Não pule a etapa de regiões: é nela que o mapa deixa de ser uma imagem estática e vira um objeto interativo de verdade, com cada caminho do SVG respondendo a clique e hover. ### Passo 1: Instale o plugin MapSVG Baixe o MapSVG e instale por Plugins → Adicionar novo → Enviar plugin, depois clique em Ativar. O plugin aparece como um item de menu próprio no painel lateral, em até 30 segundos após a ativação. A versão paga (US$42/ano no CodeCanyon) inclui o construtor visual completo; a versão gratuita limita os tipos de mapa. Confirme o WordPress em 6.0 ou superior antes de subir o arquivo, porque versões antigas do PHP travam o construtor. ### Passo 2: Crie um novo mapa No menu MapSVG, clique em "New map" e escolha o tipo. Para mapas interativos no WordPress com MapSVG do tipo temático, selecione "Vector"; para localização real, "Geo (Google)". Dê um nome descritivo ao mapa, porque o shortcode final usa o ID gerado aqui. Esse ID é o que conecta o objeto ao [shortcode](https://full.services/glossario/shortcode/) que você vai colar na página. ### Passo 3: Carregue o arquivo SVG O arquivo SVG é a base dos mapas interativos no WordPress com MapSVG: faça upload pelo botão "Upload SVG", ou escolha um dos mapas prontos (mundo, países, estados). Um SVG bem estruturado tem cada região como um `` com `id` próprio, o que o MapSVG lê para nomear cada território. Se o arquivo vier do Illustrator, exporte com "IDs de objeto" ativados, senão as regiões saem sem nome e você perde a interatividade. ### Passo 4: Defina as regiões clicáveis Definir regiões clicáveis é o coração dos mapas interativos no WordPress com MapSVG: na aba "Regions", o plugin lista cada path do SVG como uma região editável. Aqui você define rótulo, cor padrão, cor de hover e a ação do clique (abrir popup, ir para URL ou rolar até um bloco). É o passo que separa um mapa decorativo de um mapa funcional: sem regiões configuradas, o clique não faz nada. Configure ao menos a cor de hover, porque é o sinal visual que diz ao visitante que aquilo é clicável. ### Passo 5: Ligue dados dinâmicos O MapSVG tem um banco interno (Database) onde você cadastra registros e associa cada um a uma região. Assim, ao clicar no estado de São Paulo, o popup puxa o telefone, o endereço e a foto cadastrados, sem editar o SVG. Para até algumas centenas de registros, esse banco interno responde bem; acima disso, a aba de filtros começa a pesar no carregamento da página. ### Passo 6: Ajuste estilo e responsividade A responsividade fecha a configuração de mapas interativos no WordPress com MapSVG: na aba "Container", defina largura, proporção e zoom inicial. O MapSVG é responsivo por padrão e redimensiona o SVG ao container, mas confirme o comportamento no mobile: mapas com muitas regiões pequenas ficam difíceis de tocar em telas abaixo de 360 px. Use o controle de zoom mínimo para evitar que o visitante "perca" o mapa ao arrastar. ### Passo 7: Publique com o shortcode Copie o shortcode gerado (no formato `[mapsvg id="1"]`) e cole na página ou post pelo bloco de shortcode do Gutenberg. É o passo final para publicar mapas interativos no WordPress com MapSVG, e o mapa renderiza no front-end exatamente como no preview do construtor. Se usar um construtor visual como o Elementor, insira o mesmo shortcode num widget de Shortcode. Para revisar como [instalar um plugin no WordPress](https://full.services/como-instalar-plugin-no-wordpress/) do zero, o tutorial dedicado cobre o fluxo completo. ## Erros comuns ao montar mapas SVG interativos Boa parte dos chamados sobre mapas interativos no WordPress com MapSVG no suporte da FULL cai em 3 erros previsíveis, e todos têm correção rápida: SVG sem `id` nos paths, shortcode colado no bloco errado e cor de hover idêntica à cor padrão. Os três derrubam a interatividade sem mostrar mensagem de erro. O primeiro é o SVG sem `id` nos paths: o mapa carrega, mas nenhuma região responde ao clique, porque o plugin não consegue nomear cada caminho. O segundo é colar o shortcode num bloco de parágrafo em vez do bloco de Shortcode, o que faz o WordPress exibir o texto cru. O terceiro é cor de hover idêntica à cor padrão, que deixa o mapa parecendo estático mesmo funcionando. A regra prática: teste sempre logado e deslogado, porque cache de página pode servir uma versão antiga do mapa. Quem usa [widget no WordPress](https://full.services/glossario/widget-wordpress/) precisa confirmar que o tema renderiza shortcodes na área de widget. ## Plano da FULL: O MapSVG e mais 17 plugins Premium por 85 reais o site Comprar o MapSVG avulso custa US$42 por ano e resolve um único plugin, mas o problema real é a soma de licenças que uma operação acumula. O plano PRO da FULL custa R$849 por ano e libera 17 plugins premium ativados em um clique, o que dá cerca de R$85 por site quando você distribui o valor pela carteira de projetos. Em vez de gerenciar a chave de licença de cada plugin separadamente, a ativação acontece pelo painel da FULL, com atualização centralizada e uma renovação única no ano. A gente vê no suporte que a dor não é o preço de um plugin isolado, e sim o controle de renovação de dez deles ao mesmo tempo, em datas diferentes e moedas diferentes. Veja a comparação completa em [o comparativo de planos da FULL](https://full.services/planos) e calcule o custo por site real da sua operação. --- ## Perguntas frequentes sobre mapas interativos no WordPress com MapSVG
É possível criar mapas interativos no WordPress sem usar chave de API?

Sim. O MapSVG renderiza mapas vetoriais em SVG sem depender de chave de API, porque o arquivo do mapa fica no próprio servidor. Isso vale para mapas temáticos: países, estados, bairros ou plantas. A chave de API só é necessária quando você usa o modo "Geo (Google)" do plugin para localização rodoviária real, com tiles do Google Maps. Para o caso vetorial, basta o SVG e o shortcode.

Por que as regiões do meu mapa MapSVG não respondem ao clique?

Porque o arquivo SVG provavelmente está sem `id` nos elementos ``. O MapSVG usa o atributo `id` de cada caminho para nomear e ligar a região a uma ação. Sem ele, o mapa carrega como imagem, mas nenhuma área vira clicável. Reexporte o SVG do Illustrator ou do Figma com a opção de IDs de objeto ativada e recarregue o arquivo na aba "Regions".

Qual a diferença entre o MapSVG e integrar o Google Maps no WordPress?

O MapSVG cria mapas vetoriais temáticos com regiões clicáveis e dados próprios, sem mostrar ruas. O Google Maps embed mostra localização rodoviária real, com rotas e Street View, mas exige chave de API e cota de uso. Escolha MapSVG para cobertura por região ou plantas; escolha Google Maps para "onde fica" um endereço. São ferramentas complementares, não concorrentes diretas.

O MapSVG funciona com construtores como Elementor e Gutenberg?

Sim. O MapSVG entrega um shortcode no formato `[mapsvg id="1"]` que funciona em qualquer editor. No Gutenberg, use o bloco de Shortcode; no Elementor, insira o mesmo código num widget de Shortcode. O mapa renderiza idêntico ao preview do construtor. Se o mapa não aparecer, confirme que o tema ou o construtor processa shortcodes na área onde você colou o código.

Quantos registros o banco interno do MapSVG aguenta sem perder performance?

O banco interno (Database) do MapSVG responde bem até algumas centenas de registros associados a regiões. Acima desse volume, os filtros e a busca começam a pesar no carregamento da página, porque o plugin processa os dados no front-end. Para diretórios grandes, com milhares de pontos e busca por endereço, o GeoDirectory é a escolha mais adequada do que forçar o banco do MapSVG.

--- ## Próximos passos para publicar seu mapa interativo Mapas interativos no WordPress com MapSVG entregam o que o Google Maps não cobre: regiões clicáveis, dados próprios e SVG leve, sem chave de API. Com os 7 passos deste guia, você sai do arquivo SVG cru até o shortcode publicado em cerca de 15 minutos, evitando os três erros que mais aparecem no suporte. A decisão central continua sendo o objetivo: mapa temático pede MapSVG, endereço real pede Google Maps, diretório grande pede GeoDirectory. Para aprofundar a escolha de ferramentas, o guia dos [melhores plugins para WordPress](https://full.services/guias/os-melhores-plugins-para-wordpress/) reúne as opções por caso de uso. E para continuar aprendendo, o FULL Academy concentra tutoriais, guias e reviews de WordPress em um só lugar. --- ## Metadados Estruturados (Schema.org) ```json-ld { "@context": "https://schema.org", "@graph": [ { "@type": "TechArticle", "@id": "https://full.services/mapas-interativos-no-wordpress-com-mapsvg/#article", "headline": "Mapas interativos no WordPress com MapSVG: Guia rápido", "description": "Mapas interativos no WordPress com MapSVG são mapas vetoriais em SVG com regiões clicáveis, ligadas a dados dinâmicos.", "url": "https://full.services/mapas-interativos-no-wordpress-com-mapsvg/", "datePublished": "2026-06-28T09:00:00-03:00", "dateModified": "2026-06-28T09:00:00-03:00", "inLanguage": "pt-BR", "articleSection": "Plugins WordPress", "keywords": [ "mapas interativos no wordpress com mapsvg", "WordPress Plugins", "WordPress Tools", "Plugin Development" ], "author": { "@id": "https://full.services/#person-clayton" }, "publisher": { "@id": "https://full.services/#org" }, "about": [ { "@type": "Thing", "name": "WordPress Plugins" }, { "@type": "Thing", "name": "WordPress Tools" }, { "@type": "Thing", "name": "Plugin Development" } ], "mentions": [ { "@type": "Organization", "name": "WordPress", "url": "https://wordpress.org/", "@id": "https://www.wikidata.org/wiki/Q13166", "sameAs": "https://www.wikidata.org/wiki/Q13166" } ], "mainEntityOfPage": { "@type": "WebPage", "@id": "https://full.services/mapas-interativos-no-wordpress-com-mapsvg/" }, "wordCount": 2282, "citation": [ { "@type": "CreativeWork", "name": "W3Techs", "url": "https://w3techs.com/technologies/details/cm-wordpress", "publisher": { "@type": "Organization", "name": "W3Techs" } } ] }, { "@type": "FAQPage", "@id": "https://full.services/mapas-interativos-no-wordpress-com-mapsvg/#faq", "isPartOf": { "@id": "https://full.services/mapas-interativos-no-wordpress-com-mapsvg/#article" }, "mainEntity": [ { "@type": "Question", "@id": "https://full.services/mapas-interativos-no-wordpress-com-mapsvg/#faq-q1", "name": "É possível criar mapas interativos no WordPress sem usar chave de API?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Sim. O MapSVG renderiza mapas vetoriais em SVG sem depender de chave de API, porque o arquivo do mapa fica no próprio servidor. Isso vale para mapas temáticos: países, estados, bairros ou plantas. A chave de API só é necessária quando você usa o modo "Geo (Google)" do plugin para localização rodoviária real, com tiles do Google Maps. Para o caso vetorial, basta o SVG e o shortcode.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/mapas-interativos-no-wordpress-com-mapsvg/#faq-q2", "name": "Por que as regiões do meu mapa MapSVG não respondem ao clique?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Porque o arquivo SVG provavelmente está sem `id` nos elementos ` `. O MapSVG usa o atributo `id` de cada caminho para nomear e ligar a região a uma ação. Sem ele, o mapa carrega como imagem, mas nenhuma área vira clicável. Reexporte o SVG do Illustrator ou do Figma com a opção de IDs de objeto ativada e recarregue o arquivo na aba "Regions".", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/mapas-interativos-no-wordpress-com-mapsvg/#faq-q3", "name": "Qual a diferença entre o MapSVG e integrar o Google Maps no WordPress?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "O MapSVG cria mapas vetoriais temáticos com regiões clicáveis e dados próprios, sem mostrar ruas. O Google Maps embed mostra localização rodoviária real, com rotas e Street View, mas exige chave de API e cota de uso. Escolha MapSVG para cobertura por região ou plantas; escolha Google Maps para "onde fica" um endereço. São ferramentas complementares, não concorrentes diretas.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/mapas-interativos-no-wordpress-com-mapsvg/#faq-q4", "name": "O MapSVG funciona com construtores como Elementor e Gutenberg?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Sim. O MapSVG entrega um shortcode no formato `[mapsvg id="1"]` que funciona em qualquer editor. No Gutenberg, use o bloco de Shortcode; no Elementor, insira o mesmo código num widget de Shortcode. O mapa renderiza idêntico ao preview do construtor. Se o mapa não aparecer, confirme que o tema ou o construtor processa shortcodes na área onde você colou o código.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/mapas-interativos-no-wordpress-com-mapsvg/#faq-q5", "name": "Quantos registros o banco interno do MapSVG aguenta sem perder performance?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "O banco interno (Database) do MapSVG responde bem até algumas centenas de registros associados a regiões. Acima desse volume, os filtros e a busca começam a pesar no carregamento da página, porque o plugin processa os dados no front-end. Para diretórios grandes, com milhares de pontos e busca por endereço, o GeoDirectory é a escolha mais adequada do que forçar o banco do MapSVG.", "author": { "@id": "https://full.services/#org" } } } ] }, { "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://full.services/" }, { "@type": "ListItem", "position": 2, "name": "Plugins WordPress", "item": "https://full.services/plugins-wordpress/" }, { "@type": "ListItem", "position": 3, "name": "Mapas interativos no WordPress com MapSVG: Guia rápido", "item": "https://full.services/mapas-interativos-no-wordpress-com-mapsvg/" } ] }, { "@type": "Organization", "@id": "https://full.services/#org", "name": "FULL Services", "url": "https://full.services", "logo": { "@type": "ImageObject", "url": "https://full.services/wp-content/uploads/full-services-logo.png", "width": 200, "height": 60 }, "sameAs": [ "https://www.instagram.com/fullservicesbr", "https://www.facebook.com/fullservices.br", "https://www.linkedin.com/company/fullservicesbr/" ], "knowsAbout": [ "WordPress", "WordPress Hosting", "Web Development", "Performance Optimization", "WordPress Security", "SEO para WordPress" ], "award": [ "Gold Medal - The WP Weekly Awards 2023 (https://thewpweekly.com/awards-2023/)", "Gold Medal - The WP Weekly Awards 2024 (https://thewpweekly.com/awards-2024/)" ], "hasCredential": { "@type": "EducationalOccupationalCredential", "credentialCategory": "certification", "name": "CVE Numbering Authority (CNA)", "description": "Autoridade de numeração de vulnerabilidades (CVE) para o ecossistema WordPress, autorizada a atribuir IDs CVE. Certificação válida desde 2022-05-03, com abrangência global.", "url": "https://www.cve.org/PartnerInformation/ListofPartners/partner/FULL", "recognizedBy": { "@type": "Organization", "name": "CISA — Cybersecurity and Infrastructure Security Agency", "url": "https://www.cisa.gov/", "sameAs": "https://www.cisa.gov/" } } }, { "@type": "Person", "@id": "https://full.services/#person-clayton", "name": "Clayton Margiotti", "givenName": "Clayton", "familyName": "Margiotti", "jobTitle": "Fundador e CEO da FULL Services", "description": "Fundador e CEO da FULL Services, plataforma WordPress SaaS com 50 mil clientes e 150 mil sites conectados, e anchor do ecossistema Elevor Global. Em 2024 conduziu a FULL a se tornar a primeira e unica empresa brasileira aprovada como CVE Numbering Authority sob a CISA (DHS/EUA). Mais de 20 anos construindo empresas digitais, com 13+ reconhecimentos internacionais (Facebook, GPTW, ONU, RD Summit).", "url": "https://full.services/sobre-nos/", "image": "https://full.services/wp-content/uploads/2026/05/clayton-margiotti.jpg", "sameAs": [ "https://www.linkedin.com/in/cmargiotti/" ], "knowsAbout": [ "Artificial Intelligence", "Cybersecurity", "CVE Program", "WordPress Enterprise", "SaaS Platforms", "Digital Infrastructure", "Technology Entrepreneurship", "Company Building", "Business Leadership", "Digital Growth" ], "hasOccupation": { "@type": "Occupation", "name": "Fundador e CEO", "occupationalCategory": "11-1011.00" }, "knowsLanguage": [ { "@type": "Language", "name": "Portuguese", "alternateName": "pt-BR" }, { "@type": "Language", "name": "English", "alternateName": "en" } ], "memberOf": { "@type": "Organization", "name": "CVE Numbering Authorities", "url": "https://www.cve.org/", "sameAs": "https://www.cve.org/" }, "alumniOf": [ { "@type": "EducationalOrganization", "name": "Global Scaling Academy (Blitzscaling Program)", "url": "https://www.blitzscalingacademy.com" }, { "@type": "EducationalOrganization", "name": "Esade", "url": "https://www.esade.edu" }, { "@type": "EducationalOrganization", "name": "Business School Sao Paulo (BSP)", "url": "https://bsp.edu.br/" }, { "@type": "EducationalOrganization", "name": "Tera", "url": "https://somostera.com" }, { "@type": "EducationalOrganization", "name": "Le Wagon", "url": "https://www.lewagon.com" }, { "@type": "EducationalOrganization", "name": "FIAP", "url": "https://www.fiap.com.br" }, { "@type": "EducationalOrganization", "name": "PUCRS", "url": "https://online.pucrs.br/" } ], "award": [ "Digital Disruptor – Engaging Experiences Master (Globant, 2021)", "Maior ROI do e-commerce brasileiro – Letrissimas (Facebook, 2019)", "1º lugar – Melhores Empresas para Trabalhar no Brasil – Eleva Digital (Great Place to Work, 2018)", "Case global de educacao no Facebook – Metodo SUPERA (Facebook, 2017)", "Maquina de Geracao de Leads, Agencia do Ano (RD Summit / RD Station, 2015)", "Monthly Recurring Revenue, top performance (RD Summit / RD Station, 2015)", "Quality/Efficiency – Entrepreneurship Training (UNCTAD / PNUD-ONU, 2010)" ], "subjectOf": [ { "@type": "NewsArticle", "url": "https://www.globant.com/news/globant-reveals-inaugural-digital-disruptors-award-winners", "publisher": { "@type": "Organization", "name": "Globant" } }, { "@type": "NewsArticle", "url": "https://www.prnewswire.com/news-releases/letrissimas-com-e-destaque-do-e-commerce-brasileiro-com-maior-roi-de-2018-877517801.html", "publisher": { "@type": "Organization", "name": "PR Newswire" } }, { "@type": "NewsArticle", "url": "https://www.segs.com.br/seguros/102599-gestao-de-pessoas-garante-mais-lucro-as-empresas", "publisher": { "@type": "Organization", "name": "Segs" } }, { "@type": "NewsArticle", "url": "https://franquiaeducacional.com/negocios-inovadores-facebook-elege-supera-case-mundial-de-educacao", "publisher": { "@type": "Organization", "name": "Franquia Educacional" } }, { "@type": "NewsArticle", "url": "https://acontecendoaqui.com.br/marketing/resultados-digitais-divulga-vencedores-do-premio-agencias-de-resultados-2015-durante-o-rd", "publisher": { "@type": "Organization", "name": "Acontecendo Aqui" } } ], "worksFor": { "@type": "Organization", "@id": "https://full.services/#org" } }, { "@type": "HowTo", "@id": "https://full.services/mapas-interativos-no-wordpress-com-mapsvg/#howto", "isPartOf": { "@id": "https://full.services/mapas-interativos-no-wordpress-com-mapsvg/#article" }, "name": "Passo a passo: mapas interativos no wordpress com mapsvg", "description": "Guia passo a passo sobre mapas interativos no wordpress com mapsvg para WordPress.", "url": "https://full.services/mapas-interativos-no-wordpress-com-mapsvg/", "totalTime": "PT42M", "author": { "@type": "Organization", "@id": "https://full.services/#org" }, "step": [ { "@type": "HowToStep", "position": 1, "name": "Passo 1: Instale o plugin MapSVG", "text": "Baixe o MapSVG e instale por Plugins → Adicionar novo → Enviar plugin, depois clique em Ativar. O plugin aparece como um item de menu próprio no painel lateral, em até 30 segundos após a ativação. A versão paga (US$42/ano no CodeCanyon) inclui o construtor visual completo; a versão gratuita limita os tipos de mapa. Confirme o WordPress em 6.0 ou superior antes de subir o arquivo, porque versões antigas do PHP travam o construtor." }, { "@type": "HowToStep", "position": 2, "name": "Passo 2: Crie um novo mapa", "text": "No menu MapSVG, clique em "New map" e escolha o tipo. Para mapas interativos no WordPress com MapSVG do tipo temático, selecione "Vector"; para localização real, "Geo (Google)". Dê um nome descritivo ao mapa, porque o shortcode final usa o ID gerado aqui. Esse ID é o que conecta o objeto ao shortcode que você vai colar na página." }, { "@type": "HowToStep", "position": 3, "name": "Passo 3: Carregue o arquivo SVG", "text": "O arquivo SVG é a base dos mapas interativos no WordPress com MapSVG: faça upload pelo botão "Upload SVG", ou escolha um dos mapas prontos (mundo, países, estados). Um SVG bem estruturado tem cada região como um `` com `id` próprio, o que o MapSVG lê para nomear cada território. Se o arquivo vier do Illustrator, exporte com "IDs de objeto" ativados, senão as regiões saem sem nome e você perde a interatividade." }, { "@type": "HowToStep", "position": 4, "name": "Passo 4: Defina as regiões clicáveis", "text": "Definir regiões clicáveis é o coração dos mapas interativos no WordPress com MapSVG: na aba "Regions", o plugin lista cada path do SVG como uma região editável. Aqui você define rótulo, cor padrão, cor de hover e a ação do clique (abrir popup, ir para URL ou rolar até um bloco). É o passo que separa um mapa decorativo de um mapa funcional: sem regiões configuradas, o clique não faz nada. Configure ao menos a cor de hover, porque é o sinal visual que diz ao visitante que aquilo é clicável." }, { "@type": "HowToStep", "position": 5, "name": "Passo 5: Ligue dados dinâmicos", "text": "O MapSVG tem um banco interno (Database) onde você cadastra registros e associa cada um a uma região. Assim, ao clicar no estado de São Paulo, o popup puxa o telefone, o endereço e a foto cadastrados, sem editar o SVG. Para até algumas centenas de registros, esse banco interno responde bem; acima disso, a aba de filtros começa a pesar no carregamento da página." }, { "@type": "HowToStep", "position": 6, "name": "Passo 6: Ajuste estilo e responsividade", "text": "A responsividade fecha a configuração de mapas interativos no WordPress com MapSVG: na aba "Container", defina largura, proporção e zoom inicial. O MapSVG é responsivo por padrão e redimensiona o SVG ao container, mas confirme o comportamento no mobile: mapas com muitas regiões pequenas ficam difíceis de tocar em telas abaixo de 360 px. Use o controle de zoom mínimo para evitar que o visitante "perca" o mapa ao arrastar." }, { "@type": "HowToStep", "position": 7, "name": "Passo 7: Publique com o shortcode", "text": "Copie o shortcode gerado (no formato `[mapsvg id="1"]`) e cole na página ou post pelo bloco de shortcode do Gutenberg. É o passo final para publicar mapas interativos no WordPress com MapSVG, e o mapa renderiza no front-end exatamente como no preview do construtor. Se usar um construtor visual como o Elementor, insira o mesmo shortcode num widget de Shortcode. Para revisar como instalar um plugin no WordPress do zero, o tutorial dedicado cobre o fluxo completo. Boa parte dos chamados sobre mapas interativos no WordPress com MapSVG no suporte da FULL cai em 3 erros previsíveis, e todos têm correção rápida: SVG sem `id` nos paths, shortcode colado no bloco errado e cor de hover idêntica à cor padrão. Os três derrubam a interatividade sem mostrar mensagem de erro. O primeiro é o SVG sem `id` nos paths: o mapa carrega, mas nenhuma região responde ao clique, porque o plugin não consegue nomear cada caminho. O segundo é colar o shortcode num bloco de parágrafo em vez do bloco de Shortcode, o que faz o WordPress exibir o texto cru. O terceiro é cor de hover idêntica à cor padrão, que deixa o mapa parecendo estático" } ] } ] } ```