Normalmente, al integrar Google Maps, se trabaja con la API de JavaScript de Maps , que requiere una clave de API y puede generar costos que no deben subestimarse con números de acceso más altos. Existen grandes alternativas como mapbox u OpenStreetMap , pero aún no alcanzan la variedad de funcionalidades que ofrece Google. El propio Google también ofrece una forma sin una clave API a través de la función de compartir, que podemos usar para nuestros propósitos.
Esta ruta se puede utilizar mediante programación para generar cualquier dirección (incluso sin conocer la latitud y la longitud). Además, el mapa (a diferencia de la contraparte de JS) contiene un enlace al planificador de rutas. El mapa también se puede arreglar con la ayuda de filtros CSS (aunque el resultado no se acerca mucho a los estilos nativos que son posibles con la API de JS).
Durante muchos años, la forma de hacerlo fue a través del parámetro output = embed , que Google no admite oficialmente y, por lo tanto, los errores de visualización han aumentado en el pasado reciente.:
331190767bb32b2468632e609223c53e
Si utiliza la función de compartir oficial a través de maps.google.de , obtendrá el siguiente código, por ejemplo:
331190767bb32b2468632e609223c53e
Si estructuramos la URL larga en el parámetro src , se obtiene un patrón:
331190767bb32b2468632e609223c53e
Reconocemos los siguientes tipos de datos:
- m: matriz
- s: cadena
- f: flotar
- d: Doble
- yo: entero
- e: enumeración
Después de algunos intentos de prueba y error, podemos eliminar algunos valores y empaquetar los valores más importantes en variables, por ejemplo, para definir dinámicamente la dirección.:
331190767bb32b2468632e609223c53e
Finalmente, podemos agregar un aspecto más bonito al mapa, por ejemplo con la ayuda del siguiente código CSS:
331190767bb32b2468632e609223c53e
Al final, obtenemos un mapa dinámico gratuito que funciona de manera confiable: