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