El API de Google Maps es ahora Requerido<\/strong><\/p>\n A partir de del 11 de junio del 2018, una llave API es ahora requerida para Google Maps<\/strong> si ya ha implementado Google Maps en su sitio y ya no funciona, esta podr\u00eda ser la raz\u00f3n. O m\u00e1s bien, a usted le falta el API key. Las buenas noticias, para el 99% de ustedes, a\u00fan deber\u00eda ser gratuito. Abajo podr\u00e1 encontrar el precio del API de Google Maps<\/a><\/u>.<\/p>\n Google tambi\u00e9n le dar\u00e1 un cr\u00e9dito recurrente de $200 en su cuenta cada mes para compensar sus gastos de uso. As\u00ed que, como puedo ver, al menos que usted est\u00e9 generado miles de peticiones, usar Google Maps en su sitio no le deber\u00eda costar.<\/p>\n \u00bfQu\u00e9 m\u00e1s ha cambiado? Nada, pero usted ahora tendr\u00e1 que hacer el seguimiento si quiere utilizar Google Maps en WordPress:<\/p>\n C\u00f3mo Obtener un API key de Google Maps<\/strong><\/p>\n Abajo podr\u00e1 encontrar los pasos sobre c\u00f3mo podr\u00e1 conseguir un API key de Google Maps<\/p>\n Paso 1<\/strong><\/p>\n Vaya a Google Cloud Platform Console<\/a><\/u>. Si a\u00fan no tiene una cuenta, cree una, es gratuita.<\/p>\n Paso 2<\/strong><\/p>\n Seleccione o cree un proyecto<\/p>\n Paso 3<\/strong><\/p>\n Establezca su cuenta de facturaci\u00f3n. A pesar de que necesita poner una tarjeta de cr\u00e9dito en los archivos, jam\u00e1s le cobrar\u00e1n, al menos que rebase los l\u00edmites de uso.<\/p>\n Paso 4<\/strong><\/p>\n Se le pedir\u00e1 elegir uno o m\u00e1s productos. Esto depende del tipo de mapa que estar\u00e1 usando. Por ejemplo, si est\u00e1 integrando un mapa en su sitio de WordPress sin un plugin<\/a><\/u> (como se muestra en los pasos siguientes), entonces tendr\u00e1 que elegir el API Integrado de Google Maps.<\/p>\n Si est\u00e1 usando un plugin como Google Maps Widget<\/a><\/u> (como se muestra en los pasos siguientes), luego usted tendr\u00eda que elegir un API Est\u00e1tico de Google Maps.<\/p>\n Si est\u00e1 usando un plugin o un tema, deber\u00edan tener una documentaci\u00f3n sobre el tipo de despliegue que est\u00e1n usando. No se preocupe, siempre podr\u00e1 agregar varios tipos y cambiarlos en otro momento.<\/p>\n Paso 5<\/strong><\/p>\n Dar clic en \u201cHabilitar.\u201d<\/p>\n De clic en \u201cAPIs\u201d y luego bajo \u201cCredenciales\u201d, usted ver\u00e1 su API key.<\/p>\n Si simplemente est\u00e1 integrando su API key de Google Maps este aparecer\u00e1 en forma de texto en su c\u00f3digo fuente. Por lo tanto, usted deber\u00eda restringir esto, si no es as\u00ed, la gente podr\u00eda usar su API key en su sitio de WordPress o proyectos que ir\u00edan acumul\u00e1ndose a su uso.<\/p>\n Para hacer esto, simplemente d\u00e9 clic en el nombre de su API key y le permitir\u00e1 agregar una restricci\u00f3n. Para su sitio de WordPress, simplemente a\u00f1adiendo un referente de HTTP deber\u00eda ser suficiente. Como con https:\/\/yourdomain.com\/*. Esto le permitir\u00e1 s\u00f3lo hacer llamadas en su sitio web.<\/p>\n C\u00f3mo Agregar Google Maps en WordPress sin un Plugin<\/strong><\/p>\n Si s\u00f3lo quiere integrar un simple mapa y no necesita una funcionalidad m\u00e1s detallada como marcadores personalizados de ubicaci\u00f3n u otras anotaciones, usted puede integrar Google Maps sin un plugin usando el sitio com\u00fan de Google Maps que utiliza a diario.<\/p>\n As\u00ed es como funciona…<\/p>\n Paso 1: Copie el C\u00f3digo de Integraci\u00f3n de Google Maps<\/strong><\/p>\n Para empezar, utilice el sitio de Google Maps para crear el mapa que usted quiera integrar.<\/p>\n Por ejemplo, si quiere integrar un marcador de ubicaci\u00f3n, abra el lugar en Google Maps. O, si prefiere integrar direcciones, abra las direcciones en Google Maps.<\/p>\n Una vez que tenga el mapa que quiera integrar, d\u00e9 clic en el men\u00fa de hamburguesa en la esquina superior izquierda.<\/p>\n En la lista de art\u00edculos del men\u00fa, seleccione la opci\u00f3n de Compartir o integrar mapa<\/strong>:<\/p>\n Esto abrir\u00e1 un popup para Compartir<\/strong>. En ese popup, de clic en la pesta\u00f1a de Integrar mapa<\/strong>.<\/p>\n Luego, usted podr\u00e1 elegir el tama\u00f1o deseado utilizando el drop-down. Para la mayor\u00eda de los sitios de WordPress, el tama\u00f1o est\u00e1ndar funcionar\u00e1 bien, pero usted puede hacer el mapa m\u00e1s grande o m\u00e1s peque\u00f1o si es necesario.<\/p>\n Una vez que haya terminado, de clic en el bot\u00f3n de Copiar HTML<\/strong> para copiar el c\u00f3digo de integraci\u00f3n.<\/p>\n Luego tendr\u00e1 que agregar el API key dentro del c\u00f3digo. Para que su c\u00f3digo se vea as\u00ed:<\/p>\n Ahora, lo \u00fanico que le queda por hacer es agregar el c\u00f3digo de integraci\u00f3n a su sitio de WordPress en el art\u00edculo o p\u00e1gina en la que quiere incluir su mapa.<\/p>\n Si est\u00e1 utilizando el nuevo editor Gutenberg de<\/a> WordPress que fue lanzado con WordPress 5.0, usted puede hacer eso al agregar un bloque Personalizado de HTML<\/strong> y pegar el c\u00f3digo de integraci\u00f3n dentro del bloque. No se olvide de agregar su API key.<\/strong><\/p>\n Podr\u00e1 tener una vista previa de c\u00f3mo lucir\u00e1 su mapa dando clic en el bot\u00f3n de Vista Previa<\/strong> sobre el bloque.<\/p>\n Si a\u00fan est\u00e1 usando el editor cl\u00e1sico de TinyMCE, usted puede agregar el c\u00f3digo integrado de Google Maps al abrir la pesta\u00f1a de Texto<\/strong> y pegar el c\u00f3digo ah\u00ed:<\/p>\n Una vez que haya agregado el c\u00f3digo, puede regresar a la pesta\u00f1a de Visual<\/strong> para ver una vista previa en vivo de su mapa.<\/p>\n \u00a1Eso es todo! Acaba de aprender c\u00f3mo agregar Google Maps en WordPress sin un plugin.<\/p>\n Si quiere ponerse un poco m\u00e1s creativo cuando se trata de cosas como marcadores de ubicaci\u00f3n m\u00faltiples, anotaciones personalizadas, etc., a\u00fan podr\u00e1 hacer eso sin la necesidad de un plugin con el servicio de My Maps de Google.<\/p>\n My Maps es una herramienta oficial de Google que le permite crear y compartir sus propios mapas personalizados. Con esto, usted podr\u00eda crear algo como el ejemplo de abajo, con muchos marcadores personalizados e informaci\u00f3n personalizada que muestra cuando un usuario da clic en un marcador.<\/p>\n As\u00ed es como se usa para agregar Google Maps personalizados a WordPress<\/p>\n Para empezar, vaya a My Maps de Google<\/a> y cree un nuevo mapa. Desde ah\u00ed, usted puede utilizar la interfaz del constructor de mapas para construir su mapa.<\/p>\n Mientras que no cubriremos esto a detalle, esta interfaz le permite construir algunos mapas muy creativos. Para poder ver esto m\u00e1s a detalle, este art\u00edculo de Google<\/a> cubre muchas de las funcionalidades m\u00e1s importantes.<\/p>\n Una vez que haya terminado de construir su mapa, usted necesita generar el c\u00f3digo de integraci\u00f3n.<\/p>\n Antes de poder conseguir el c\u00f3digo, usted primero debe hacer p\u00fablico su mapa. Para hacer esto, d\u00e9 clic en el bot\u00f3n de Compartir<\/strong>. Luego, d\u00e9 clic en Cambiar<\/strong>… que sale en el popup.<\/p>\n Luego, seleccione ON \u2013 P\u00fablico en la red<\/strong> y d\u00e9 clic en Guardar<\/strong>:<\/p>\n Una vez que haya hecho eso, d\u00e9 clic en el men\u00fa desplegable cerca del t\u00edtulo de su mapa y seleccione Integrar a mi sitio<\/strong> para generar el c\u00f3digo de integraci\u00f3n:<\/p>\n Esto abrir\u00e1 un popup con el c\u00f3digo, el cual deber\u00eda copiar. No se olvide de agregar el API key.<\/strong><\/p>\n Ahora, usted puede agregar el c\u00f3digo de integraci\u00f3n a su sitio de WordPress como lo har\u00eda con cualquier otro c\u00f3digo de integraci\u00f3n que obtendr\u00eda del sitio regular de Google Maps.<\/p>\n Si no est\u00e1 seguro de c\u00f3mo hacer esto, d\u00e9 clic aqu\u00ed para ir a la secci\u00f3n de tutorial de arriba.<\/a><\/p>\n M\u00e1s all\u00e1 de los m\u00e9todos anteriores, tambi\u00e9n hay muchos plugins de Google Maps de WordPress que le podr\u00e1n ayudar a integrar los mapas en su sitio.<\/p>\n Hay algunas razones por las que podr\u00eda considerar utilizar estos plugins en lugar de los m\u00e9todos manuales:<\/p>\n Para todos estos plugins, usted necesitar\u00e1 generar su propio API Key de Google Maps antes de que puede empezar a integrar mapas. Este tutorial<\/a> muestra como se puede hacer esto.<\/p>\n El Widget de Google Maps<\/a> es un simple plugin de Google Maps que le permite integrar un mapa utilizando el API Est\u00e1tico de Google Maps, el cual ofrece un enfoque m\u00e1s enfocado en el desempe\u00f1o al integrar una imagen est\u00e1tica en lugar de un mapa interactivo (explicaremos m\u00e1s de esto en nuestra siguiente secci\u00f3n).<\/p>\n Es una buena opci\u00f3n si prefiere algo simple y liviano. Una vez que lo active, usted necesitar\u00e1 agarrar su API Key de Google Maps<\/a> y ponerlo dentro de las opciones del plugin. Puede agregar un Google Maps a cualquier \u00e1rea de widget en su sitio. Luego, los visitantes podr\u00e1n abrir una versi\u00f3n m\u00e1s grande e interactiva del mapa en un lightbox:<\/p>\n Tambi\u00e9n puede utilizar un mapa interactivo de inmediato si as\u00ed lo desea, y la versi\u00f3n Pro le permite integrar mapas en cualquier parte de su sitio usando un shortcode.<\/p>\n Google Maps Easy<\/a> le ayuda a crear mapas personalizados con sus propios marcadores y anotaciones.<\/p>\n Cuando usted agrega marcadores, usted tendr\u00e1 la habilidad de poder subir sus propios iconos personalizados, incluir texto e im\u00e1genes en la descripci\u00f3n de marcador, y mucho m\u00e1s. Tambi\u00e9n podr\u00e1 controlar como funciona su mapa, como el elegir si quiere o no permitir que sus usuarios pueden zoom al mapa:<\/p>\n Una vez que haya construido su mapa, usted puede integrarlo usando un shortcode o una funci\u00f3n PHP.<\/p>\n Intergeo<\/a> es otra opci\u00f3n popular que le permite crear mapas sin marcadores personalizados y tener control sobre la funcionalidad del mapa.<\/p>\n Una vez que haya instalado y activado el plugin, usted podr\u00e1 construir sus mapas desde su dashboard de WordPress.<\/p>\n Luego, podr\u00e1 integrarlos en cualquier parte de su sitio usando un shortcode.<\/p>\n Gutenberg Block for Google Maps Embed<\/a> es un plugin simple que agrega un bloque dedicado de Google Maps a un nuevo editor de bloque de Gutenberg de WordPress.<\/p>\n Con este bloque, usted puede integrar cualquier direcci\u00f3n y elegir:<\/p>\n No le permitir\u00e1 crear sus propios mapas \u2013 pero es una opci\u00f3n conveniente si usted utiliza el nuevo editor de bloque y s\u00f3lo quiere una forma f\u00e1cil para incluir mapas simples.<\/p>\n Mientras que Google Maps le permite integrar un mont\u00f3n de funcionalidades geniales a su sitio con sus mapas interactivos, hay un intercambio de desempe\u00f1o por hacer esto, ya que necesita cargar un gran n\u00famero de scripts para poder lograr ofrecer toda esta funcionalidad.<\/p>\n Para no hacerle larga esta historia, integrar Mapas interactivos de Google podr\u00eda hacer que su sitio est\u00e9 lento.<\/p>\n Hay algunos m\u00e9todos para combatir esto.<\/p>\n Primero, si no necesita que la gente interact\u00fae con el mapa en su sitio<\/em>, una forma sencilla para acelerar las cosas<\/a> sin herramientas externas es:<\/p>\n De esa forma, su sitio s\u00f3lo estar\u00e1 cargando una imagen regular \u2013 y no todos los scripts asociados con Google Maps.<\/p>\n Una alternativa en lugar de hacer esto manualmente, es utilizando el plugin gratuito de AWEOS Google Maps iframe load per click<\/a>. Este plugin autom\u00e1ticamente reemplaza el Google Maps integrado con una imagen de repuesto gen\u00e9rica. Luego, si un usuario da clic en el bot\u00f3n de Cargar mapa<\/strong>, este cargar\u00e1 el Google Maps integrado.<\/p>\n O tambi\u00e9n puede utilizar el API Est\u00e1tico de Google Maps, el cual muestra una imagen regular sin un JavaScript. Algunos plugins de Google Maps \u2013 incluyendo Google Maps Widget<\/a> y Gutenberg Block For Google Maps Embed<\/a> \u2013 le permiten usar API est\u00e1tico cuando cree sus mapas.<\/p>\n Sin embargo, nos damos cuenta que en algunas ocasiones este enfoque est\u00e1tico simplemente no es suficiente, y mucha gente prefiere integrar la experiencia interactiva de Google Maps.<\/p>\n En ese caso, otra gran forma para acelerar Google maps es utilizando lazy loading<\/strong>. Con lazy loading, su sitio esperar\u00e1 a cargar cualquier mapa de Google Maps integrado que tenga hasta que los visitantes lleguen a esa parte de la p\u00e1gina. Esto mantendr\u00e1 r\u00e1pida su carga inicial, y al mismo tiempo permite usar contenido interactivo de Google Maps.<\/p>\n Ya hemos escritor sobre como hacer lazy loading a im\u00e1genes<\/a> y videos y es lo mismo para Google Maps.<\/p>\n Hay algunos plugins que le permitir\u00e1n hacer esto. Por ejemplo, el plugin de a3 Lazy Load<\/a> le permite hacer lazy load a integraciones de iframe<\/a>, el cual incluye a Google Maps:<\/p>\n Otras opciones:<\/p>\n Si s\u00f3lo quiere integrar un simple mapa en su sitio, usted puede agregar Google Maps a WordPress sin tener que usa run plugin, utilizando la opci\u00f3n de c\u00f3digo de integraci\u00f3n. O, usted podr\u00eda utilizar la herramienta de My Maps de Google para crear su propio mapa personalizado e integrar eso.<\/p>\n M\u00e1s all\u00e1 de los m\u00e9todos manuales, tambi\u00e9n hay muchos plugins de Google Maps para WordPress que le pueden dar mucho control sin tener que salirse del dashboard de WordPress.<\/p>\n![\"Precio](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/01\/precio-del-api-de-google-maps.jpg\")
\n
![\"API](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/01\/api-integrado-de-google-maps.png\")
![\"Habilitar](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/01\/habilitar-el-api-de-google-maps.png\")
Paso 6<\/h3>\n
![\"API](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/01\/api-key-de-google-maps.png\")
Paso 7<\/h3>\n
![\"Restricci\u00f3n](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/01\/restriccion-api-google-maps.png\")
![\"C\u00f3mo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2019\/01\/wordpress-google-maps-1.png\")
![\"Abra](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/01\/opciones-de-integracion.png\")
![\"El](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/01\/codigo-de-integracion.png\")
YOUR_API_KEY¶meters allowfullscreen><\/pre>\n
<\/a>Paso 2: Agregar el C\u00f3digo de Integraci\u00f3n de Google Maps al Sitio de WordPress<\/h3>\n
![\"C\u00f3mo](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/01\/codigo-integrado-en-el-editor-de-bloque-de-wordpress.png\")
![\"C\u00f3mo](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/01\/codigo-integrado-en-su-editor-clasico-de-wordpress.png\")
Utilizar Google My Maps para Integrar Mapas M\u00e1s Complicados Sin un Plugin<\/h2>\n
![\"Ejemplo](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/01\/ejemplo-de-my-maps-de-google.png\")
Paso 1: Crear Su Mapa en My Maps de Google<\/h3>\n
![\"La](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/01\/interfaz-de-my-maps.png\")
Paso 2: Genere el C\u00f3digo de Integraci\u00f3n<\/h3>\n
![\"Opciones](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/01\/opciones-para-compartir.png\")
![\"Activando](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/01\/compartir-enlaces.png\")
![\"El](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/01\/acceso-para-el-codigo-de-integracion.png\")
![\"El](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/01\/codigo-de-integracion-my-maps.png\")
Paso 3: Agregue el C\u00f3digo de Integraci\u00f3n al Sitio de WordPress<\/h3>\n
<\/a>Utilice un Plugin de Google Maps de WordPress<\/h2>\n
\n
Widget de Google Maps<\/h3>\n
![\"Interfaz](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/01\/interfaz-del-widget-de-doogle-maps.png\")
Google Maps Easy<\/h3>\n
![\"Interfaz](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/01\/interfaz-google-maps-easy.png\")
Intergeo<\/h3>\n
![\"Interfaz](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/01\/interfaz-de-intergeo.png\")
Gutenberg Block For Google Maps Embed<\/h3>\n
\n
<\/a>Google Maps Podr\u00eda Hacer que Su Sitio de WordPress Quede Lento \u2013 No Permita Esto<\/h2>\n
\n
![\"Imagen](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/01\/imagen-de-repuesto-de-google-maps.png\")
![\"Lazy](\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2019\/01\/lazy-load-google-maps.png\")
\n
Resumen<\/h2>\n