Title: Mapa do Brasil mapeado Last modified: 6 agosto, 2016 --- # Mapa do Brasil mapeado * [jgainfo](https://br.wordpress.org/support/users/jgainfo/) * (@jgainfo) * [11 anos, 4 meses atrás](https://br.wordpress.org/support/topic/mapa-do-brasil-mapeado/) * Oi, tudo bem! Gostaria de saber se existe algum plugin de mapas do brasil mapeado para o WordPress? * Um mapa parecido com esse:[http://www.opersan.com.br/contato/nova-opersan-no-brasil](http://www.opersan.com.br/contato/nova-opersan-no-brasil), mas esse site é feito com o Joomla! * Estou tentando adaptar um que encontrei na web. segue o link:[https://github.com/insign/mapa_Brasil_CSS](https://github.com/insign/mapa_Brasil_CSS). * Eu consegui inserir pelo editor de HTML, porém apenas aparece o mapa geral em sí numa página que criei. Os Sprites não aparecem de forma alguma. * Por favor, se alguém souber como posso inserir esse mapa corretamente agradeço e se houver algum plugin específico, poderiam indicar. * Muito obrigado! Visualizando 5 respostas - 1 até 5 (de um total de 5) * [Ralden Di Souza](https://br.wordpress.org/support/users/raldendesouza/) * (@raldendesouza) * [11 anos, 3 meses atrás](https://br.wordpress.org/support/topic/mapa-do-brasil-mapeado/#post-51540) * Bom dia, * Caso ainda não tenha resolvido o problema, e caso queira uma solução gratuita, sugiro que veja a seguinte página do repositório de plugins do WordPress, * [https://wordpress.org/plugins/search.php?q=map+directory](https://wordpress.org/plugins/search.php?q=map+directory) * Se fosse eu, instalaria plugins com compatibilidade WordPress 4.2.2, com 10.000 + instalações. Nas configurações do mapa, usaria um zoom entre 1 e 4 para encaixar o mapa do Brasil. E como o link que lhe passei são para as palavras chave “map directory”, ou seja, plugins de diretórios de mapas, a maioria naturalmente permite múltiplos endereços e permite que edite as informações nos pins sobre os mapas. Colocando uma sidebar (coluna) ao lado do mapa, com as informações dos pins, você terá um mapa similar ao que você informou. * Porque o mapa que você se inspirou não é um mapa estilo Google Maps, mas um mapa trabalhado em programa (eu usaria Illustrator ou Inkscape) onde você demarca cada estado com um “slice”, fazendo o efeito quando o mapa se posiciona sobre cada Estado. Fora a programação realizada para gerenciar os pins e as informações, que é um recursos chamado “tooltip”. * Ou seja, é realmente trabalho para designer, você não conseguirá um plugin para isso. Por minha sugestão de usar um diretório com um mapa de zoom bem baixo, que dê uma visão bem ampla, assim poderá encaixar o Brasil no mapa. E os pins você configurá a partir do plugin, como diretório de endereços. * Espero que você consiga entender minha sugestão, não sei se fui tão claro como eu gostaria. Se não tiver sido, sinta-se à vontade para responder esse tópico, a resposta será rápida pois agora que o respondi, eu o estou acompanhando. * Caso já tenha resolvido o problema ou minha sugestão lhe permita resolver o problema, favor marcar o tópico como resolvido. * Muita boa sorte! * Criador do tópico [jgainfo](https://br.wordpress.org/support/users/jgainfo/) * (@jgainfo) * [11 anos, 3 meses atrás](https://br.wordpress.org/support/topic/mapa-do-brasil-mapeado/#post-51555) * Obrigado por responder! Legal as opiniões e vou ver melhor os plugins. * Enquanto ao mapa que indiquei feito em HTML e CSS, link: [https://github.com/insign/mapa_Brasil_CSS](https://github.com/insign/mapa_Brasil_CSS). [](https://github.com/insign/mapa_Brasil_CSS) Como eu poderia inseri-lo adequadamente. pois eu consegui inserir pelo editor de HTML, porém apenas aparece o mapa geral em sí numa página que criei, os Sprites não aparecem de forma alguma. * Saberia me dizer como procedo para incluir esse mapa corretamente para aparecerem os sprites igual quando abro pela página html? * Muito obrigado! * [Ralden Di Souza](https://br.wordpress.org/support/users/raldendesouza/) * (@raldendesouza) * [11 anos, 3 meses atrás](https://br.wordpress.org/support/topic/mapa-do-brasil-mapeado/#post-51556) * Bom dia, * Como eu sou designer e não desenvolvedor, ou seja, programação não é meu ponto forte, pelo contrário, eu utilizaria a seguinte solução – mas você precisa entender pelo menos a lógica de HTML e WordPress para entender a solução. * Vendo o código fonte de seu mapa, você verá que o desenvolvedor colocou o código base do JavaScript e o estilo do mapa CSS entre `
` e `
`. E entre` ` e `` colocou a chamada do JavaScript e inseriu o mapa com as imagens. * Pois bem, como eu uso PageLines, eu pegaria tudo que está no
e inseriria numa área feita justamente para inserir código. Para quem não usa PageLines, sugiro o plugin abaixo, * [https://wordpress.org/plugins/insert-code-lite/screenshots/](https://wordpress.org/plugins/insert-code-lite/screenshots/) * Coloquei nos screenshots porque você pode ver que o plugin te dá a opção de inserir código no Header e no Footer. Eu trabalharia para colocar o máximo de código no Footer primeiro, por questões de desempenho junto ao GTmetrix (que usa as referências do Google PageSpped e do YSlow) e Pingdom. Mas como pode acontecer de dar erro ou nem rodar, passaria para o Header o código. Dessa forma, quando o WordPress montar o HTML que é o que ele exibe como resultado final, estaria lá o mesmo código do GitHub no Header de seu site. * Não esqueça de no GitHub baixar as pastas “img” e “sources” e fazer a referência do caminho para os arquivos dentro dessas pastas nesse código que vai colocar no Header de seu site. * Com a parte de código pronta, aí eu pegaria o que está no Body da página do mapa, iria em Páginas (ou Posts) > Inserir Novo, e na Área de Edição da nova página entraria na Área de Texto (aba no canto superior direito, que tem Visual e Texto) e inseriria o código que está entre `` e `` do HTML do demo do mapa. * Seria assim que eu tentaria inserir esse mapa. No PageLines “clonar” uma página HTML para WordPress é fácil porque ele já é preparado para inserção desses códigos externos de JavaScript e CSS – fora um plugin deles chamados Hook que permite uma manipulação de código que é tudo de bom. Desde que comecei no PageLines nunca abri um arquivo php ou js, tudo é manipulado pelo próprio PageLines e usando esse Hook. * Eu espero que o plugin que indiquei do repositório lhe permita o mesmo resultado. Pois basicamente o que você estará fazendo é tentando clonar o HTML do demo do mapa para dentro de seu WordPress. * Saudações e boa sorte! * Criador do tópico [jgainfo](https://br.wordpress.org/support/users/jgainfo/) * (@jgainfo) * [11 anos, 3 meses atrás](https://br.wordpress.org/support/topic/mapa-do-brasil-mapeado/#post-51557) * Obrigado! Consegui inserir o mapa! Utilizei o plugin que me indicou e depois de algun ajustes no CSS ficou perfeito! Mais uma vez obrigado! * [Ralden Di Souza](https://br.wordpress.org/support/users/raldendesouza/) * (@raldendesouza) * [11 anos, 3 meses atrás](https://br.wordpress.org/support/topic/mapa-do-brasil-mapeado/#post-51558) * Que ótima notícia!!! Muito bom, é isso, é lembrar que o WordPress, apesar de sua complexidade de sistema, com uso de php, js e css para gerar páginas de internet, o resultado final é HTML. * Então, em último caso, basta “apelar” e tratar a página como HTML – não é o ideal, pois todo esse código que usou na Header de sua página para carregar o mapa será também carregado em outras páginas e posts, sem necessidade, aumentando o tempo de carregamento das páginas. Mas, como diz o ditado, “quem não tem cão, caça como gato…”, rs. * Muito boa sorte em seu projeto! E favor apenas marcar o tópico como RESOLVIDO, por questões de organização do fórum. Visualizando 5 respostas - 1 até 5 (de um total de 5) O tópico ‘Mapa do Brasil mapeado’ está fechado para novas respostas. ## Tags * [Brasil](https://br.wordpress.org/support/topic-tag/brasil/) * [Mapas](https://br.wordpress.org/support/topic-tag/mapas/) * [mapeado](https://br.wordpress.org/support/topic-tag/mapeado/) * [plugins](https://br.wordpress.org/support/topic-tag/plugins/) * Em: [Plugins](https://br.wordpress.org/support/forum/plugins-e-codigos/) * 5 respostas * 2 participantes * Última resposta de: [Ralden Di Souza](https://br.wordpress.org/support/users/raldendesouza/) * Última atividade: [11 anos, 3 meses atrás](https://br.wordpress.org/support/topic/mapa-do-brasil-mapeado/#post-51558) * Estado: não resolvido ## Tópicos ### Tópicos mais populares ### Tópicos sem respostas ### Tópicos não relacionados a suporte ### Tópicos resolvidos ### Tópicos não resolvidos ### Todos os tópicos