Scribd
Cargar
205 vistas10 páginas

Google Maps y AngularJS: Guía Rápida

El documento explica cómo integrar Google Maps en una aplicación Angular. Primero se debe generar una API key de Google Maps registrándose como desarrollador. Luego se selecciona la plataforma (web) y se crea un proyecto para obtener la clave. Con la clave API se habilitan los servicios de Google Maps para JavaScript y se pueden agregar marcadores a mapas usando Angular.

Cargado por

Diego Vasco
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
205 vistas10 páginas

Google Maps y AngularJS: Guía Rápida

El documento explica cómo integrar Google Maps en una aplicación Angular. Primero se debe generar una API key de Google Maps registrándose como desarrollador. Luego se selecciona la plataforma (web) y se crea un proyecto para obtener la clave. Con la clave API se habilitan los servicios de Google Maps para JavaScript y se pueden agregar marcadores a mapas usando Angular.

Cargado por

Diego Vasco
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd

API DE GOOGLE MAPS EN ANGULAR JS

Para integrar Google Maps en tu aplicación es necesario registrarse en la cuenta de Google


para desarrolladores y generar el API KEY de la aplicación ya sea para entornos web,
android o ios, esto permitirá trabajar con Google Maps. Para hacer este proceso, se debe
ingresar a la consola de desarrolladores de google

Una vez nos encontramos en la plataforma de google, es necesario que selecciones la


tecnología con la cual se integrará Google Maps, para este caso lo trabajaremos para las
versiones web

Al seleccionar la plataforma nos aparecerá una serie de textos los cuales nos explican sobre
Google Maps en este paso vamos a dar click en la parte superior de la ventana sobre costado
derecho en el botón “Obtener una clave”. En la ventana que se nos abre, nos dirigimos a
seleccionar la opción “Crear proyecto” y continuar.
Continuamos digitando el nombre de nuestra aplicación para reconocer la clave generada
por Google Maps. Podemos llamarla con el nombre “MapasNativo”

Apenas se tenga lista la información, se puede pulsar el botón de “Crear” para que
google genere el id del producto.

Copiar esta clave API ya que con esta realizaremos la integración con Google Maps.
Se debe posteriormente ingresar a API y Servicios y dar clic en habilitar servicios

Luego escogemos Googlemaps para JavaScript

Damos clic en el botón habilitar y obtenemos la llave


Ejemplo 1. Cargar un mapa de google con AngularJS que permita agregar un marcador
para referenciarlo.

Se debe inicialmente definir una estructura de proyectos como se muestra a continuación

El archivo googleMaps.html se encarga de vincular el apikey con el mapa y desplegar la


interfaz para agregar marcadores, debe tener una estructura como se muestra a continuación

El archivo maps.css contiene los estilos asociados al mapa


El archivo maps.js se encarga de recibir los datos de latitud, longitud y título de la vista para asociarlos a
una función que pueda pintar el marcador
El mapa se vería de la siguiente forma

Ejemplo 2
Crear una aplicación con angular JS y GoogleMaps que permita por medio de un JSON pintar marcadores
de las diferentes sedes de la UNIAJC.

La aplicación se debe apreciar de la siguiente forma


Angular CLI con el uso de Google Maps

Inicialmente, se debe instalar la dependencia en el proyecto creadp con el gestor angular CLI

npm install @agm/core --save

En el archivo app.module. ts se definen las importaciones necesarias para cargar un mapa de Google.

El archivo app.component.ts requiere las propiedades de latitud y longitud para desplegar en el mapa
las coordenadas
El archivo app.component.html toma como referencia las propiedades de latitud y longitud

Se debe finalmente definir un estilo para agm-map en el archivo App.component.css

Finalmente, se puede apreciar el mapa con su marcador

También podría gustarte