{"id":23420,"date":"2022-04-07T10:10:04","date_gmt":"2022-04-07T15:10:04","guid":{"rendered":"https:\/\/niixer.com\/?p=23420"},"modified":"2022-04-07T10:19:14","modified_gmt":"2022-04-07T15:19:14","slug":"como-integrar-google-maps-a-wordpress","status":"publish","type":"post","link":"https:\/\/niixer.com\/index.php\/2022\/04\/07\/como-integrar-google-maps-a-wordpress\/","title":{"rendered":"Como integrar Google Maps a WordPress"},"content":{"rendered":"\n

\u00bfQu\u00e9 es Google Maps?<\/strong><\/h3>\n\n\n\n

Es una herramienta de b\u00fasqueda y geolocalizaci\u00f3n, permite encontrar puntos y lugares espec\u00edficos en el mundo. Adem\u00e1s, durante los a\u00f1os ha evolucionado para ofrecernos nuevas funcionalidades integradas en su sistema, por ejemplo Google Street View<\/a>, que permite la visualizaci\u00f3n de edificios, calles y en general, cualquier ubicaci\u00f3n que haya sido fotografiada por el veh\u00edculo de Google designado para la tarea. Google Maps<\/a> permite tambi\u00e9n calcular rutas, es posible asignar una ubicaci\u00f3n de destino y una origen, Google har\u00e1 su mejor esfuerzo para mostrarnos varias opciones de navegaci\u00f3n hasta el lugar de destino, nos permite modificar nuestro medio de transporte, e incluso, la hora a la que pretendemos realizar el viaje.<\/p>\n\n\n\n

Figura 1.<\/strong><\/p>\n\n\n\n

Imagen ilustrativa Google Maps<\/em><\/p>\n\n\n\n

\"\"
Tomado de El Mundo. Google Maps trae cambios y mejoras a Espa\u00f1a: esto es lo que necesitas saber<\/em> [Imagen] por El Mundo<\/figcaption><\/figure><\/div>\n\n\n\n

Es por esto que Google Maps es una gran herramienta que valdr\u00eda la pena tener integrada en nuestra p\u00e1gina web, principalmente para darle a nuestros usuarios la posibilidad de visualizar el punto f\u00edsico de nuestro negocio y como llegar a \u00e9l. WordPress<\/a> es uno de los CMS m\u00e1s utilizados para dise\u00f1ar y administrar p\u00e1ginas web, permite hacer integraciones muy sencillas y \u00e1giles con diversas herramientas, es por eso que hoy veremos c\u00f3mo integrar Google Maps en WordPress<\/a>.<\/p>\n\n\n\n

Figura 2.<\/strong><\/p>\n\n\n\n

Imagen ilustrativa <\/em>del uso de Google Maps como localizador de tiendas en WordPress<\/p>\n\n\n\n

\"\"\/
Tomado de Joaquin. C\u00f3mo a\u00f1adir el localizador de tiendas de Google Maps en WordPress <\/em>[Imagen].Aprende WP<\/figcaption><\/figure><\/div>\n\n\n\n

Integraci\u00f3n usando plugin<\/strong><\/h3>\n\n\n\n

La primera es la m\u00e1s famosa, involucra la utilizaci\u00f3n de un plugin<\/a>, existen varias opciones tales como WD Google Maps, Google Maps Widget, pero la recomendaci\u00f3n que haremos es para el plugin llamado WP Google Maps<\/a>. Primero accedemos al apartado de plugins <\/strong>desde WordPress, luego a\u00f1adir nuevo<\/strong>, buscamos el plugin WP Google Maps en la barra y hacemos clic en instalar<\/strong>. Una vez activado, aparecer\u00e1 una nueva opci\u00f3n en el escritorio de WordPress llamada Mapas <\/strong>(2021, Mayo 13). <\/strong>Cuando intentemos acceder a la opci\u00f3n Mapas <\/strong>esta nos va a solicitar una llave API<\/a> (API Key), b\u00e1sicamente y para no extendernos mucho, una API Key es una llave que permite utilizar la interfaz de programaci\u00f3n de alguna aplicaci\u00f3n (en este caso Google Maps) para implementar alguna funcionalidad af\u00edn al aplicativo (en este caso el mapa embebido en nuestra web). <\/p>\n\n\n\n

En la misma pantalla asociada a Mapas <\/strong>podemos crear una API Key de forma autom\u00e1tica, aceptamos los t\u00e9rminos y condiciones de Google y generamos nuestra llave, luego simplemente volvemos a la pantalla de Mapas <\/strong>y la pegamos en el campo que lo requiere, recuerde que la API Key est\u00e1 asociada a la cuenta de WordPress y por lo tanto deber\u00eda manejarse con privacidad.<\/p>\n\n\n\n

Ahora ya es puedes empezar a utilizar el mapa en el sitio web, simplemente hace falta asignarle un nombre y ajustar algunas propiedades como el tama\u00f1o, la alineaci\u00f3n y lo m\u00e1s importante, tu ubicaci\u00f3n por GPS. Finalmente, solo hace falta insertarlo en el cuerpo de la p\u00e1gina, esto se consigue a partir de copiar el c\u00f3digo abreviado (Shortcode) y pegarlo en el lugar deseado.<\/p>\n\n\n\n

Figura 3.<\/strong><\/p>\n\n\n\n

Visualizaci\u00f3n de mapa embebido<\/em><\/p>\n\n\n\n

\"\"
Tomado de Stack Overflow. How to embed a Google Map iFrame with a custom name <\/em>[Imagen]. Stack Overflow<\/figcaption><\/figure><\/div>\n\n\n\n

Integraci\u00f3n usando Embed Google Map<\/strong><\/h3>\n\n\n\n

Existe una forma manual de integrar un mapa de Google Maps a partir de Embed Google Map<\/a>. Esta herramienta permite generar c\u00f3digos de inserci\u00f3n (similar al Shortcode del plugin anterior) de modo que podemos acceder a ella, buscar una direcci\u00f3n, ajustar los par\u00e1metros de tama\u00f1o, alineaci\u00f3n, etc. y finalmente generar un c\u00f3digo HTML para copiarlo e insertarlo en el cuerpo de nuestra p\u00e1gina, WordPress interpreta el c\u00f3digo HTML y genera el mapa embebido. El inconveniente de este m\u00e9todo es que requiere de la generaci\u00f3n diferentes c\u00f3digos de inserci\u00f3n si se desea cambiar la ubicaci\u00f3n o los par\u00e1metros visuales del embebido del mapa  (2021, Mayo 13)..<\/p>\n\n\n\n

Figura 4.<\/strong><\/p>\n\n\n\n

Visualizaci\u00f3n de la interfaz de Embed Google Map<\/em><\/p>\n\n\n\n

\"\"
Tomado de Embed Google Map. Embed Google Map (No API Needed) <\/em>[Imagen]. Embed Google Map.<\/figcaption><\/figure><\/div>\n\n\n\n

Integraci\u00f3n usando plantillas de WordPress<\/strong><\/h3>\n\n\n\n

Algunas de las plantillas de WordPress<\/a> permiten insertar mapas embebidos en el cuerpo de la p\u00e1gina, normalmente, despu\u00e9s de seleccionar el tema y escoger un layout para alguna secci\u00f3n en particular del cuerpo de la web, aparecen varias opciones de inserci\u00f3n, por ejemplo, usando la plantilla Divi, podremos elegir la opci\u00f3n de Map<\/strong>, este nos pedir\u00e1 nuevamente el API Key de Google Maps, y finalmente podemos personalizar el t\u00edtulo y dem\u00e1s opciones est\u00e9ticas del mapa embebido, adem\u00e1s de la ubicaci\u00f3n y los detalles.<\/p>\n\n\n\n

A continuaci\u00f3n veremos c\u00f3mo generar un c\u00f3digo de inserci\u00f3n similar a Embed Google Maps pero directamente desde Google Maps, esto, buscando una direcci\u00f3n puntual en el navegador y comparti\u00e9ndola a en forma de c\u00f3digo HTML.<\/p>\n\n\n\n

\n