Google Maps y su integración automática en WordPress

Google Maps es uno de los servicios más utilizados en la web, razón por la cual una gran cantidad de personas suelen intentar integrar al mismo dentro de su blog de WordPress, sea este personal, institucional o empresarial. Lastimosamente la posibilidad de poder integrar a este servicio online puede llegar a provocar determinadas incompatibilidades con el diseño  de la plantilla, siendo esta la principal razón por la cual muchos desisten de tener que utilizar a Google Maps dentro del diseño de su blog.

El servicio de Google Maps ahora mismo ha sido optimizado, situación que favorecería a todos quienes son desarrolladores web y más aún, ha quienes dispongan de un servicio online para promocionar sus distintos servicios; por este motivo, gracias a las bondades con las que ha sido propuesto Google Maps, hoy mismo muchos desarrolladores podrían llegar a integrar a este interesante servicio dentro de su blog de WordPress, Instagram, Facebook o cualquier otro servicio que se desee promocionar con gran amplitud; considerando que Google Maps es uno de los servicios más utilizados del momento, la integración del mismo hacia nuestro blog de WordPress puede ser una gran ayuda para que todo aquel tráfico que se esté generando en nuestro sitio, se quede un poco más (y también vuelva) para poder encontrar alguna dirección específica.

Una de las características más importantes que se puede mencionar de Google Maps en estos precisos momentos, se encuentra en el redimensionamiento que se puede llegar a realizar con el servicio; si el mismo lo colocamos en el Sidebar, Google Maps se adaptará perfectamente sin ningún tipo de distorsión. Pero esa no es la única utilidad que podríamos llegar a destacar de las nuevas bondades de este servicio, sino que más bien, si publicamos o integramos a Google Maps en cualquier entorno de nuestro blog de WordPress y el mismo, adopta diferentes dimensiones (según el dispositivo móvil en donde se disfrute a nuestro blog), entonces la visibilidad del mismo se puede llegar a disfrutar se tanto en teléfonos móviles, un tablet o un ordenador personal.

En el presente artículo mencionaremos la forma más idónea de poder integrar a este servicio de Google Maps dentro del nuestro blog de WordPress, utilizando como ejemplo básico, a un widgets muy sencillo que no sobrecargara el trabajo de nuestra página. Los únicos elementos que necesitaremos para lograr estos son los siguientes:

• Tener un blog de WordPress e ingresar al mismo como administradores.
• El Widget «Text» para poder integrar allí el servicio de Google Maps.
• El código facilitado por Google Maps.
• El uso de pequeñas instrucciones CSS.

Aunque parezca increíble, con estas únicas opciones de podríamos llegar a integrar al servicio de Google Maps en cualquier rincón o entorno de nuestro blog de WordPress, aunque para motivos de ejemplo, al mismo lo integraremos dentro de nuestro SideBar con lo que lo mismo, la barra lateral derecha que siempre esta presente en todo diseño de blog en WordPress.

Obtener el código nativo de Google Maps

Lo primero que tenemos que hacer, es conseguir al código nativo que nos ofrece Google Maps para poder compartir su tecnología en nuestro blog de WordPress; para ello, solamente necesitamos:

• Abrir nuestro navegador de Internet.
• Dirigirnos hacia el sitio oficial de Google Maps (el enlace lo dejamos en la parte final del artículo).

• Buscar la opción de «compartir…» para obtener el código de Google Maps.

De todos estos pasos que hemos mencionado, quizá el 2º sea el más importante (y el más difícil) de realizar; para poder obtener este código de Google Maps, sólo debemos prestar atención en la pequeña rueda de engranaje que se encuentra en la parte inferior derecha, misma que al hacerle clic nos ofrecerá unas cuantas opciones y entre las que deberemos elegir a la que dice «Compartir e Insertar Mapa».

Complementar al Código de Google Maps con Instrucciones CSS

Al Código Obtenido con Google Maps lo podríamos llegar a copiar en un documento simple de texto, ello mientras vamos reparando otros cuantos aspectos para integrar completamente a este servicio a nuestro blog de WordPress; la edición la realizaremos en nuestro bloc de notas, debiendo insertar unas cuantas instrucciones CSS antes del código obtenido anteriormente. Todo ello quedaría aproximadamente de la siguiente manera:

Resumiendo un poco lo que hemos hecho en este procedimiento, diríamos que el código proporcionado por Google Maps y que lo obtuvimos en una primera instancia, al ser integrado en nuestro blog de WordPress se mostrará con un tamaño considerablemente grande (aproximadamente unos 450 px), no guardando coherencia con el tamaño que quizá tengamos en el SideBar de nuestro blog de WordPress. Es por ese motivo que hemos colocado a unas cuantas instrucciones CSS antes de dicho código, elementos que tienen el objetivo de hacer que el recuadro de Google Maps, se reduzca o amplíe según sea el dispositivo en donde este se muestre. Dicho de otra manera, en teléfonos móviles se podrá adoptar a un pequeño recuadro de Google Maps con un tamaño muy diferente a lo que se podría haber un tablet o en un ordenador personal.

Integrar al Google Maps modificado en nuestro blog de WordPress

Esta es la parte más interesante de todo, ya que nos hemos propuesto colocar a este servicio de Google Maps como una pequeña caja en el Sidebar de nuestro blog de WordPress; para lograr conseguir esto, sólo necesitamos seguir los siguientes pasos:

• Abrimos nuestro navegador de Internet.
• Ingresamos al blog de WordPress con nuestras respectivas credenciales y como administradores.
• Nos dirigimos hacia Apariencia y posteriormente, a widgets.
• Buscamos, elegimos y arrastramos al widget «Text» hacia el espacio del Sidebar.
• En la parte del título escribimos algún texto que identifique a Google Maps con nuestro blog.
• En la parte inferior escribimos todo el código modificado de Google Maps.
• Hacemos clic en Save.
• Elegimos una vista de nuestro blog con la integración de Google Maps.

Esta última parte del artículo es una de las más importantes y quizá, la más interesante de todo. Con estos sencillos pasos, podemos admirar que Google Maps se encuentra presente en nuestro Sidebar, adaptándose perfectamente al tamaño del mismo.

A pesar de haber utilizado a esta área específica en nuestro blog de WordPress, el lector puede llegar a ocupar cualquier otro espacio que desee, debiendo tener la plena confianza de que Google Maps se ampliará o reducirá perfectamente, según sea el área elegida.

Web: Google Maps Preview

Código: Codigo modificado Google Maps