{"id":1070,"date":"2020-01-31T21:39:21","date_gmt":"2020-02-01T00:39:21","guid":{"rendered":"https:\/\/www.souzahost.com\/tutoriais\/?p=1070"},"modified":"2021-06-02T07:55:16","modified_gmt":"2021-06-02T10:55:16","slug":"como-adicionar-o-google-maps-no-wordpress","status":"publish","type":"post","link":"https:\/\/www.holahost.com.br\/tutoriais\/como-adicionar-o-google-maps-no-wordpress\/","title":{"rendered":"Como adicionar o Google Maps no WordPress"},"content":{"rendered":"\n<p>Uma das principais fun\u00e7\u00f5es que um site de neg\u00f3cios pode ter \u00e9 uma forma de fazer com que os consumidores em potencial encontrem voc\u00ea rapidamente.<\/p>\n\n\n\n<p>Se o seu neg\u00f3cio tem um local f\u00edsico, voc\u00ea precisa dar aos seus visitantes todas as informa\u00e7\u00f5es necess\u00e1rias para chegar l\u00e1. Na maioria das vezes, mostrar um mapa exato com a localiza\u00e7\u00e3o \u00e9 muito melhor do que apenas escrever o endere\u00e7o no seu site.<\/p>\n\n\n\n<p>Felizmente, o WordPress permite que voc\u00ea adicione um mapa para chegar ao seu neg\u00f3cio usando v\u00e1rios m\u00e9todos diferentes. Neste artigo, voc\u00ea vai aprender <b>como colocar Google Maps no WordPress<\/b> usando 3 maneiras. S\u00e3o elas:<\/p>\n\n\n\n<ul><li>Usando um plugin do Google Maps para WordPress.<\/li><li>Incorporando o Google Maps no seu site por c\u00f3digo HTML<\/li><li>Usando seu tema WordPress<\/li><\/ul>\n\n\n\n<p>O conte\u00fado abaixo ser\u00e1 um pouco extenso. Mas n\u00e3o se preocupe. Ao final, voc\u00ea ter\u00e1 em m\u00e3os conhecimento o bastante para saber como colocar Google Maps no WordPress sem passar muito trabalho. E, com isso, fazer com seus visitantes cheguem ao seu neg\u00f3cio f\u00edsico usando um mapa, algo bem mais preciso e funcional.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2><span id=\"Por-que-voce-deve-considerar-inserir-Google-Maps-no-WordPress\"><b>Por que voc\u00ea deve considerar inserir Google Maps no WordPress<\/b><\/span><\/h2>\n\n\n\n<p>Uma coisa f\u00e1cil de concordar \u00e9 que adicionar um mapa no seu site \u00e9 muito melhor do que simplesmente s\u00f3 colocar o endere\u00e7o escrito do seu neg\u00f3cio nele. Com um mapa, as pessoas podem ter uma r\u00e1pida no\u00e7\u00e3o de que rua voc\u00ea est\u00e1, qual est\u00e1 mais perto e como encontrar voc\u00ea.<\/p>\n\n\n\n<p>Decidir qual tipo de mapa colocar j\u00e1 \u00e9 algo um pouco mais desafiante. Algumas pessoas gostam de colocar capturas de tela de fontes online. Entretanto, essa \u00e9 uma alternativa n\u00e3o muito boa quando voc\u00ea tem op\u00e7\u00f5es como o Google Maps dispon\u00edveis para usar. E de gra\u00e7a.<\/p>\n\n\n\n<p>Abaixo listamos algumas maneiras de como colocar Google Maps no WordPress pode melhorar o seu site.<\/p>\n\n\n\n<ul><li>Eles s\u00e3o interativos, permitindo que seus visitantes mexam no mapa at\u00e9 que tenham uma boa no\u00e7\u00e3o da onde voc\u00ea se localiza.<\/li><li>Voc\u00ea pode usar o Google Maps para destacar qualquer local que quiser, ou mesmo v\u00e1rios lugares.<\/li><li>Os visitantes podem acessar entre os visores de mapa e de rua em tempo real, o que permite que eles vejam como o seu neg\u00f3cio f\u00edsico se parece e o que existe ao redor dele.Tudo sem sair de casa, se preferirem.<\/li><li>Os usu\u00e1rios podem enviar os mapas aos seus celulares rapidamente, podendo receber instru\u00e7\u00f5es de como chegar ao seu neg\u00f3cio pelos caminhos mais indicados.<\/li><\/ul>\n\n\n\n<p>Existe, \u00e9 claro, outras op\u00e7\u00f5es de mapas online interativos al\u00e9m do Google Maps. Entretanto, o Google tem a grande vantagem de j\u00e1 ter um nome de peso no mercado.<\/p>\n\n\n\n<p>Ent\u00e3o, pode ser que muitas das pessoas que visitem seu site j\u00e1 estejam familiarizadas como o Google Maps funciona. Assim, elas v\u00e3o confiar no aplicativo e tamb\u00e9m na localiza\u00e7\u00e3o f\u00edsica do seu neg\u00f3cio.<\/p>\n\n\n\n<p>A m\u00e1 not\u00edcia disso tudo \u00e9 que o WordPress n\u00e3o possui nenhuma ferramenta embarcada para inserir o Google Maps no WordPress. Mas fique tranquilo: isso \u00e9 totalmente contorn\u00e1vel usando plugins, temas e at\u00e9 mesmo a pr\u00f3pria ferramenta de funcionalidade do Google Maps.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2><span id=\"Como-colocar-Google-Maps-no-WordPress-3-Metodos\"><b>Como colocar Google Maps no WordPress (3 M\u00e9todos)<\/b><\/span><\/h2>\n\n\n\n<p>At\u00e9 aqui, \u00e9 poss\u00edvel que voc\u00ea j\u00e1 esteja convencido de que vale a pena tentar inserir Google Maps no WordPress.<\/p>\n\n\n\n<p>A seguir, listamos 3 m\u00e9todos que voc\u00ea pode usar para, enfim, aprender a como colocar Google Maps no WordPress.<\/p>\n\n\n\n<p>Esses m\u00e9todos s\u00e3o: usando plugins, adicionando manualmente e configurando op\u00e7\u00f5es em temas para conseguir chegar ao objetivo.<\/p>\n\n\n\n<p>Todos eles funcionam exatamente como foram planejados. Basta seguir as instru\u00e7\u00f5es corretamente. Se preferir, escolha aquela que acredita ser mais tranquila de ser executada.<\/p>\n\n\n\n<h3><b>1. Instalar plugin Google Maps WordPress<\/b><\/h3>\n\n\n\n<p>O Google Maps \u00e9 uma fun\u00e7\u00e3o t\u00e3o popular nos sites que n\u00e3o \u00e9 nenhuma surpresa que existam muitos plugins do Google Maps para WordPress dispon\u00edveis.<\/p>\n\n\n\n<p>Por exemplo, com o <a href=\"https:\/\/wordpress.org\/plugins\/wp-google-maps\/\" target=\"_blank\" rel=\"noopener nofollow external noreferrer\" data-wpel-link=\"external\">WP Google Maps<\/a>, voc\u00ea pode adicionar mapas em p\u00e1ginas usando linhas de c\u00f3digo. Esse plugin tamb\u00e9m oferece op\u00e7\u00f5es para personalizar seus marcadores e temas espec\u00edficos para seus pr\u00f3prios mapas<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/banner-772x250.jpg\"><img src=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/banner-772x250.jpg\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<p>Na nossa opini\u00e3o, o WP Google Maps \u00e9 uma das melhores op\u00e7\u00f5es para voc\u00ea completar a a\u00e7\u00e3o de como colocar Google Maps no WordPress. Ele ainda \u00e9 compat\u00edvel com v\u00e1rios plugins de cache e Redes de Distribui\u00e7\u00e3o de Conte\u00fado (CDN).<\/p>\n\n\n\n<p>Por\u00e9m, existem muitos outros plugins que voc\u00ea pode usar. Entre eles o <a href=\"https:\/\/wordpress.org\/plugins\/wd-google-maps\/\" target=\"_blank\" rel=\"noopener nofollow external noreferrer\" data-wpel-link=\"external\">WD Google Maps<\/a>, que \u00e9 uma s\u00f3lida alternativa e suporta m\u00faltiplos marcadores, mapas m\u00f3veis amig\u00e1veis e outras op\u00e7\u00f5es de personaliza\u00e7\u00e3o.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/banner-772x250.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>Quando voc\u00ea adiciona um mapa usando o WD Google Maps, o pr\u00f3prio plugin guia voc\u00ea pelo processo usando um construtor interativo. Assim, al\u00e9m de aprender a fazer toda a configura\u00e7\u00e3o, voc\u00ea acompanha tudo em op\u00e7\u00f5es de pr\u00e9-visualiza\u00e7\u00e3o.<\/p>\n\n\n\n<p>Por fim, temos o <a href=\"https:\/\/br.wordpress.org\/plugins\/google-maps-widget\/\" target=\"_blank\" rel=\"noopener nofollow external noreferrer\" data-wpel-link=\"external\">Google Maps Widget<\/a>, que tamb\u00e9m \u00e9 um dos melhores plugins do Google Maps para WordPress. Esse plugin em particular, inclusive, \u00e9 bem f\u00e1cil de configurar. Ele permite que voc\u00ea adicione mapas em miniaturas \u00e0 barra lateral ou no rodap\u00e9 do seu site WordPress.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/1_banner-772x250.png\"><img src=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/1_banner-772x250.png\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<p>Essa tamb\u00e9m \u00e9 uma \u00f3tima ferramenta se, por exemplo, voc\u00ea tamb\u00e9m estiver com problemas de espa\u00e7o no seu site. N\u00e3o com espa\u00e7o de armazenamento, mas com espa\u00e7o de posicionamento de objetos no visual do seu blog.<\/p>\n\n\n\n<p>Como o Google Maps Widget pode ser encaixado em praticamente qualquer lugar que voc\u00ea queira, basta escolher o melhor posicionamento e pronto.<\/p>\n\n\n\n<p>Entretanto, para sites de neg\u00f3cios, estamos mais inclinados a colocar mapas em tamanhos maiores, pois eles j\u00e1 s\u00e3o mais complicados de navegar. Ainda assim, vamos ver agora como colocar Google Maps no WordPress usando o plugin WP Google Maps.<\/p>\n\n\n\n<p>Primeiro de tudo, navegue at\u00e9 o painel de controle do seu site WordPress. De l\u00e1, v\u00e1 para a se\u00e7\u00e3o <b>Plugins &gt;&gt; Adicionar Novo<\/b>. Use o campo de busca e procure pelo plugin <b>WP Google Maps<\/b>. Quando voc\u00ea encontr\u00e1-lo, clique em <b>Instalar Agora<\/b> e, em seguida, <b>Ativar<\/b>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/plugin-wp-google-maps.png\"><img loading=\"lazy\" width=\"962\" height=\"520\" src=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/plugin-wp-google-maps.png\" alt=\"\" class=\"wp-image-2476\"\/><\/a><\/figure>\n\n\n\n<p>Ap\u00f3s a ativa\u00e7\u00e3o, uma nova aba chamada Maps vai aparecer no seu painel de controle. Se voc\u00ea clicar, voc\u00ea vai acessar a uma tela inicial de informa\u00e7\u00f5es gerais sobre o plugin. Voc\u00ea n\u00e3o precisa fazer nada em espec\u00edfico aqui. Apenas clique no bot\u00e3o azul<b> Skip Intro and Create a Map<\/b> para ir para a pr\u00f3xima tela.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/tela-inicial-wp-google-maps.png\"><img loading=\"lazy\" width=\"1253\" height=\"628\" src=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/tela-inicial-wp-google-maps.png\" alt=\"\" class=\"wp-image-2477\"\/><\/a><\/figure>\n\n\n\n<p>Na nova tela, voc\u00ea vai ver que o plugin vai informar voc\u00ea que ele precisa de um Google API Google. V\u00e1 em frente e consiga a sua clicando no link <b>Create an API Key Now<\/b>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/api-key-wp-google-maps.png\"><img loading=\"lazy\" width=\"636\" height=\"329\" src=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/api-key-wp-google-maps.png\" alt=\"\" class=\"wp-image-2478\"\/><\/a><\/figure>\n\n\n\n<p>O Google vai perguntar se voc\u00ea concorda com as condi\u00e7\u00f5es e termos de uso antes de fornecer uma API Key. Quando concordar, o Google vai configurar um novo projeto e voc\u00ea poder\u00e1 gerar uma API Key logo em seguida.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/api-key-criada.png\"><img loading=\"lazy\" width=\"1505\" height=\"755\" src=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/api-key-criada.png\" alt=\"\" class=\"wp-image-2479\"\/><\/a><\/figure>\n\n\n\n<p>Na imagem acima, estamos borrando a nossa API Key. Voc\u00ea nunca deve compartilhar essa chave com outras pessoas. Afinal, ela est\u00e1 associada com a sua conta e voc\u00ea n\u00e3o quer que os outros abusem dela, n\u00e3o \u00e9 mesmo?<\/p>\n\n\n\n<p>De qualquer forma, a sua API Key ser\u00e1 uma combina\u00e7\u00e3o de v\u00e1rias letras e n\u00fameros. Assim que a tiver, volte para o seu painel de controle e cole a API Key no campo indicado. Em seguida, clique em <b>SAVE<\/b>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/api-key-criada-1.png\"><img loading=\"lazy\" width=\"1505\" height=\"755\" src=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/api-key-criada-1.png\" alt=\"\" class=\"wp-image-2480\"\/><\/a><\/figure>\n\n\n\n<p>Voc\u00ea ver\u00e1 uma mensagem de confirma\u00e7\u00e3o. Al\u00e9m disso, j\u00e1 poder\u00e1 come\u00e7ar a trabalhar no seu primeiro mapa. Clique em <b>Editar<\/b> no t\u00edtulo <b>My First Map<\/b>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/meu-primeiro-mapa-wp-google-maps.png\"><img loading=\"lazy\" width=\"652\" height=\"261\" src=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/meu-primeiro-mapa-wp-google-maps.png\" alt=\"\" class=\"wp-image-2481\"\/><\/a><\/figure>\n\n\n\n<p>Em seguida, o plugin vai perguntar a voc\u00ea qual plataforma deve sustentar o seu mapa. Escolha a op\u00e7\u00e3o <b>Google Maps<\/b>. Depois, clique em <b>Select Engine<\/b>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/engine-google-maps-wp.png\"><img loading=\"lazy\" width=\"596\" height=\"487\" src=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/engine-google-maps-wp.png\" alt=\"\" class=\"wp-image-2482\"\/><\/a><\/figure>\n\n\n\n<p>Na nova tela, a primeira coisa que voc\u00ea precisa fazer \u00e9 definir um nome para o seu mapa. Depois, especifique a sua largura e altura. A largura padr\u00e3o de 100% vai automaticamente criar um mapa que se adaptar \u00e0 resolu\u00e7\u00e3o do seu site. Ent\u00e3o ela \u00e9 geralmente a melhor op\u00e7\u00e3o.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/configurac\u0327o\u0303es-iniciais-wp-google-maps.png\"><img loading=\"lazy\" width=\"658\" height=\"251\" src=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/configurac\u0327o\u0303es-iniciais-wp-google-maps.png\" alt=\"\" class=\"wp-image-2483\"\/><\/a><\/figure>\n\n\n\n<p>Voc\u00ea tamb\u00e9m poder\u00e1 modificar o n\u00edvel de zoom inicial que voc\u00ea que seu mapa mostre. Al\u00e9m de tamb\u00e9m poder decidir qual o tipo de layout de mapa que ele vai ser apresentado aos seus visitantes.<\/p>\n\n\n\n<p>Por exemplo, voc\u00ea pode usar o tipo Roteiro ou o tipo Terreno. Na maioria das vezes, a primeira op\u00e7\u00e3o \u00e9 a melhor e a mais \u00fatil para seus leitores. Ela mostra exatamente o caminho que eles precisam seguir para chegar ao seu destino.<\/p>\n\n\n\n<p>Agora, deslize a tela para baixo e alcance a se\u00e7\u00e3o <b>Marcadores<\/b>. Aqui, voc\u00ea pode especificar a local exato que voc\u00ea quer que o seu mapa mostre. \u00c9 s\u00f3 digitar o endere\u00e7o ou fornecer coordenadas no GPS pr\u00f3prio dele. Voc\u00ea tamb\u00e9m pode mover o mapa e clicar com o bot\u00e3o direito do mouse em qualquer lugar que deseja marcar.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/sa\u0303o-paulo-marcador-gps-wp-gogle-maps.png\"><img loading=\"lazy\" width=\"814\" height=\"390\" src=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/sa\u0303o-paulo-marcador-gps-wp-gogle-maps.png\" alt=\"\" class=\"wp-image-2484\"\/><\/a><\/figure>\n\n\n\n<p>Abaixo do campo de <b>Endere\u00e7o\/GPS<\/b>, existe um outro campo em que voc\u00ea pode inserir tipos de <b>Anima\u00e7\u00e3o<\/b>para o seu mapa. Por exemplo, voc\u00ea pode adicionar uma leve anima\u00e7\u00e3o de balan\u00e7o ao seu marcador no mapa quando ele for carregado.<\/p>\n\n\n\n<p>Voc\u00ea tamb\u00e9m pode definir que o Google Maps posicione uma janela de informa\u00e7\u00e3o (<i>pop-up<\/i>) pr\u00f3ximo ao seu marcador, mostrando o endere\u00e7o completo escrito do seu neg\u00f3cio f\u00edsico.<\/p>\n\n\n\n<p>Quando estiver com tudo pronto, clique em <b>Salvar Marcador <\/b>e p\u00e1gina vai recarregar. Ent\u00e3o, clique no bot\u00e3o azul <b>Salvar Mapa<\/b> no meio da tela. O plugin vai salvar todas as mudan\u00e7as feitas.<\/p>\n\n\n\n<p>Voc\u00ea pode embarcar o mapa criado com o plugin Google Maps WordPress copiando e colocando o <b>c\u00f3digo HTML<\/b> em qualquer lugar do seu site. Voc\u00ea acha esse c\u00f3digo (shortcode) dentro da aba <b>Mapas<\/b> do seu painel de controle, \u00e0 direita da tela. Use a foto abaixo como refer\u00eancia.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/co\u0301digo-html-inserir-google-maps-wordpress.png\"><img loading=\"lazy\" width=\"829\" height=\"195\" src=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/co\u0301digo-html-inserir-google-maps-wordpress.png\" alt=\"\" class=\"wp-image-2485\"\/><\/a><\/figure>\n\n\n\n<p>E \u00e9 isso! Voc\u00ea acabou de aprender a como colocar Google Maps no WordPress usando um plugin. Agora, voc\u00ea pode fazer com que seus visitantes ou clientes cheguem at\u00e9 o seu neg\u00f3cio ou loja f\u00edsica muito mais facilmente.<\/p>\n\n\n\n<h3><b>2. Usar o recurso de incorporar o Google Maps no WordPress<\/b><\/h3>\n\n\n\n<p>Voc\u00ea n\u00e3o precisa usar exatamente um plugin espec\u00edfico para saber como colocar Google Maps no WordPress. Inclusive, se voc\u00ea n\u00e3o quiser usar nenhum plugin, voc\u00ea pode usar um caminho manual para conseguir fazer isso.<\/p>\n\n\n\n<p>Existem uma s\u00e9rie de funcionalidades embarcadas que voc\u00ea pode usar para inserir Google Maps no WordPress. Por\u00e9m, uma abordagem bem mais r\u00e1pida \u00e9 usar um servi\u00e7o que permite gerar c\u00f3digos incorporados para o Google Maps em tempo real.<\/p>\n\n\n\n<p>O <a href=\"https:\/\/www.embedgooglemap.net\/\" target=\"_blank\" rel=\"noopener nofollow external noreferrer\" data-wpel-link=\"external\">Embed Google Map<\/a> \u00e9 um exemplo perfeito disso. Ele permite que voc\u00ea procure por endere\u00e7os usando a interface padr\u00e3o do Google Maps, al\u00e9m de ajustar o tamanho e n\u00edvel de zoom dos mapas que voc\u00ea quer usar.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/embed-google-map.png\"><img loading=\"lazy\" width=\"1054\" height=\"645\" src=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/embed-google-map.png\" alt=\"\" class=\"wp-image-2486\"\/><\/a><\/figure>\n\n\n\n<p>Assim que configurar as op\u00e7\u00f5es de acordo com as suas prefer\u00eancias, clique no bot\u00e3o verde <b>Get HTML-Code<\/b>. O programa vai gerar um c\u00f3digo HTML que voc\u00ea precisar\u00e1 adicionar ao seu site.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/co\u0301digo-html-google-maps-wordpress.png\"><img loading=\"lazy\" width=\"748\" height=\"286\" src=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/co\u0301digo-html-google-maps-wordpress.png\" alt=\"\" class=\"wp-image-2487\"\/><\/a><\/figure>\n\n\n\n<p>Copie e cole o c\u00f3digo HTML mostrado. Volte ao painel de controle do seu site WordPress. Abre o editor de qualquer p\u00e1gina (<b>P\u00e1ginas &gt;&gt; Adicionar Nova<\/b>) em que voc\u00ea queira adicionar o mapa do Google Maps.<\/p>\n\n\n\n<p>Selecione a aba <b>Texto<\/b>, que suporta c\u00f3digos em HTML. Cole o c\u00f3digo em qualquer lugar dela.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/co\u0301digo-html-inserido-nova-pa\u0301gina-wordpress.png\"><img loading=\"lazy\" width=\"1600\" height=\"909\" src=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/co\u0301digo-html-inserido-nova-pa\u0301gina-wordpress.png\" alt=\"\" class=\"wp-image-2488\"\/><\/a><\/figure>\n\n\n\n<p>Ent\u00e3o, salve suas mudan\u00e7as e d\u00ea uma olhada na nova p\u00e1gina que voc\u00ea acabou de criar.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/colocar-google-maps-no-wordpress-com-co\u0301digo-html.png\"><img loading=\"lazy\" width=\"1192\" height=\"707\" src=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/colocar-google-maps-no-wordpress-com-co\u0301digo-html.png\" alt=\"\" class=\"wp-image-2489\"\/><\/a><\/figure>\n\n\n\n<p>Legal, n\u00e9? O ponto fraco dessa abordagem \u00e9 que voc\u00ea vai precisar gerar novos c\u00f3digos HTML cada vez que quiser adicionar um mapa a uma nova p\u00e1gina. Por outro lado, quando adicionar Google Maps ao WordPress usando HTML, voc\u00ea poder\u00e1 v\u00ea-lo tamb\u00e9m dentro da aba <b>Visual <\/b>do editor.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/mapa-google-maps-wordpress-aba-visual.png\"><img loading=\"lazy\" width=\"639\" height=\"610\" src=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/mapa-google-maps-wordpress-aba-visual.png\" alt=\"\" class=\"wp-image-2490\"\/><\/a><\/figure>\n\n\n\n<p>Isso permite que voc\u00ea continue trabalhando nas suas p\u00e1ginas sem ter que fazer tudo dentro da aba <b>Textos<\/b>, que \u00e9 bem direcionada para c\u00f3digos.<\/p>\n\n\n\n<p>Esta ferramenta Embed Google Maps \u00e9 sensacional para saber como colocar Google Maps no WordPress. Abuse dela caso n\u00e3o queira mexer em plugins e nem trabalhar com temas pagos.<\/p>\n\n\n\n<h3><b>3. Adicionar mapas pelo seu tema WordPress<\/b><\/h3>\n\n\n\n<p>Uma terceira maneira de saber como colocar Google Maps no WordPress \u00e9 pelo pr\u00f3prio tema que voc\u00ea usa no WordPress. Alguns deles v\u00eam, inclusive, com essa funcionalidade embutida, o que facilita o processo de inser\u00e7\u00e3o de mapas no seu site.<\/p>\n\n\n\n<p>Contudo, a grande quest\u00e3o \u00e9 achar um tema que tenha suporte a essa funcionalidade. Isso exige um pouquinho de esfor\u00e7o. Na maioria das vezes, apenas temas pagos \u00e9 que t\u00eam essa op\u00e7\u00e3o. Mas, se chegar a comprar um tema pago, \u00e9 prov\u00e1vel que n\u00e3o esteja fazendo isso apenas pela fun\u00e7\u00e3o de ter Google Maps no seu site.<\/p>\n\n\n\n<p>Sendo assim, se voc\u00ea n\u00e3o tem ideia de onde procurar, temas WordPress para m\u00faltiplos prop\u00f3sitos devem ser sua primeira op\u00e7\u00e3o de busca. Esses tipos de temas t\u00eam muitas fun\u00e7\u00f5es ao mesmo tempo, ent\u00e3o voc\u00ea pode us\u00e1-los para construir qualquer tipo de site.<\/p>\n\n\n\n<p>Um dos temas pagos mais populares que voc\u00ea pode encontrar e que tem essa compatibilidade com o Google Maps \u00e9 o <a href=\"https:\/\/www.elegantthemes.com\/gallery\/divi\/\" target=\"_blank\" rel=\"noopener nofollow external noreferrer\" data-wpel-link=\"external\">Divi<\/a>. Esse tema oferece uma variedade de vantagens, incluindo um construtor visual pr\u00f3prio de p\u00e1ginas.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/tema-divi-construtor.jpg\"><img loading=\"lazy\" width=\"900\" height=\"464\" src=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/tema-divi-construtor.jpg\" alt=\"\" class=\"wp-image-2491\"\/><\/a><\/figure>\n\n\n\n<p>Quando for criar p\u00e1ginas com o <a href=\"https:\/\/www.elegantthemes.com\/plugins\/divi-builder\/\" target=\"_blank\" rel=\"noopener nofollow external noreferrer\" data-wpel-link=\"external\">Divi Builder<\/a>, voc\u00ea pode dividi-las usando colunas e linhas. Ent\u00e3o, voc\u00ea pode criar e especificar m\u00f3dulos usando os espa\u00e7os que aparecerem. Voc\u00ea vai poder personalizar cada campo com as fun\u00e7\u00f5es que quiser adicionar ao seu site.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/mo\u0301dulos-divi-tema-wordpress.jpg\"><img loading=\"lazy\" width=\"900\" height=\"584\" src=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/mo\u0301dulos-divi-tema-wordpress.jpg\" alt=\"\" class=\"wp-image-2492\"\/><\/a><\/figure>\n\n\n\n<p>Como voc\u00ea pode perceber na imagem acima, um desses m\u00f3dulos se chama <b>Map<\/b>. Adivinha o que ele faz? Isso mesmo: mapas. \u00c9 por aqui que voc\u00ea vai aprender como colocar Google Maps no WordPress usando seu tema pago.<\/p>\n\n\n\n<p>Clicando na op\u00e7\u00e3o Mapa, voc\u00ea ter\u00e1 que adicionar um <a href=\"https:\/\/www.wpgmaps.com\/documentation\/creating-a-google-maps-api-key\/\" target=\"_blank\" rel=\"noopener nofollow external noreferrer\" data-wpel-link=\"external\">c\u00f3digo da API Key do Google<\/a>. Caso n\u00e3o tenha um, mostramos o processo de como conseguir um c\u00f3digo no Passo 1 deste artigo.<\/p>\n\n\n\n<p>Quando colar o referido c\u00f3digo no campo solicitado, voc\u00ea poder\u00e1 escolher onde quer posicionar o seu mapa e adicionar quantos marcadores quiser nele.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/marcadores-de-mapa-tema-divi.jpg\"><img loading=\"lazy\" width=\"900\" height=\"323\" src=\"https:\/\/www.souzahost.com\/wp-content\/uploads\/2020\/09\/marcadores-de-mapa-tema-divi.jpg\" alt=\"\" class=\"wp-image-2493\"\/><\/a><\/figure>\n\n\n\n<p>Outros exemplos de temas pagos que oferecem suporte ao Google Maps no WordPress s\u00e3o o <a href=\"https:\/\/themeforest.net\/item\/travelmatic-travel-blog-wordpress-theme\/21273225\" target=\"_blank\" rel=\"noopener nofollow external noreferrer\" data-wpel-link=\"external\">Travelmatic<\/a>, o <a href=\"https:\/\/themeforest.net\/item\/estato-wordpress-theme-for-real-estate-and-developers\/19694547\" target=\"_blank\" rel=\"noopener nofollow external noreferrer\" data-wpel-link=\"external\">Estato<\/a> e o <a href=\"https:\/\/themeforest.net\/item\/reales-wp-real-estate-wordpress-theme\/10330568\" target=\"_blank\" rel=\"noopener nofollow external noreferrer\" data-wpel-link=\"external\">Reales WP<\/a>. Essa \u00e9 uma fun\u00e7\u00e3o muito popular em temas voltados a viagens e a assuntos imobili\u00e1rios. Mas voc\u00ea consegue encontrar temas WordPress pagos para outros tipos de assuntos, se procurar bem.<\/p>\n\n\n\n<blockquote><h2><span id=\"Conclusao\"><b>Conclus\u00e3o<\/b><\/span><\/h2><p>Neste artigo, voc\u00ea viu a import\u00e2ncia de aprender a como colocar Google Maps no WordPress. E, com ele, podemos concluir que n\u00e3o existe um jeito melhor do que compartilhar um endere\u00e7o no seu site atrav\u00e9s de um mapa online interativo.<\/p><p>O Google Maps permite que qualquer um encontre a sua localiza\u00e7\u00e3o de onde quer que estejam, o que aumentam as chances deles visitarem o seu estabelecimento. Al\u00e9m disso, inserir Google Maps no WordPress \u00e9 simples, pois existem v\u00e1rias formas de fazer isso.<\/p><\/blockquote>\n\n\n\n<p><i>Ficou com alguma d\u00favida ou quer se comunicar com a gente? Use a caixa de coment\u00e1rios abaixo para nos enviar uma mensagem. Temos muito interesse de saber o que voc\u00ea tem achado dos nossos conte\u00fados, produtos e servi\u00e7os. Estamos esperando voc\u00ea!&nbsp;<\/i><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Uma das principais fun\u00e7\u00f5es que um site de neg\u00f3cios pode ter \u00e9 uma forma de fazer com que os consumidores em potencial encontrem voc\u00ea rapidamente. Se o seu neg\u00f3cio tem um local f\u00edsico, voc\u00ea precisa dar aos seus visitantes todas as informa\u00e7\u00f5es necess\u00e1rias para chegar l\u00e1. Na maioria das vezes, mostrar um mapa exato com [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5536,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[94,1],"tags":[47,48,46,29],"_links":{"self":[{"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/posts\/1070"}],"collection":[{"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/comments?post=1070"}],"version-history":[{"count":1,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/posts\/1070\/revisions"}],"predecessor-version":[{"id":5558,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/posts\/1070\/revisions\/5558"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/media\/5536"}],"wp:attachment":[{"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/media?parent=1070"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/categories?post=1070"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.holahost.com.br\/tutoriais\/wp-json\/wp\/v2\/tags?post=1070"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}