Publicado el Deja un comentario

Implementación alternativa a Google Maps

Hace un tiempo atrás hice una implementación con Google Maps para la búsqueda de una dirección y despliegue de la dirección encontrada en un mapa, la verdad funcionaba como los dioses hasta antes de la limitante de Google a su api MAPS, la cual dejó una cuota de 1 render de mapa por día de forma gratuita y si se desea que la api continúe funcionando sólo hay que registrar la tarjeta de crédito y pagar, rogando que el número de usos del mapa sean los mínimos posibles y que el sitio no vaya a ser blanco de ataques que llamen constantemente la aplicación (DDoS).

La buena noticia es que existen alternativas que permiten la implementación del servicio de forma simple y lo mejor de todo gratuitas, hice uso del servicio de mapas https://leafletjs.com y otro servicio https://nominatim.org el cual traduce una dirección de texto a coordenadas, la implementación que realicé es bien sencilla y puede tener fallas pero es más que nada para tener una idea del como realizar la solución usando estos servicios, espero que les ayude

See the Pen API de direcciones by Cesar Gonzalez (@donpandix) on CodePen.

Publicado el Deja un comentario

Ejemplo plugin google maps

Google Maps, ejemplo en Codepen.io

Esta es una implementación sencilla para ejemplificar el uso de la librería JavaScript de GoogleMaps, el objetivo es la de comprender el uso del plugin y manejar la información regtornada.

Para ejecutar la aplicación, se debe escribir alguna dirección en la barra de texto superior e inmediatamente, después de dejar de tipear por un segundo, gatilla la ejecución de la llamada a GoogleMaps, para obtener la información solicitada.
Una cosa importante, que se debe tener una cuenta, en Google Developers https://console.developers.google.com, para crear un proyecto y habilitar la API de GoogleMaps. Mas detalles pueden ser encontrados en https://developers.google.com/maps/web/

See the Pen Google Maps retorno de búsqueda by Cesar Gonzalez (@donpandix) on CodePen.

 

 

Actualización

Para adjunto los fuentes del desarrollo para un análisis mas claro de la implementación, la URL directa a GIST está en https://gist.github.com/donpandix/ y acá los fuentes: