- \n
- Um plugin do Google Maps para WordPress;<\/li>\n\n\n\n
- O recurso de incorporação do próprio Google Maps;<\/li>\n\n\n\n
- As opções do seu tema WordPress.<\/li>\n<\/ol>
Tem bastante coisa útil para ver, então vamos direto ao ponto!<\/span><\/p>
Por que vale a pena adicionar o Google Maps ao WordPress<\/h2>
Uma coisa fácil de concordar é que adicionar um mapa no seu site é muito melhor do que simplesmente só colocar o endereço escrito do seu negócio nele. Com um mapa, as pessoas podem ter uma rápida noção de que rua você está, o que há por perto e como encontrar você.<\/span><\/p>
Escolher o tipo ideal de mapa pode ser um pouco mais difícil. Algumas pessoas acabam usando capturas de tela de mapas online, mas essa opção é bem limitada — principalmente quando você pode colocar o Google Maps no WordPress de forma gratuita e muito mais funcional.<\/p>
Veja alguns motivos para usar o Google Maps no seu site WordPress:<\/p>
- \n
- O mapa é interativo, então os visitantes podem navegar por ele e localizar seu negócio com mais precisão.<\/li>\n\n\n\n
- Dá para destacar qualquer localização — inclusive várias ao mesmo tempo.<\/li>\n\n\n\n
- Os usuários podem alternar entre o modo mapa e a visualização da rua, vendo como é o local por fora.<\/li>\n\n\n\n
- O mapa pode ser enviado direto para o celular, facilitando o acesso a rotas de navegação até o endereço.<\/li>\n<\/ul>
Naturalmente, existem outros serviços de mapas online além do Google Maps. Mas o Google é amplamente conhecido e usado, o que significa que a maioria dos visitantes já está familiarizada com sua interface e confia nas informações exibidas.<\/p>
O único ponto negativo é que o WordPress, por padrão, não oferece um recurso nativo para adicionar mapas. Mas isso não é um problema — existem plugins, recursos do próprio tema ou o código de incorporação do Google Maps para resolver isso de forma simples. Vamos ver tudo isso a seguir.<\/p>
\n![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2024\/06\/BR-New-WP_in-text-banner.png\/public\")
<\/a><\/figure><\/div>Como colocar Google Maps no WordPress (3 métodos)<\/h2>
Neste guia, vamos mostrar três formas práticas de adicionar o Google Maps ao seu site WordPress. Vamos começar com os plugins, depois explicar como inserir o mapa manualmente e, por fim, mostrar como usar os recursos do seu tema para isso.<\/p>
Vamos direto ao passo a passo.<\/p>
1. Instale um plugin do Google Maps para WordPress<\/h3>
O Google Maps é uma função tão popular nos sites que não é nenhuma surpresa que existam muitos plugins do Google Maps para WordPress disponíveis.<\/span><\/p>
Por exemplo, com o <\/span>WP Google Maps<\/span><\/a>, você pode adicionar mapas em páginas usando linhas de código. Esse plugin também oferece opções para personalizar seus marcadores e temas específicos para seus próprios mapas.<\/span><\/p>
\n![\"plugin](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/07\/wp-google-maps.png\/public\")
<\/figure><\/div>Na nossa opinião, o WP Google Maps é uma das melhores opções para você completar a ação de como colocar Google Maps no WordPress. Ele ainda é compatível com vários plugins de cache e <\/span>Redes de Distribuição de Conteúdo<\/span><\/a> (CDN). <\/span><\/span><\/p>
Porém, existem muitos outros plugins que você pode usar. Entre eles o <\/span>WD Google Maps<\/span><\/a>, que é uma sólida alternativa e suporta múltiplos marcadores, mapas móveis amigáveis e outras opções de personalização.<\/span><\/p>
\n![\"plugin](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/07\/wd-google-maps.png\/public\")
<\/figure><\/div>Quando você adiciona um mapa usando o WD Google Maps, o próprio plugin guia você pelo processo usando um construtor interativo. Assim, além de aprender a fazer toda a configuração, você acompanha tudo em opções de pré-visualização.<\/span><\/p>
Por fim, temos o <\/span>Google Maps Widget<\/span><\/a>, que também é um dos melhores plugins do Google Maps para WordPress. Esse plugin em particular, inclusive, é bem fácil de configurar. Ele permite que você adicione mapas em miniaturas à barra lateral ou no rodapé do seu site WordPress.<\/span><\/p>
\n![\"plugin](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/07\/google-maps-widget.png\/public\")
<\/figure><\/div>Esse plugin é ótimo quando você tem pouco espaço na página, já que widgets<\/a> podem ser inseridos em quase qualquer lugar.<\/p>
Entretanto, para sites de negócios, estamos mais inclinados a colocar mapas em tamanhos maiores, pois eles já são mais complicados de navegar. Ainda assim, vamos ver agora como colocar Google Maps no WordPress usando o plugin WP Google Maps.<\/span><\/p>
Primeiro de tudo, navegue até o painel de controle do seu site WordPress. De lá, vá para a seção <\/span>Plugins >> Adicionar Novo<\/b>. Use o campo de busca e procure pelo plugin <\/span>WP Google Maps<\/b>. Quando você encontrá-lo, clique em <\/span>Instalar Agora<\/b> e, em seguida, <\/span>Ativar<\/b>.<\/span><\/p>
\n![\"instalando](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/07\/plugin-wp-google-maps.png\/public\")
<\/figure><\/div>Após a ativação, uma nova aba chamada Maps vai aparecer no seu painel de controle. Se você clicar, você vai acessar a uma tela inicial de informações gerais sobre o plugin. Você não precisa fazer nada em específico aqui. Apenas clique no botão azul<\/span> Skip Intro and Create a Map<\/b> para ir para a próxima tela.<\/span><\/p>
\n![\"tela](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/07\/tela-inicial-wp-google-maps.png\/public\")
<\/figure><\/div>Na nova tela, você vai ver que o plugin vai informar você que ele precisa de uma chave API do Google<\/a>. Você pode obter a sua clicando no link <\/span>Create an API Key Now<\/b>. <\/span><\/p>
\n![\"tela](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/07\/api-key-wp-google-maps.png\/public\")
<\/figure><\/div>O Google vai perguntar se você concorda com as condições e termos de uso antes de fornecer uma chave de API. Quando concordar, o Google vai configurar um novo projeto e você poderá gerar uma chave logo em seguida.<\/span><\/p>
\n![\"chave](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/07\/api-key-criada.png\/public\")
<\/figure><\/div>Na imagem acima, estamos borrando a nossa API Key. Você nunca deve compartilhar essa chave com outras pessoas. Afinal, ela está associada com a sua conta e você não quer que os outros abusem dela, não é mesmo?<\/span><\/p>
De qualquer forma, a sua API Key será uma combinação de várias letras e números. Assim que a tiver, volte para o seu painel de controle e cole a API Key no campo indicado. Em seguida, clique em <\/span>SAVE<\/b>.<\/span><\/p>
\n![\"colar](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/07\/api-key-inserida-no-wordpress.png\/public\")
<\/figure><\/div>Você verá uma mensagem de confirmação. Além disso, já poderá começar a trabalhar no seu primeiro mapa. Clique em <\/span>Editar<\/b> no título <\/span>My First Map<\/b>.<\/span><\/p>
\n![\"tela](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/07\/meu-primeiro-mapa-wp-google-maps.png\/public\")
<\/figure><\/div>Em seguida, o plugin vai perguntar a você qual plataforma deve sustentar o seu mapa. Escolha a opção <\/span>Google Maps<\/b>. Depois, clique em <\/span>Select Engine<\/b>.<\/span><\/p>
\n![\"escolher](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/07\/engine-google-maps-wp.png\/public\")
<\/figure><\/div>Na nova tela, a primeira coisa que você precisa fazer é definir um nome para o seu mapa. Depois, especifique a sua largura e altura. A largura padrão de 100% vai automaticamente criar um mapa que se adaptar à resolução do seu site. Então ela é geralmente a melhor opção.<\/span><\/p>
\n![\"configurando](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/07\/configura%C3%A7%C3%B5es-iniciais-wp-google-maps.png\/public\")
<\/figure><\/div>Você também poderá modificar o nível de zoom inicial que você que seu mapa mostre. Além de também poder decidir qual o tipo de layout de mapa que ele vai ser apresentado aos seus visitantes.<\/span><\/p>
Por exemplo, você pode usar o tipo Roteiro ou o tipo Terreno. Na maioria das vezes, a primeira opção é a melhor e a mais útil para seus leitores. Ela mostra exatamente o caminho que eles precisam seguir para chegar ao seu destino.<\/span><\/p>
Agora, deslize a tela para baixo e alcance a seção <\/span>Marcadores<\/b>. Aqui, você pode especificar a local exato que você quer que o seu mapa mostre. É só digitar o endereço ou fornecer coordenadas no GPS próprio dele. Você também pode mover o mapa e clicar com o botão direito do mouse em qualquer lugar que deseja marcar. <\/span><\/p>
\n![\"localizando](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/07\/s%C3%A3o-paulo-marcador-gps-wp-gogle-maps.png\/public\")
<\/figure><\/div>Abaixo do campo de <\/span>Endereço\/GPS<\/b>, existe um outro campo em que você pode inserir tipos de <\/span>Animação<\/b> para o seu mapa. Por exemplo, você pode adicionar uma leve animação de balanço ao seu marcador no mapa quando ele for carregado.<\/span><\/p>
Você também pode definir que o Google Maps posicione uma janela de informação (<\/span>pop-up<\/span><\/i>) próximo ao seu marcador, mostrando o endereço completo escrito do seu negócio físico.<\/span><\/p>
Quando estiver com tudo pronto, clique em <\/span>Salvar Marcador <\/b>e página vai recarregar. Então, clique no botão azul <\/span>Salvar Mapa<\/b> no meio da tela. O plugin vai salvar todas as mudanças feitas. <\/span><\/p>
Você pode embarcar o mapa criado com o plugin Google Maps WordPress copiando e colocando o <\/span>código HTML<\/b> em qualquer lugar do seu site. Você acha esse código (shortcode) dentro da aba <\/span>Mapas<\/b> do seu painel de controle, à direita da tela. Use a foto abaixo como referência.<\/span><\/p>
\n![\"inserindo](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/07\/c%C3%B3digo-html-inserir-google-maps-wordpress.png\/public\")
<\/figure><\/div>E é isso! Você acabou de aprender a como colocar Google Maps no WordPress usando um plugin. Agora, você pode fazer com que seus visitantes ou clientes cheguem até o seu negócio ou loja física muito mais facilmente.<\/p>
Use o recurso de incorporação do Google Maps<\/h3>
Se você prefere não usar um plugin para colocar Google Maps no WordPress, também dá para seguir um caminho manual. O próprio Google oferece um recurso de incorporação (embed<\/em>) que permite adicionar mapas diretamente ao seu site.<\/span><\/p>
Embora seja possível pegar o código de incorporação direto pelo Google Maps, uma forma ainda mais simples é usar um serviço como o Embed Google Map<\/a><\/strong>, que gera esse código para você de maneira rápida e prática.<\/p>
\n![\"ferramenta](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/07\/embed-google-map.png\/public\")
<\/figure><\/div>Assim que configurar as opções de acordo com as suas preferências, clique no botão verde <\/span>Get HTML-Code<\/b>. O programa vai gerar um código HTML que você precisará adicionar ao seu site. <\/span><\/p>
\n![\"código](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/07\/c%C3%B3digo-html-google-maps-wordpress.png\/public\")
<\/figure><\/div>Copie e cole o código HTML mostrado. Volte ao painel de controle do seu site WordPress. Abre o editor de qualquer página ou postagem em que você queira adicionar o mapa do Google Maps.<\/span><\/p>
Clique no botão “+” e adicione um bloco de HTML personalizado<\/strong>. No campo que surgirá, cole o código obtido no Embed Google Maps. Clique em “Visualizar” para confirmar está tudo certo.<\/p>
![\"incorporando](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/07\/embed-google-maps-wordpress.png\/public\")