En este capítulo vamos a ver cómo agregar mapas a nuestro proyecto.
Nuestro proyecto final incluye un mapa con Google Maps.
El problema es que recientemente Google Maps decidió cobrar por el mapa y ellos dicen que si tienes
mil visitas al día no tienes que pagar pero más que eso hay que pagar si tu sitio web es pequeño pues
tal vez mil visitas al día sean suficientes.
El problema es que para poderlo utilizar también tienes que agregar una tarjeta de crédito entonces
como también estamos aprendiendo desarrollo web como no hace mucha idea o mucho sentido estar agregando
tarjetas de crédito por todos lados entonces vamos a buscar una opción gratuita y la mejor es día Lit
Only app left como una hoja y éste tiene la característica de que utiliza otro servicio que se llama
OpenStreetMap.
Es muy bueno incluso aquí abajo podemos ver que viene los que lo utilizan incluso Facebook lo utiliza
y muchas otras páginas equipos ver todos los clientes que ellos tienen.
Es un servicio gratuito puedes ver que es una librería JavaScript que es Open Source y también es móvil
friendly es decir tiene la interactividad para utilizarlo en un teléfono y el mapa se ve un poco distinto
pero también se ve bastante bien entonces es muy fácil de utilizar solamente damos clic aquí en Download
y te vienen las distintas versiones.
Entiendo que a la hora de que entres aquí tal vez estos números sean distintos pero de aquí puedes descargarlo
otra opción es utilizar la versión que ellos ya tienen hospedada del CSS del script cualquiera de las
dos es correcta.
Si utilizas esta versión pues hay que descomprimir eléctrica aquí lo voy a descomprimir.
Por ejemplo si abrimos la filet vas a encontrar los archivos js y CSS solamente los mueves al proyecto
pero es mejor utilizar las versiones hospedadas ya que de esta forma cuando alguien entra al sitio web
va a descargar la hoja de estilos de conellos de su servidor y de nosotros entonces vamos a copiar este
copio y en el índex HTML y entiendo que la estructura es distinta al proyecto puedes ignorar los archivos
del lado izquierdo lo que nos importa es el HTML.
Este video se está grabando después que los anteriores videos porque esta actualización de Google Maps
que acaba de pasar aquí después de color Box agregamos el enlace al día fleteo y también tenemos que
copiar el script.
Entonces copiamos el script y nos vamos hacia abajo y más o menos en la parte antesdel Main J.V y también
seguir archivos distintos aquí ignoramos de momento no es importante lo que nos importa es nada más
que sea linda HTML.
Agreguemos el CSS agreguemos el JS antesdel Main y con eso es suficiente.
No te preocupes si la estructura es distinta si hay librerías que no se habían agregado este video es
una actualización.
Recuerda entonces una vez cargadas ambas ambas librerías podemos volver un poco hacia arriba donde dice
el Overview te viene como un código.
Este código que es el que ellos tienen como un ejemplo muy sencillo vamos a copiarlo y Copy y vamos
a abrir lo que viene siendo el main J.V y después del Folsom y Streeck.
Aquí vamos a ponerle mejor aquí dentro del DOM content ponerlo ahí adentro y puedes ver qué dice Map
y este MAP que está aquí puedes ver qué dice creamos un MAP en el MAP Dip tiene que ser un dibujo un
sección etcétera pero este va a buscar por un map.
Entonces nosotros lo habíamos creado anteriormente y aquí lo voy a dar una búsqueda por mapa mapa y
nosotros habíamos creado una idea llamado Mapa entonces nada más cambiamos por mapa aquí y guardamos
cambios recargamos el proyecto y puedes ver que aparece un mapa ahora quién sabe qué ciudad sea está
vamos a ver un poco de sumás y afuera todavía no sé qué ciudad sea más más más grande.
Esto parece que es un mapa en Inglaterra usualmente vas a querer colocar el mapa donde tú desees pero
ya se está viendo el mapa y veremos en el siguiente video cómo agregar el mapa cómo decirle en qué lugar
debe demostrarse este pequeño pin.
Sí que lo haremos en el próximo video.