C贸mo insertar Gratis el MAPA de GOOGLE en tu web

Antes de empezar a explicar como insertar Gratis el MAPA de GOOGLE en wordpress quiero explicar, para aquellos que no saben o son nuevos en estos temas, 驴Qu茅 es la API de Google Maps? En t茅rminos inform谩ticos, una API (Interfaz de Programaci贸n de Aplicaciones por sus siglas en ingl茅s) es un conjunto de normas que permiten a 2 sistemas diferentes entenderse o interactuar.

C贸mo insertar Gratis el MAPA de GOOGLE en tu web

En otras palabras, podr铆amos decir que es una especie de API es el 鈥淧uente鈥 que transforma los comandos de un programa a otro lenguaje o sistema y luego devuelve el resultado como respuesta.

Como muchos ya saben desde el 2017 Google est谩 obligando a usar una clave privada para usar los servicios de su API. Y despu茅s, en 2018, decidi贸 hacer la API de pago para cierto tipo de peticiones fuera de los mapas est谩ndar.

Por tal motivos, si tienes una web con el sistema de gesti贸n de contenidos de WordPress o si tienes plataformas constructoras como DIVI de Elegant Themes o Elementor es posible que hayas experimentado errores, como por ejemplo 鈥渘o se ha podido realizar con 茅xito la geocodificaci贸n por el siguiente motivo: over_query_limit鈥 o 鈥渘o se ha podido realizar con 茅xito la geocodificaci贸n por el siguiente motivo: request_denied鈥.

Es por esto que presentamos un m茅todo para evitar los inconvenientes anteriormente expuestos, en un mini tutorial que muestra como insertar un mapa sin la necesidad de la API Key de G.Maps.聽

V铆deo de c贸mo insertar Gratis el MAPA de GOOGLE o sin cuenta de Facturaci贸n

Qu茅 beneficios obtendremos con este recurso?

1.El nombre de tu empresa en el mapa de Google, insertado en tu web.

2.La calificaci贸n de nuestro negocio o comentarios de los seguidores de tu empresa.

3.El bot贸n de c贸mo llegar a tu negocio.

4.Y lo mejor de todo, no pagaremos por el mapa, que al fin y al cabo deber铆a ser como un derecho de la humanidad. 馃

En este mini tutorial utilizaremos los siguientes recursos:

1.Registro en Google con el correo de Gmail. (casi todo el mundo lo tiene, y es gratis 馃槉)

2.Utilizaremos el sistema de gesti贸n de contenidos CMS WordPress.

3.Utilizaremos la plataforma de Elegant Themes de Divi (opcional)

4.M贸dulo de c贸digo de WordPress o c贸digo divi

6.Iframe de Google maps.

7.C贸digo CSS para modificar el tama帽o del mapa.

Paso a paso para insertar el mapa de Google en un sitio web de manera gratuita:

1.En Google Maps buscamos la empresa o direcci贸n que deseamos insertar.

2.Damos clic en el bot贸n compartir.

3.vamos a la pesta帽a Insertar mapa

3.Copiamos el iframe del mapa de Google.

4.Damos clic en la pesta帽a de 鈥淚nsertar un mapa鈥 y copiamos el HTML.

5.Entramos a nuestro sistema de gesti贸n de contenidos CMS WordPress.

6.Abrimos la p谩gina donde queremos insertar el mapa de google.

4.insertamos un m贸dulo de c贸digo.

5.Digitamos el c贸digo para que el mapa sea responsive.

<div class=鈥漨ap-responsive鈥>

Aqu铆 se pega el iframe del mapa de google

</div>

6.Pegamos el iframe de google maps.

7.Por 煤ltimo Insertamos un poco de CSS para modificar el tama帽o del mapa.

.map-responsive {

 overflow:hidden;

 padding-bottom:40%;

 position:relative;

 height:0;

 }

 .map-responsive iframe {

 left:0;

 top:0;

 height:100%;

 width:100%;

 position:absolute;

 }

Espero haya sido de su agrado o sabe que alg煤n amigo necesita este articulo no dudes en compartirlo.

隆Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)
Comentarios recientes

    Deja un comentario

    Abrir chat