javascriptdenoobapro@gmail.com

Personaliza tu Google Maps

😀 En esta ocasión, con nuestro proyecto🚀🚀🚀 te enseñamos el funcionamiento del 𝗔𝗽𝗶 𝗱𝗲 𝗚𝗼𝗼𝗴𝗹𝗲 𝗠𝗮𝗽𝘀 en 𝗝𝗮𝘃𝗮𝘀𝗰𝗿𝗶𝗽𝘁

Te ayudamos a crear un 🗺️Google Maps personalizado. Para esta ocasión hemos elegido un listado de hoteles de Barcelona. Aparte de 𝗽𝗼𝘀𝗶𝗰𝗶𝗼𝗻𝗮𝗿𝗹𝗼𝘀 𝗲𝗻 𝗲𝗹 𝗺𝗮𝗽𝗮, te enseñamos a incluir un «𝗶𝗻𝗳𝗼𝘄𝗶𝗻𝗱𝗼𝘄»💬, con información ℹ️ℹ️ℹ️, ventana que justamente se abre al 𝗰𝗹𝗶𝗰𝗮𝗿 𝗲𝗻 𝗲𝗹 𝗶𝗰𝗼𝗻𝗼 𝗲𝗹𝗲𝗴𝗶𝗱𝗼.

Además te mostramos como cambiar el 𝗶𝗰𝗼𝗻𝗼 𝘁𝗿𝗮𝗱𝗶𝗰𝗶𝗼𝗻𝗮𝗹 📍 de Google por uno 𝗽𝗲𝗿𝘀𝗼𝗻𝗮𝗹𝗶𝘇𝗮𝗱𝗼🏨. Y para finalizar, eliminamos 💥💥💥del mapa toda la información que google incluye por defecto.

00:00 Inicio del Vídeo

00:05 Presentación del Proyecto

01:47 Api Javascript de Google Maps

08:00 Establecemos centro del Mapa

12:12 Crear y habilitar Api Key

13:30 Operador NEW ¿qué es?

14:54 Creamos el contenedor de la lista

26:29 Añadimos los marcadores y cambiamos los iconos

34:02 Creamos los «infowindows» y hacemos que se abran al hacer clic en los iconos

41:03 Añadimos todos los nombres al listado y hacemos que al clicar en ellos se abran los infowindows

49:56 Hacemos que el zoom del mapa se adapte a las localizaciones

53:33 Personalizamos el mapa de fondo en Google Api y Conseguimos un ID

58:13 Añadimos a cada infowindow su información y las estilizamos haciendo el fondo transparente y añadiendo iconos.

 

Descarga el códigode nuestros 3 proyectos de APIS en Javascript en nuestra tienda👉