{"id":7223,"date":"2018-08-06T07:45:15","date_gmt":"2018-08-06T07:45:15","guid":{"rendered":"https:\/\/blog.hostinger.io\/es-tutoriales\/?p=7223"},"modified":"2025-07-10T20:38:52","modified_gmt":"2025-07-10T18:38:52","slug":"insertar-google-maps-en-wordpress","status":"publish","type":"post","link":"\/es\/tutoriales\/insertar-google-maps-en-wordpress","title":{"rendered":"C\u00f3mo insertar Google Maps en WordPress (3 m\u00e9todos)"},"content":{"rendered":"<p>Una de las principales funciones de un sitio web comercial es permitir que los clientes potenciales te encuentren m&aacute;s r&aacute;pido. Si tienes una ubicaci&oacute;n f&iacute;sica, debes asegurarte de brindarles a los visitantes toda la informaci&oacute;n que necesitan para llegar. En la mayor&iacute;a de los casos, insertar un mapa es m&aacute;s efectivo que solo escribir tu direcci&oacute;n.<\/p><p>Afortunadamente, puedes insertar un mapa en WordPress&nbsp;de varias maneras. En este art&iacute;culo, vamos a hablar sobre c&oacute;mo hacerlo usando:<\/p><ol class=\"wp-block-list\">\n<li>Un plugin de <a href=\"https:\/\/www.google.com\/maps\" target=\"_blank\" rel=\"noopener\">Google Maps<\/a> para WordPress.<\/li>\n\n\n\n<li>La funci&oacute;n de inserci&oacute;n de Google Maps.<\/li>\n\n\n\n<li>Tu plantilla de WordPress.<\/li>\n<\/ol><p>Tenemos mucha informaci&oacute;n que cubrir, &iexcl;as&iacute; que saca el mapa y empecemos a explorar!<\/p><p>\n\n\n\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-como-insertar-google-maps-en-wordpress-video\">C&oacute;mo Insertar Google Maps en WordPress &ndash; Video<\/h2><p>Si prefieres un formato audiovisual, mira este video de la Academia de Hostinger donde te ense&ntilde;amos a a&ntilde;adir Google Maps en WordPress. <\/p><figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"C&oacute;mo Insertar Google Maps en WordPress | F&aacute;cilmente sin Plugins\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/e4Mu_7VrY0Q?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure><p>\n\n\n\n  <div class=\"youtube-shortcode\">\n    <div class=\"row\">\n      <div class=\"col-7 col-sm-8 d-flex align-items-center\">\n        <img decoding=\"async\" class=\"channel-logo\" src=\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/themes\/tutorialsthemeuplift\/public\/images\/youtube-channels\/hostinger-spain.jpg\" alt=\"youtube channel logo\">\n        <div class=\"d-flex flex-column justify-content-between\">\n          <span class=\"slogan d-none d-sm-block\">Suscribirse \u00a1Para m\u00e1s v\u00eddeos educativos!<\/span>\n          <span class=\"channel-name\">Academia de Hostinger<\/span>\n                    <\/div>\n      <\/div>\n      <div class=\"col-5 col-sm-4 d-flex align-items-center justify-content-end\">\n        <a class=\"subscribe-button\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" href=\"http:\/\/www.youtube.com\/channel\/UCYmKCu1yo_L0fqKe3U_oMnw?sub_confirmation=1\">\n          <img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-content\/themes\/tutorialsthemeuplift\/public\/images\/icons\/youtube.svg\" alt=\"subscribe\">\n          <span>Suscribirse<\/span>\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/div>\n\n    \n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-por-que-agregar-google-maps-a-wordpress\">Por qu&eacute; agregar Google Maps a WordPress<\/h2><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"245\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/google-maps.jpg\/public\" alt=\"Un ejemplo de Google Maps.\" class=\"wp-image-7228\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/google-maps.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/google-maps.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/google-maps.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/google-maps.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p>Los mapas de Google son precisos y altamente interactivos.<\/p><p>Agregar un mapa a tu sitio web es una opci&oacute;n muy superior a simplemente mostrar una direcci&oacute;n. Con un mapa, las personas pueden tener una idea r&aacute;pida de la calle en la que te encuentras, qu&eacute; hay cerca y c&oacute;mo encontrarla.<\/p><p>Decidir qu&eacute; tipo de mapa agregar es un poco m&aacute;s complicado. Algunas personas solo incluyen capturas de pantalla tomadas de fuentes de internet. Sin embargo, esa es una alternativa inferior cuando tienes opciones como <a href=\"https:\/\/www.google.com\/maps\" target=\"_blank\" rel=\"noopener\">Google Maps<\/a> disponibles de forma gratuita.<\/p><p>Estas son algunas de las formas en que insertar Google Maps en WordPress puede mejorar tu sitio:<\/p><ul class=\"wp-block-list\">\n<li>Son interactivos, por lo que los visitantes pueden mover el mapa hasta que tengan una mejor idea de d&oacute;nde est&aacute;s ubicado.<\/li>\n\n\n\n<li>Puedes usar Google Maps para resaltar cualquier ubicaci&oacute;n que desees, o incluso varias ubicaciones.<\/li>\n\n\n\n<li>Los visitantes pueden cambiar entre vistas de mapa y de calle, lo que les permite ver c&oacute;mo se ve el lugar donde est&aacute;s desde el exterior sin salir de su casa.<\/li>\n\n\n\n<li>Los usuarios pueden enviar r&aacute;pidamente mapas a sus tel&eacute;fonos, donde pueden obtener instrucciones sobre c&oacute;mo navegar a tu ubicaci&oacute;n.<\/li>\n<\/ul><p>Por supuesto, hay otros <a href=\"https:\/\/en.wikipedia.org\/wiki\/List_of_online_map_services\" target=\"_blank\" rel=\"noopener\">servicios de mapas en l&iacute;nea<\/a> aparte de Google Maps. Sin embargo, Google tiene la ventaja de ser un nombre familiar. Por lo tanto, la mayor&iacute;a de las personas que visiten tu sitio probablemente ya est&eacute; familiarizada con la forma en que funciona Google Maps y les generar&aacute; m&aacute;s confianza.<\/p><p>La mala noticia es que WordPress no incluye funciones incorporadas para insertar Google Maps a tu sitio. Sin embargo, eso se puede solucionar f&aacute;cilmente usando plugins, temas o incluso la funcionalidad incorporada de Google Maps.<\/p><h2 class=\"wp-block-heading\" id=\"h-como-insertar-google-maps-en-wordpress-3-metodos\">C&oacute;mo insertar Google Maps en WordPress (3 m&eacute;todos)<\/h2><p>A estas alturas, esperamos que est&eacute;s convencido de que, al menos, vale la pena agregar Google Maps a tu sitio de WordPress. Durante el resto de este art&iacute;culo, te guiaremos a trav&eacute;s de tres maneras en que puedes hacerlo. Comenzaremos con los plugins, luego agregaremos mapas manualmente y finalizaremos mirando las plantillas. &iexcl;Vamos a hacerlo!<\/p><h3 class=\"wp-block-heading\" id=\"h-1-instalar-un-plugin-de-google-maps-para-wordpress\">1. Instalar un plugin de Google Maps para WordPress<\/h3><p>Google Maps es una funci&oacute;n tan popular entre los sitios web que no deber&iacute;a sorprendernos cu&aacute;ntos plugins de Google Maps para WordPress hay disponibles.<\/p><p>Por ejemplo, con <a href=\"https:\/\/es.wordpress.org\/plugins\/wp-google-maps\/\" target=\"_blank\" rel=\"noopener\">WP Google Maps<\/a> puedes agregar mapas a tus p&aacute;ginas usando c&oacute;digos abreviados. Adem&aacute;s, este plugin tambi&eacute;n te ofrece opciones para personalizar tus marcadores de mapa, elegir entre varios temas para tus mapas, y m&aacute;s:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"288\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/wp-google-maps-plugin.jpg\/public\" alt=\"Plugin WP Google Maps.\" class=\"wp-image-7227\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/wp-google-maps-plugin.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/wp-google-maps-plugin.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/wp-google-maps-plugin.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/wp-google-maps-plugin.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p>En nuestra opini&oacute;n, WP Google Maps es una de las mejores opciones, ya que tambi&eacute;n es compatible con caracter&iacute;sticas avanzadas como la compatibilidad con m&uacute;ltiples <a href=\"\/es\/tutoriales\/wp-super-cache-vs-w3-total-cache\">plugins de almacenamiento en cach&eacute;<\/a> y Content Delivery Networks (CDN).<\/p><p>Sin embargo, hay otros plugins que puedes usar. <a href=\"https:\/\/es.wordpress.org\/plugins\/wd-google-maps\/\" target=\"_blank\" rel=\"noopener\">WD Google Maps<\/a> es una opci&oacute;n s&oacute;lida. Este plugin admite m&uacute;ltiples marcadores, proporciona mapas optimizados para dispositivos m&oacute;viles y ofrece varias configuraciones de personalizaci&oacute;n:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"285\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/wd-google-maps-plugin.jpg\/public\" alt=\"El plugin WD Google Maps.\" class=\"wp-image-7226\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/wd-google-maps-plugin.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/wd-google-maps-plugin.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/wd-google-maps-plugin.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/wd-google-maps-plugin.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p>Cuando agregas un nuevo mapa utilizando WD Google Maps, el plugin te gu&iacute;a a lo largo del proceso utilizando un constructor intuitivo que incluye funciones integradas de vista previa.<\/p><p>Finalmente, <a href=\"https:\/\/es.wordpress.org\/plugins\/google-maps-widget\/\" target=\"_blank\" rel=\"noopener\">Google Maps Widget<\/a> tambi&eacute;n es uno de los mejores plugins de Google Maps para WordPress. Este plugin en particular es s&uacute;per f&aacute;cil de configurar. Te permite agregar mapas tama&ntilde;o miniatura a tu barra lateral (o pie de p&aacute;gina) de WordPress, que los visitantes pueden ampliar con un clic:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"290\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/google-maps-widget-plugin.jpg\/public\" alt=\"Plugin Google Maps Widget.\" class=\"wp-image-7225\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/google-maps-widget-plugin.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/google-maps-widget-plugin.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/google-maps-widget-plugin.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/google-maps-widget-plugin.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p>Esta es una herramienta &uacute;til si no tienes espacio en tu sitio web, ya que puedes incluir widgets en casi cualquier lugar.<\/p><p>Sin embargo, para los sitios comerciales, somos m&aacute;s partidarios de incluir mapas de tama&ntilde;o completo, ya que son m&aacute;s dif&iacute;ciles de ser ignorados. Con eso en mente, hablemos de c&oacute;mo usar el plugin WP Google Maps.<\/p><p>Primero, ve a tu escritorio de WordPress a la pesta&ntilde;a <strong>Plugins &gt; A&ntilde;adir nuevo<\/strong>. Usa la barra de b&uacute;squeda para buscar el plugin <strong>WP Google Maps<\/strong>. Cuando veas que aparece en los resultados, haz clic en el bot&oacute;n <strong>Instalar ahora<\/strong> que se encuentra al lado:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"800\" height=\"266\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Plugin-WP-google-maps.png\/public\" alt=\"Instalaci&oacute;n del plugin WP Google Maps.\" class=\"wp-image-7232\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Plugin-WP-google-maps.png\/w=800,fit=scale-down 800w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Plugin-WP-google-maps.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Plugin-WP-google-maps.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Plugin-WP-google-maps.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Plugin-WP-google-maps.png\/w=414,fit=scale-down 414w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure><\/div><p>Activa el plugin y aparecer&aacute; una nueva pesta&ntilde;a llamada <strong>Mapas<\/strong> en tu escritorio. Al hacer clic en &eacute;l, el plugin mostrar&aacute; una breve p&aacute;gina de introducci&oacute;n. Sin embargo, puedes presionar el bot&oacute;n <strong>Saltar intro y crear un mapa<\/strong>&nbsp;para ir directamente al grano:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1134\" height=\"667\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Saltar-intro-y-crear-un-mapa.png\/public\" alt=\"Creando tu primer mapa\" class=\"wp-image-7235\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Saltar-intro-y-crear-un-mapa.png\/w=1134,fit=scale-down 1134w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Saltar-intro-y-crear-un-mapa.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Saltar-intro-y-crear-un-mapa.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Saltar-intro-y-crear-un-mapa.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Saltar-intro-y-crear-un-mapa.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Saltar-intro-y-crear-un-mapa.png\/w=990,fit=scale-down 990w\" sizes=\"(max-width: 1134px) 100vw, 1134px\" \/><\/figure><\/div><p>En la siguiente p&aacute;gina, el plugin te informar&aacute; que necesitas una <a href=\"https:\/\/www.wpgmaps.com\/documentation\/creating-a-google-maps-api-key\/\" target=\"_blank\" rel=\"noopener\">clave API de Google<\/a> para funcionar. Obt&eacute;n la tuya haciendo clic en el enlace <strong>Create an API key now<\/strong> (Crea una clave API ahora):<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"961\" height=\"353\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Crear-una-clave-API.png\/public\" alt=\"Creando una clave de API.\" class=\"wp-image-7233\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Crear-una-clave-API.png\/w=961,fit=scale-down 961w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Crear-una-clave-API.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Crear-una-clave-API.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Crear-una-clave-API.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 961px) 100vw, 961px\" \/><\/figure><\/div><p>Google te pedir&aacute; que aceptes sus t&eacute;rminos antes de poder crear una aplicaci&oacute;n y obtener una clave API. Luego de aceptar, Google configurar&aacute; un nuevo proyecto para ti y puedes generar una clave API de inmediato:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"189\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/ejemplo-de-clave-API.jpg\/public\" alt=\"Un ejemplo de una clave de Google API.\" class=\"wp-image-7249\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/ejemplo-de-clave-API.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/ejemplo-de-clave-API.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/ejemplo-de-clave-API.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/ejemplo-de-clave-API.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p>Estamos ocultando la clave API aqu&iacute;, ya que nunca debes compartir la tuya con otras personas. Despu&eacute;s de todo, est&aacute; asociada a tu cuenta, y no quieres que otros accedan a ella. En cualquier caso, tu clave API ser&aacute; una combinaci&oacute;n larga de letras y n&uacute;meros. Una vez que la tengas, regresa a tu escritorio y p&eacute;gala donde el plugin lo solicita:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"996\" height=\"351\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Pegar-clave-de-API.png\/public\" alt=\"Pegando tu clave API en WordPress.\" class=\"wp-image-7234\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Pegar-clave-de-API.png\/w=996,fit=scale-down 996w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Pegar-clave-de-API.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Pegar-clave-de-API.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Pegar-clave-de-API.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Pegar-clave-de-API.png\/w=990,fit=scale-down 990w\" sizes=\"(max-width: 996px) 100vw, 996px\" \/><\/figure><\/div><p>Deber&iacute;as ver un mensaje de &eacute;xito y ahora puedes comenzar a trabajar en tu primer mapa:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"969\" height=\"274\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Clave-de-API-guardada.png\/public\" alt=\"Creando tu primer mapa.\" class=\"wp-image-7237\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Clave-de-API-guardada.png\/w=969,fit=scale-down 969w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Clave-de-API-guardada.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Clave-de-API-guardada.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Clave-de-API-guardada.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 969px) 100vw, 969px\" \/><\/figure><\/div><p>Como puedes ver arriba, el plugin se toma la libertad de configurar un mapa de prueba para ti, el cual puedes editar y usar en tu sitio web. Para hacerlo, haz clic en el bot&oacute;n <strong>Editar<\/strong> debajo del nombre del mapa. Ahora, el plugin te pedir&aacute; que elijas qu&eacute; plataforma usar para tu mapa. Elige la opci&oacute;n de Google Maps:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"423\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Selecionar-sistema-de-mapas.jpg\/public\" alt=\"Elegir plataforma de mapas\" class=\"wp-image-7248\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Selecionar-sistema-de-mapas.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Selecionar-sistema-de-mapas.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Selecionar-sistema-de-mapas.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Selecionar-sistema-de-mapas.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p>Lo primero que debes hacer es darle un nombre a tu mapa. Luego puedes cambiar su ancho y alto. El ancho predeterminado del 100% crear&aacute; autom&aacute;ticamente un mapa que se adapta a la resoluci&oacute;n de tu sitio, por lo que casi siempre es la mejor opci&oacute;n:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"953\" height=\"272\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Ajustes-de-google-maps.png\/public\" alt=\"Configurando tu mapa de Google.\" class=\"wp-image-7236\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Ajustes-de-google-maps.png\/w=953,fit=scale-down 953w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Ajustes-de-google-maps.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Ajustes-de-google-maps.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Ajustes-de-google-maps.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 953px) 100vw, 953px\" \/><\/figure><\/div><p>Tambi&eacute;n ver&aacute;s una opci&oacute;n para modificar el nivel de zoom inicial de tu mapa y decidir qu&eacute; tipo de dise&ntilde;o mostrar. Por ejemplo, puedes usar mapas de ruta cl&aacute;sicos o mapas de terreno. En la mayor&iacute;a de los casos, el primero es la mejor opci&oacute;n, ya que es m&aacute;s &uacute;til para tus visitantes.<\/p><p>A continuaci&oacute;n, despl&aacute;zate hacia abajo a la secci&oacute;n <strong>Marcadores<\/strong> . Aqu&iacute; puedes especificar qu&eacute; ubicaci&oacute;n deseas que muestre tu mapa, escribiendo sus coordenadas de GPS. Tambi&eacute;n puedes desplazarte por el mapa a la derecha y hacer clic con el bot&oacute;n derecho en cualquier ubicaci&oacute;n que quieras marcar:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"237\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/establecer-marcador.jpg\/public\" alt=\"Configurando tu marcador de mapas.\" class=\"wp-image-7247\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/establecer-marcador.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/establecer-marcador.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/establecer-marcador.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/establecer-marcador.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p>Debajo de la configuraci&oacute;n <strong>Direcci&oacute;n\/GPS<\/strong> de tu marcador, tambi&eacute;n hay opciones para agregar animaciones simples al mapa. Por ejemplo, puedes hacer que tu marcador de un peque&ntilde;o salto cuando se carga el mapa, lo cual se ve muy bien. Tambi&eacute;n puedes configurar tu mapa de Google para mostrar un cuadro emergente al lado de tu marcador, que mostrar&aacute; tu direcci&oacute;n completa.<\/p><p>Cuando est&eacute;s listo, haz clic en el bot&oacute;n <strong>Guardar marcador<\/strong> y la p&aacute;gina se volver&aacute; a cargar. Luego, presiona el bot&oacute;n <strong>Guardar&nbsp;Mapa<\/strong> en el medio de la pantalla, y el plugin guardar&aacute; todos los cambios.<\/p><p>Puedes incrustar los mapas de Google para WordPress que crees con este plugin <a href=\"https:\/\/codex.wordpress.org\/shortcode\" target=\"_blank\" rel=\"noopener\">pegando sus c&oacute;digos abreviados<\/a> en cualquier lugar de tu sitio. Puedes encontrar esos c&oacute;digos abreviados dentro de la pesta&ntilde;a <strong>Mapas<\/strong> en tu escritorio a la derecha de cada entrada:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"857\" height=\"113\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Mi-primer-mapa-de-google.png\/public\" alt=\"Encontrar los c&oacute;digos abreviados de tu mapa.\" class=\"wp-image-7238\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Mi-primer-mapa-de-google.png\/w=857,fit=scale-down 857w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Mi-primer-mapa-de-google.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Mi-primer-mapa-de-google.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/Mi-primer-mapa-de-google.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 857px) 100vw, 857px\" \/><\/figure><\/div><p>&iexcl;Eso es todo! Acabas de insertar tu primer Google Map en WordPress. Con este plugin (y otros similares), puedes crear todos los mapas que quieras.<\/p><h3 class=\"wp-block-heading\" id=\"h-2-usa-la-funcion-insertar-de-google-maps\">2. Usa la funci&oacute;n Insertar de Google Maps<\/h3><p>Si no quieres utilizar un plugin para crear mapas de Google en WordPress, puedes hacerlo de forma manual. Hay funciones incorporadas integradas que puedes usar para insertar Google Maps en WordPress. Sin embargo, una alternativa mucho m&aacute;s sencilla es usar un servicio que te permita generar c&oacute;digos de inserci&oacute;n para Google Maps sobre la marcha.<\/p><p><a href=\"https:\/\/www.embedgooglemap.net\/\" target=\"_blank\" rel=\"noopener\">Embed Google Map<\/a> es un ejemplo perfecto. Te permite buscar direcciones usando la interfaz predeterminada de Google Maps y ajustar el tama&ntilde;o y el nivel de zoom que quieres que tengan tus mapas:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"890\" height=\"542\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/incrustar-google-map.jpg\/public\" alt=\"P&aacute;gina de inicio de Embed Google Map.\" class=\"wp-image-7246\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/incrustar-google-map.jpg\/w=890,fit=scale-down 890w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/incrustar-google-map.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/incrustar-google-map.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/incrustar-google-map.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 890px) 100vw, 890px\" \/><\/figure><\/div><p>Una vez que hayas configurado esta serie de ajustes, puedes hacer clic en el bot&oacute;n <strong>Get HTML-Code<\/strong> y el sitio generar&aacute; un fragmento de c&oacute;digo HTML que puedes agregar a tu sitio web.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"868\" height=\"316\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/codigo-para-incrustar-google-map.jpg\/public\" alt=\"Ejemplo de un c&oacute;digo de inserci&oacute;n de Google Maps.\" class=\"wp-image-7245\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/codigo-para-incrustar-google-map.jpg\/w=868,fit=scale-down 868w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/codigo-para-incrustar-google-map.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/codigo-para-incrustar-google-map.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/codigo-para-incrustar-google-map.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 868px) 100vw, 868px\" \/><\/figure><\/div><p>Copia ese c&oacute;digo ahora, luego regresa a tu tablero de WordPress. En seguida, abre el editor para la p&aacute;gina a la que quieres agregar tu mapa de Google. Selecciona la pesta&ntilde;a <strong>Texto<\/strong>, que admite c&oacute;digo HTML:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"955\" height=\"499\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/mapa-editor.png\/public\" alt=\"Agregar el c&oacute;digo al editor de WordPress\" class=\"wp-image-14175\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/mapa-editor.png\/w=955,fit=scale-down 955w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/mapa-editor.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/mapa-editor.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/mapa-editor.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 955px) 100vw, 955px\" \/><\/figure><\/div><p>Pega el c&oacute;digo donde quieras que aparezca tu mapa en la p&aacute;gina. Luego, guarda los cambios y dale un vistazo a tu p&aacute;gina en el front-end:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"455\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/ejemplo-de-mapa.jpg\/public\" alt=\"Echando un vistazo a tu mapa de Google.\" class=\"wp-image-7244\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/ejemplo-de-mapa.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/ejemplo-de-mapa.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/ejemplo-de-mapa.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/ejemplo-de-mapa.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p>La desventaja de este enfoque es que tendr&aacute;s que generar nuevos c&oacute;digos de inserci&oacute;n para cada mapa que quieras agregar a tu sitio web. En el lado positivo, es que una vez que agregues un mapa a trav&eacute;s de HTML, podr&aacute;s verlo en la pesta&ntilde;a <strong>Visual<\/strong> de tu editor:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"934\" height=\"428\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/visual.png\/public\" alt=\"El mapa en la pesta&ntilde;a visual del editor de WordPress\" class=\"wp-image-14174\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/visual.png\/w=934,fit=scale-down 934w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/visual.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/visual.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/visual.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 934px) 100vw, 934px\" \/><\/figure><\/div><p>Esto te permitir&aacute; seguir trabajando en tus p&aacute;ginas, sin tener que hacer todo con el editor de <strong>Texto<\/strong>.<\/p><h3 class=\"wp-block-heading\" id=\"h-3-agrega-mapas-a-traves-de-tu-tema-de-wordpress\">3. Agrega mapas a trav&eacute;s de tu tema de WordPress<\/h3><p>Los mapas de Google son tan populares en WordPress que incluso hay algunos temas que te permiten agregarlos a tu sitio con la funcionalidad incorporada. Esto significa que <a href=\"\/es\/tutoriales\/mejores-plantillas-wordpress\">con el tema correcto<\/a>, no tendr&aacute;s que usar ning&uacute;n plugin o agregar c&oacute;digo HTML a tu sitio.<\/p><p>Sin embargo, encontrar un tema que admita esta caracter&iacute;stica puede requerir un poco de trabajo. En la mayor&iacute;a de los casos, solo los temas premium incluir&aacute;n esta opci&oacute;n, por lo que este enfoque puede requerir que gastes un poco de dinero. Sin embargo, si vas a comprar un tema premium, probablemente no lo hagas solo porque es compatible con los mapas de Google.<\/p><p>Si no sabes por d&oacute;nde empezar a buscar, los temas multiusos de WordPress probablemente sean tu primera parada. Este tipo de temas incluyen una gran cantidad de caracter&iacute;sticas, de modo que puedes usarlas para crear cualquier tipo de sitio web que puedas imaginar.<\/p><p>Uno de los temas multiprop&oacute;sito m&aacute;s populares se llama <a href=\"https:\/\/www.elegantthemes.com\/gallery\/divi\/\" target=\"_blank\" rel=\"noopener\">Divi<\/a>. Este tema ofrece una serie de ventajas, incluido su propio generador visual de p&aacute;ginas:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"464\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/vista-del-constructor-de-divi.jpg\/public\" alt=\"Divi Builder\" class=\"wp-image-7240\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/vista-del-constructor-de-divi.jpg\/w=900,fit=scale-down 900w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/vista-del-constructor-de-divi.jpg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/vista-del-constructor-de-divi.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/vista-del-constructor-de-divi.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p>Cuando creas p&aacute;ginas usando <a href=\"https:\/\/www.elegantthemes.com\/plugins\/divi-builder\/\" target=\"_blank\" rel=\"noopener\">Divi Builder<\/a>, puedes dividirlas usando filas y columnas. Luego, puedes agregar m&oacute;dulos espec&iacute;ficos dentro de los espacios resultantes:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/ejemplo-de-m%C3%B3dulos.jpg\/public\" alt=\"Algunos de los m&oacute;dulos que ofrece Divi.\" class=\"wp-image-7242\"><\/figure><\/div><p>Si tienes buen ojo, notar&aacute;s que uno de los m&oacute;dulos en la captura de pantalla anterior se llama <strong>Map<\/strong>. Haz clic en &eacute;l y el tema te pedir&aacute; que ingreses tu<a href=\"https:\/\/www.wpgmaps.com\/documentation\/creating-a-google-maps-api-key\/\" target=\"_blank\" rel=\"noopener\"> clave de Google API<\/a>. En caso de que no tengas una, ya hablamos del proceso de generaci&oacute;n en el primer m&eacute;todo de este art&iacute;culo.<\/p><p>Luego de pegar tu clave API, puedes elegir la ubicaci&oacute;n que mostrar&aacute; tu mapa y agregar tantos marcadores como quieras:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2018\/08\/a%C3%B1adir-nuevo-pin.jpg\/public\" alt=\"Agregar marcadores a tu mapa.\" class=\"wp-image-7241\"><\/figure><\/div><p>Otros ejemplos de temas que permiten insertar Google Maps en WordPress de forma inmediata son Travelmatic y Reales WP. Es una caracter&iacute;stica muy popular entre los temas de bienes ra&iacute;ces y de viajes, pero puedes encontrarla disponible para otros tipos de temas si miras a tu alrededor.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/es\/hosting-wordpress\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/06\/ES-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-40615\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/06\/ES-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/06\/ES-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/06\/ES-New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/06\/ES-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusi&oacute;n<\/h2><p>No hay mejor manera de compartir una direcci&oacute;n en tu sitio web que utilizando un mapa interactivo en l&iacute;nea. <a href=\"https:\/\/www.google.com\/maps\" target=\"_blank\" rel=\"noopener\">Google Maps<\/a> permite que cualquier persona descubra c&oacute;mo llegar a tu ubicaci&oacute;n desde donde sea que est&eacute;, lo que significa que es m&aacute;s probable que te visite. Adem&aacute;s, insertar Google Maps en WordPress es simple, ya que hay varias maneras f&aacute;ciles de hacerlo.<\/p><p>&iquest;Tienes alguna pregunta sobre c&oacute;mo usar Google Maps en tu sitio de WordPress? &iexcl;No dudes en consultarnos en la secci&oacute;n de comentarios a continuaci&oacute;n!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Una de las principales funciones de un sitio web comercial es permitir que los clientes potenciales te encuentren m&aacute;s r&aacute;pido. Si tienes una ubicaci&oacute;n f&iacute;sica, debes asegurarte de brindarles a los visitantes toda la informaci&oacute;n que necesitan para llegar. En la mayor&iacute;a de los casos, insertar un mapa es m&aacute;s efectivo que solo escribir tu [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/es\/tutoriales\/insertar-google-maps-en-wordpress\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":85,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"C\u00f3mo insertar Google Maps en WordPress (3 m\u00e9todos)","rank_math_description":"Si tienes un local, insertar Google Maps en tu sitio WordPress puede ser una excelente manera de ayudar a los visitantes a encontrarte.","rank_math_focus_keyword":"insertar google maps en wordpress","footnotes":""},"categories":[4747],"tags":[14222],"class_list":["post-7223","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-insertar-google-maps-en-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/wordpress-google-maps","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/como-colocar-google-maps-no-wordpress","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/google-maps-wordpress","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/insertar-google-maps-en-wordpress","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/memasukkan-google-map-ke-wordpress","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wordpress-google-maps","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/wordpress-google-maps","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/wordpress-google-maps","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/insertar-google-maps-en-wordpress\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/insertar-google-maps-en-wordpress\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/insertar-google-maps-en-wordpress\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-colocar-google-maps-no-wordpress","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wordpress-google-maps","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/wordpress-google-maps","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/wordpress-google-maps","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/wordpress-google-maps","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/posts\/7223","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/comments?post=7223"}],"version-history":[{"count":18,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/posts\/7223\/revisions"}],"predecessor-version":[{"id":47498,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/posts\/7223\/revisions\/47498"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/media?parent=7223"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/categories?post=7223"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/tags?post=7223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}