Transcripciones
1. API de Google Maps: Bienvenido de nuevo al canal creativo de habilidades
Millennial Hoy te vamos a
estar enseñando a
integrar la API de Google Maps en tu sitio web. mí me une un buen
amigo mío Jacob quien anteriormente nos enseñó a
codificar un sitio web desde cero. Es ingeniero de software, y hoy
va a estar tomando la clase. Voy a pasarme a él. Hola, chicos. Yo soy Jacob. Soy ingeniero de
software egresado. Y hoy, te voy a estar
platicando a través de cómo agregar la integración de
Google Maps a tu sitio web. Esto es útil si
estás en exhibición en la ubicación o algo
en tu sitio web, y también si estás
usando algún proyecto que implique agregar integración de
mapas, y puedes hacer algunas funciones
interesantes con Google Maps y hacer que
tu proyecto sea más emocionante. Así que vamos a
usar scripts HTML, CSS y Java para agregar esta
integración de mapas a tu proyecto. Pondré un ejemplo
en la pantalla ahora cómo será el
proyecto final. Vamos a empezar
mostrando una ubicación en el mapa, y luego vamos a
agregar marcadores y luego agregar múltiples marcadores y
también averiguar cómo personalizar el mapa
y también agregar
codificación go para que puedas mostrar ubicaciones
específicas en el mapa. Esta es una herramienta extremadamente útil para codificadores, dueños de negocios y cualquiera que quiera agregar una función interactiva a su proyecto. Vamos a
saltar en él.
2. Google Maps Maps - la configuración: Bienvenidos a la clase
uno. En esta clase, vamos a estar hablando qué software
necesitamos para poder
empezar a usar la
integración de Google Maps en el proyecto. Entonces, debido a que estamos usando la API JavaScript de
Google
Maps, que te permite personalizar mapas con tu propio contenido e imágenes para mostrarlos en
páginas web y dispositivos móviles, vamos a
usar Visual Studios, el IDE para
poder codificar los archivos HTML, CSS y JavaScript. Entonces, lo que he hecho aquí es
crear tres archivos simples, un archivo HML de punto índice,
un archivo JavaScript de punto de mapa Y un archivo CSS de estilo. Ahora, para
explicar brevemente estos archivos, el archivo índice será donde va
nuestro código HML para mostrar el
diseño de la página web El
archivo JavaScript del mapa será donde nuestro código JavaScript
irá para poder lidiar con carga
real de
los mapas de Google. El estilo CSS contendrá el código para mostrar
cómo se ve el sitio web. Entonces por ahora esta clase
es intermedia, lo que significa que estoy
asumiendo que tienes una comprensión básica de los archivos HML CSS y JavaScript
y lo que significan Pero si no estás seguro, quiero una comprensión
más profunda, tengo otro video
en este canal explicando cómo construir
un sitio web desde cero Entonces, para comenzar
con el archivo HML, he incluido un documento HML
básico que contiene un enlace a nuestro archivo CSS y
también nuestro archivo JavaScript
que contiene el código para el He creado un encabezado simple
para darle un poco de
diseño al sitio web y también incluí un
div que contiene el mapa, que se estilizará más adelante Desde el CSS, tenemos estilo
básico solo para darle un poco de estilo
al sitio web. Así que tenemos el
cuerpo que tendrá el color de fondo, el ancho, y el encabezado que
tiene alguna ligera coloración y algunos márgenes, y también un ligero
borde también. Y en la parte inferior,
tenemos el estilo del mapa, que muestra el
ancho del mapa y el borde para el mapa para que la plantilla
de Google Maps establezca una plantilla para el ancho y alto de
Google Maps. Y también tenemos un archivo o script que vamos a ir agregando
algún código en más adelante para crear la funcionalidad
del mapa y permitir personalización y cualquier cambio la funcionalidad del mapa. Así que ahora tenemos una configuración de
funcionalidad básica. Ya estamos listos para
comenzar a agregar integración de
Google Maps
en el sitio web. Entonces, en la siguiente clase,
veremos cómo
agregar realmente en la integración de Google
Maps al proyecto para que
podamos comenzar a agregar los mapas y comenzar
a ver el mapa. Para ello,
usaremos la
API de Google Maps y mostraremos cómo registrarse en la API
y también instalaremos la clave y el
código irrelevante en el proyecto Entonces, en esta clase,
veremos cómo
comenzar con el
proyecto y definir
el código base que necesitábamos
antes de poder comenzar a agregar en la
integración de Google Maps al proyecto.
3. Guía de consola de Google Maps API (KEY): Bienvenidos a la clase
dos. En esta clase, vamos a estar
viendo los pasos que
debemos seguir para registrarnos
en
Google Cloud Platform con el fin de obtener la ApiKey para que podamos
agregarla a nuestro proyecto El primer paso es hacer
una cuenta de Google e iniciar sesión en Google Cloud Platform
y luego ir a la consola. También necesitas
habilitar las pujas en
tu cuenta para
poder usar Google Maps No voy a
mostrarte cómo hacer este paso, pero es muy sencillo de hacer y no lleva mucho tiempo en absoluto. El siguiente paso es crear un proyecto en la Consola de
Google Clouds, que Google utilizará
para que puedas agregar tus credenciales y
claves API al proyecto. Para ello, selecciona
tu proyecto y haz clic en Nuevo Proyecto Nombra tu
Proyecto y presiona Crear. Una vez hecho esto, abre la configuración y ve a
API y Servicios. Haga clic en Dashboard y
habilite API y Servicios. Las dos API que vamos
a utilizar para este proyecto mapas API JavaScript para la funcionalidad central
del mapa, y también coloca API para agregar
en una ubicación jo más adelante. Esto se utilizará para
convertir una ubicación en coordenadas de
latitud y longitud para que el marcador
se pueda trazar en el mapa Así que haz clic en Maps JavaScript
API y actívala. Ya he hecho este
paso, pero deberías ver un botón de habilitar API aquí. Lo mismo ocurre con la API de Places. Una vez que hayas habilitado las API, podrás crear
credenciales y obtener una clave de acceso para
que los mapas de Google puedan ser utilizados dentro de tu proyecto. Haga clic, cree
credenciales, clave API, que generará
automáticamente una clave API para que sea utilizada, que luego se puede
copiar y pegar en su proyecto para que los mapas se
puedan implementar
dentro de su proyecto Te recomendaría
restringir la clave para que solo puedas acceder
tú y las personas a las que
quieres acceder a ella para
asegurarte de que nadie esté usando tu clave de acceso sin saberlo
y aumentando Debido a que estamos
construyendo un sitio web, necesitamos habilitar HTTP. Entonces podemos habilitar las
restricciones del sitio web que
queremos usar. Y luego habilitar la URL
del sitio web en el que
queremos usar el Google Maps. Por supuesto, no es
necesario restringir la clave, pero la
recomiendo encarecidamente. Una vez hecho esto, puedes copiar tu clave API, que luego se puede
insertar en el proyecto. Una vez que los mapas de Google
se configuran en línea, entonces
puedes
agregar el código a tu proyecto para
comenzar con los mapas. Entonces en tu archivo HML, solo agrega un script corto, que contiene tu clave
al final de la URL, y también una función de devolución de llamada, que define qué función en el archivo Javascript se
utilizará para configurar primero el Para hablar brevemente un poco sobre lo que significan estos símbolos. El origen es desde donde se carga el
mapa y contendrá la clave API
y la función de devolución de llamada, que se utilizará para
llamar a la primera función para el mapa cuando se cargue
el proyecto La A consigue que el navegador se
descargue al mismo tiempo y ejecute el script
al mismo tiempo que está
cargando el HML Cuando se
carga el script, llamará a la función especificada desde
la función de devolución Así que gracias por
ver esta clase. En esta clase, analizamos
cómo registrarnos en la plataforma
Google Cow, habilitar las API relevantes
y obtener nuestra clave de acceso, y obtener nuestra clave de
API de acceso al tiempo que la
restringimos para garantizar
que solo se use para
los fines correctos En la siguiente clase,
veremos para definir la función que primero
se llama
cuando se carga el archivo HTML, que se usa para
mostrar el mapa.
4. ¡Cómo mostrar Google Maps y encontrar las locaciones!: Bienvenidos a la Clase
tres. En esta clase, veremos
el código relevante necesario para agregar al
archivo Driscriptfile, que podamos mostrar nuestra primera
ubicación en Entonces como ya
hablamos anteriormente, tenemos un script aquí vinculado
al archivo JS map dot. Nuestra función de devolución de llamada le dice
al archivo HML a qué función se
debe
acceder primero cuando la página se carga en el archivo JS de punto de
mapa Lo hemos llamado Init Map. En el archivo S, hemos definido la función
llamada Init Map Obtenemos el ID
del mapa del archivo HML y configuramos el centro
del mapa para que se muestre Google Maps hace esto usando coordenadas de
longitud y
latitud para trazar la ubicación en el mapa. Hemos establecido el
centro del mapa para que sea la ubicación de Big Ben. También podemos definir qué tan acercado
queremos que esté el mapa. Ocho está a punto de la mitad. Cuanto
más alto tengas tu Zoom, más zoom
estará, cuanto menos lo tengas, más alejada será
el mapa Al abrir el archivo HML
usando Google Chrome, ahora
podemos ver lo que
hemos codificado Los mapas de Google se muestran
claramente en la pantalla con Big Ben
siendo el centro del mapa. Hasta el momento, no hemos
agregado marcadores en, pero esto será parte
de la siguiente clase. Voy a
aumentar el Zoom para dar una mejor imagen de
lo que está mostrando el mapa. Ahora que ya lo he hecho
, se puede ver que en medio del mapa está
el Big Ben. El mapa es interactivo y
puedes arrastrarlo, alejar la vista una vista satelital. Y también arrastra un marcador a la ubicación actual
y desplázate. Los beneficios de dra script es que el mapa es interactivo, por lo que podemos interactuar con este mapa, desplazarnos y también personalizar las
características de diseño del mapa. Vamos a
mirar a personalizar los marcadores del mapa más adelante Así que gracias por
ver esta clase. Hemos analizado el código
relevante necesario para ingresar a nuestro archivo de
script dra para poder mostrar
claramente la ubicación
en el mapa y también cómo acercar y alejar el
mapa e interactuar con él. En la siguiente clase,
veremos cómo agregar marcadores al mapa
para poder trazar
claramente las coordenadas de la ubicación en el mapa.
5. ¡Agrega marcadores de locaciones a tu mapa!: Bienvenidos a la clase
cuatro. En esta clase, vamos a estar viendo
cómo
agregar realmente un marcador al mapa para que
las coordenadas específicas de la ubicación se puedan
ver en el mapa. Entonces, para agregar el marcador
al proyecto, solo
necesitamos editar
el archivo JS de mapas, para que el índice en HML y el estilo en CSS
puedan permanecer iguales He hecho algunos pequeños
cambios en el código. He usado una variable para almacenar los códigos de ubicación del punto que queremos trazar en el mapa. Luego puse el centro
del mapa a estas coordenadas de
ubicación. Aquí se
resalta lo importante. Queremos crear un
marcador para el mapa. Google Map API tiene una función
incorporada para hacer esto. Simplemente establecemos la
posición del mapa a las coordenadas de ubicación
que queremos trazar, y luego definimos el mapa en el que
quieres trazar la coordenada. En nuestro caso, solo lo estamos
llamando mapa porque eso es lo que hemos
definido que sea el mapa. Una vez hecho esto,
puedes ver la ubicación del Big Ben que se va a trazar en el mapa usando
este marcador rojo aquí Por supuesto, no
tiene que ser el Big Ben. Simplemente puede editar
cualquiera de las
coordenadas de ubicación para trazar la
ubicación específica que desee. Gracias por
ver esta clase. Hemos aprendido qué
código se necesita agregar a nuestro archivo script Java para trazar el marcador de la ubicación que queremos
mostrar en el mapa. En la siguiente clase,
veremos personalización
básica de
los mapas y cómo podemos cambiar el marcador del mapa para que sea
una imagen de lo que queramos.
6. ¡Cómo añadir múltiples marcadores al mapa! (¡KEY): Bienvenidos de nuevo a la clase
seis. En esta clase, vamos a estar
viendo cómo agregar múltiples marcadores
al mapa para que puedas ver diferentes propiedades
al mismo tiempo. Nuevamente, solo
vamos a estar editando los mapas do archivo JavaScript, que se construirá en gran parte del mismo código que la última clase. En nuestra matriz de asignaciones, he agregado más coordenadas para que podamos trazar diferentes
marcadores en el mapa En este caso, tengo al Big Ben, el London y el Palacio Buchanan
en una matriz de asignación, así que podremos
tener tres marcadores en el mapa. Pero
esto es ilimitado. Puedes tener tantos
marcadores como quieras. Acabo de agregar las coordenadas de latitud
y longitud de cada uno de estos hitos
en la matriz de posiciones. También configuré el tipo en info, por lo que mostrará
un marcador de información. Pero de nuevo, esto se puede
configurar en lo que quieras. Para cambiar esto,
solo tienes que establecer la matriz de iconos y
agregar un nuevo icono. Para poder dibujar
múltiples marcadores, necesitamos tener un
bucle de cuatro para recorrer la matriz de ubicaciones y agregar
cada ubicación al mapa. Como puede ver, he
agregado en un bucle de cuatro que bucles para la
longitud de las ubicaciones. Entonces, en nuestro caso,
tenemos tres ubicaciones, por lo que girará tres veces y dibujará tres
marcadores en el mapa. Trazaré la posición
de la primera ubicación antes de dar vueltas a la segunda ubicación y
luego a la tercera Y para cada una de
estas gotas de marcador, podemos tener la misma animación
y también el mismo logotipo, y todas estas se
dibujarán en el mismo mapa. Entonces como pueden ver,
cuando cargue la página, podemos ver los tres marcadores en el mapa en tres ubicaciones
diferentes. Entonces como puedes ver en el mapa, tenemos tres ubicaciones, que son tres puntos
que trazamos Así que el bucle cuatro
ha girado tres veces para siempre la ubicación en nuestra matriz de ubicaciones y trazó estos puntos usando la longitud
y latitud en el mapa Como puedes ver, cuando
refresquemos la página, Los logotipos rebotarán arriba y abajo usando la animación
que también codificamos. Gracias por
ver esta clase. Hemos aprendido a
agregar múltiples marcadores mapa y también la posibilidad de agregar más
marcadores y cambiar los íconos. En la siguiente clase,
veremos cómo geocodificar una ubicación
para que no
tengamos que saber
la
latitud y longitud de cada
punto que trazamos En cambio, podemos simplemente
tener la ubicación, que luego debería ser convertida
por la API de Google Map en longitud y latitud para
nosotros para que no tengamos
que preocuparnos por eso.
7. ¡Cómo personalizar tu mapa! (Size, animación, logotipo y más): Bienvenidos de nuevo a este costo, vamos a estar viendo
ligeras personalizaciones
que podamos hacer en el mapa, y vamos
a ver cómo podemos cambiar el ícono de Marcador y también agregar algunas animaciones geniales
al proyecto Nuevamente, solo estamos editando
el archivo JS de puntos de mapas. He hecho algunas ligeras
variaciones al código aquí. Siendo el primero, hemos establecido la base de iconos para obtener la imagen
del mapa de la biblioteca de ejemplos de
JavaScript de Google, y luego configuramos el icono para que sea la imagen de mapas Info
dentro de la biblioteca. He usado esto como ejemplo, pero no tienes que
usar esta biblioteca. Puedes usar cualquier imagen que quieras, literalmente cualquier imagen que quieras, siempre y cuando
definas
qué icono quieres usar. Entonces como ejemplo,
tienen iconos aquí, el marcador punto PNG, si quisiera establecer ese marcador para que sea el marcador de
los Google Maps. Todo lo que tenemos que hacer es
eliminar esto y simplemente establecer el título para que sea Mark PNG. Es posible que tengas que editar
el ancho y alto de este marcador si la
imagen va a ser demasiado grande. Pero por ahora, estoy usando como ejemplo la
biblioteca JavaScript de
Google. En esta sección, he creado
una matriz llamada ubicaciones, que contendrá todas
las ubicaciones que
quiero trazar en el mapa. Ahora, solo quiero trazar el
Big Ben en el mapa. Entonces he establecido la posición
de los mapas de Google y la longitud y latitudes
a la ubicación del Big Ben También he configurado el tipo de
marcador para que sea Info, que hará referencia de nuevo
a esta base de iconos aquí. Luego creé los marcadores, que en gran parte es
el mismo que antes. Sin embargo, he incluido
la posición de la matriz de ubicaciones
para ser Big Ben. Y también el array de iconos
para ser el icono info, que nos dará
un marcador info. También he agregado una animación genial
aquí para mostrar el
marcador cayendo en aquí para mostrar el
marcador cayendo los mapas de Google para
dar un efecto genial y hacer que el mapa sea un
poco más atractivo. Como puedes ver, el
icono del mapa es ahora una forma de ojo. Como me dijeron antes, este no tiene que
ser un logotipo de info. Este puede ser cualquier marcador que quieras. Lo que es genial es porque he
añadido en la animación. Cuando actualice la página, verás el marcador rebotando, lo que da un efecto
visual genial De esta clase,
hemos aprendido a personalizar el
logotipo del marcador y también agregar la
animación genial para darle un bonito efecto visual
al marcador a medida que
cae en el mapa. En la siguiente clase,
veremos cómo agregar múltiples
marcadores al mapa que podamos mostrar
múltiples ubicaciones al mismo tiempo en el mapa.
8. ¡Locaciones de mapas de GeoCoding (¡Útiles!): Así que bienvenidos a nuestra
clase final clase siete. En esta clase, vamos
a estar viendo cómo tomar una ubicación
y convertirla usando Geocode API en coordenadas de
longitud y
latitud para que éstas puedan luego
ser trazadas en la Esto nos permite trazar
puntos en el mapa, aplicaciones donde
desconocemos las coordenadas de los mismos. Esto es realmente útil
cuando se quiere trazar ubicación en el mapa y
no se conocen las coordenadas. En lugar de
intentar calcular una longitud y latitud, puede usar la API Geocode para convertir la ubicación
en coordenadas, que luego se pueden
trazar en el Dentro del archivo Map St JS, he usado en gran medida
los mismos códigos de solo trazar un
marcador singular en el mapa He establecido una ubicación aquí
para código postal no sea que dos ND. Pero puedes establecer esta ubicación en cualquier cosa
que quieras. La API de Geocode
resolverá mejor esta ubicación, convertirá, para que
se pueda trazar en el La API de Geocode es otra
API separada de la API de mapa. Pero como se discutió en la clase dos, ya
hemos habilitado
esto en la consola de Google, por lo que no
debería haber ningún problema aquí. Entonces, una vez que hemos establecido
la variable de ubicación, necesitamos establecer la variable de
geocodificación
usando el Geocódigo de Google Maps Entonces llamamos a una función aquí, que establece la dirección
a la ubicación, que llama a esta función aquí, que resuelve la dirección del mapa. Pongo una declaración if
aquí para que si la API de Geocode no pueda localizar la dirección de carga
no aplaste el sitio web En cambio,
solo registrará el error. Si tiene éxito, la
latitud se calculará para la ubicación y se almacenará en la variable y de igual manera
para la longitud. Estas variables se
usarán entonces como
coordenadas de ubicación para ser utilizadas para
el centro del mapa. Luego dibujé un marcador
cuya posición se establece en la longitud y
latitud de las coordenadas. Esto luego se puede
trazar en la gráfica. Si bien es posible que solo estemos usando
un ejemplo simple aquí, esto tiene el potencial de
usarse para muchas funciones, como tomar una entrada
del usuario para una dirección
que quiere gcate, convertirla y luego
trazarla en el mapa Usando una técnica similar
a nuestra última clase, también
podemos usar un bucle aquí para poder dibujar múltiples
marcadores en el mapa. La ubicación no
tiene que ser un código postal. Puede ser un nombre de calle, una ciudad o un nombre de calle y una ciudad y un código postal para dar
una dirección específica. Esta es la misma tecnología que se usa cuando buscas destino en Google
Maps, y deja caer un pin. Como pueden ver, cuando
refresco la página, traza el código postal
que se definen en una ubicación y dibuja un marcador en el mapa
para este código postal. Así que gracias por
ver Clase siete. En esta clase final,
hemos
aprendido a tomar cualquier ubicación y estar en para trazar en la
gráfica sin conocer las coordenadas de
latitud y longitud. Esto se puede usar para
cualquier ubicación y se puede expandir para tomar
ubicaciones de una base de datos, desde la entrada del usuario e incluso dibujar múltiples marcadores
al mismo tiempo.
9. ¡El proyecto de clase!: Bienvenido al proyecto de clase. Para esto, quiero que
uses lo que has aprendido en la clase de hoy para
obtener el mapa en
tu sitio web y
personalizarlo agregando múltiples marcadores exactamente como lo que hemos hecho
en la clase de hoy. Todo el código de la clase de hoy
ha sido puesto en GitHub. Entonces, si te quedas atascado, echa un
vistazo
al código y siéntete libre de
dejar cualquier pregunta a continuación. Entonces, al final de
este proyecto de clase, usted para que anuncie el mapa en su sitio web y luego
agregue múltiples marcadores para mostrar diferentes ubicaciones a todas las diferentes personas
que visitan su sitio web. Así que dale esa opción y
si te quedas atascado, no
olvides usar un git hub o hacer una pregunta abajo.
10. Recap&Conclusion gracias: Gracias a todos por
ver esta clase. Espero que hayas aprendido mucho,
y espero que puedas
usar estas herramientas para beneficiar a tu propio sitio web. Entonces, para concluir,
hoy
te he enseñado a integrar los mapas de
Google en tu sitio web usando
HML CSS y JavaScript. Te mostré cómo mostrar
ubicaciones usando marcadores, cómo personalizar los mapas y cómo usar Google Geocoder
para mostrar las
ubicaciones de los clientes en el Así que por favor da el
proyecto de clase para ir y echa mi otra clase en
el canal donde te
mostré cómo hacer
un sitio web desde cero, usando CSS y HTML. Y
gracias por ver.
Millennial Creatives ✅, Learn Skills from the Future
