Mostrando marcadores en el Mapa de Google

Curso de Angular 4

Contenido del curso

Inicio del curso

1
Angular 4: configuración a despliegue profesional
02:13 min

Introducción a Angular 4

Setup del Ambiente de Trabajo

Conceptos Básicos

Directivas

Angular UI

Ruteo

Servicios

Conexión Remota (Http y Sockets)

Pipes

Animaciones en Angular

Testing en Angular

Autenticación y Protección de Rutas

RxJS

Publicando nuestro proyecto

72
Publicando en Firebase Hosting
07:39 min

Fin del curso

Sesiones en vivo

Contenido Bonus

80
Actualización de angular, versión 6.0
04:25 min

Tomar examen

Mostrando marcadores en el Mapa de Google

Todos los cursos GRATIS

Se acaba en:

00díasd:00hrsh:00minm:00segs

Comentarios15

Usuario anónimo

User

Hace 8 años

Hola comunidad; Les comparto un Tutorial para personalizar los marcadores del Mapa de GOOGLE, espero que sea de Utilidad:
Tutorial para personalizar marcadores y color de texto en el mapa de Google

Daniel Altamar

Estudiante

Hace 8 años

Muchas gracias!!!

Jecsham Castillo

Estudiante

Hace 8 años

Excelente aporte

Carlos Uriel de Jesus Sánchez González

Estudiante

Hace 8 años

estuvo fácil el crear marcadores

Noelia Iglesias Martínez

Estudiante

Hace 7 años

No sé que pasa que no todos me actualizan la dirección, los que tenia incluidos antes de hacer la versión de editar no me aparece marcador y si actualizo la dirección tampoco ocurre nada en el mapa, si se refleja Firebase pero no sale en el mapa

Abraham Lopez

Estudiante

Hace 9 años

Por si alguien se le presenta este detalle ,en la parte de marcadores , lng,no me funciono ,asi que utilice lang

Eduardo Alejandro Yrady Brazon

Estudiante

Hace 9 años

Creo que se debe a que lo guardaste así en Firebase.

Juan Andres Cordero Arias

Estudiante

Hace 9 años

Si quieren que les muestre la ubicacion actual
pueden implentar este codigo de github:

y en la clase lugares.component.ts dentro del constructor colocan este codigo
this.geolocationService.getLocation()
.subscribe((data)=>{
this.lat = +data.latitude;
this.lng = +data.longitude;
});

Alejandro Salazar

Estudiante

Hace 9 años

brutal, lo puse a funcionar, y para añadir la dirección a la caja de texto direccion lo hize con geocoding reversre.

this.peopleService.getGeocodeInverse(this.people.lat, this.people.lng).subscribe((result) => {
this.people.direction = result.json().results[0].formatted_address;
});
//function
public getGeocodeInverse(lat, lng) {
console.log(lat);
return this.http.get(‘’ + lat + ‘,’ + lng + ‘&key=XXX’);
}

Jose Adan Ardila Sanchez

Estudiante

Hace 8 años

Hola, a alguno de ustedes le a pasado el error de cors origin?
me apareció cuando agregué el *ngFor pero no se la causa, antes no me había aparecido.

Jesus Torres

Estudiante

Hace 9 años

como podría agregar un marcador con la posición del usuario y ademas cambiarle el color rojo a otro color por ejemplo verde.?

Usuario anónimo

User

Hace 8 años

Buen reto! lo consultaré e informaré en cuanto lo tenga con la solución. Saludos.

Usuario anónimo

User

Hace 8 años

¡Reto cumplido!, te invito a leer mi Tutorial donde indico los pasos a seguir, si alguien tiene una manera distinta de realizarlo agradecería comentarlo en el Tutorial para tener todo el seguimiento del tema:
Tutorial para agregar características al Mapa

Saludos.

Alfonso Adame Rueda

Estudiante

Hace 8 años

muy completo este curso, me gusto mucho,
muchas gracias platzi.

Usuario anónimo

User

Hace 7 años

Muy buena técnica adquirida sobre marcadores de una forma sencilla.

Juan Carlos Barcinilla Alarcon

Estudiante

Hace 7 años

Excelente, muy buena.

Maycol Romero

Estudiante

Hace 8 años

Tengan en cuenta que cuando modifiquemos la direccion del lugar, tenemos que actualizar tambien lat y lng para que tambien se actualizen los marcadores en el mapa

public modificarLugar( lugar: any ) {
    this.obtenerGeoData(`${lugar.calle},${lugar.ciudad},${lugar.pais}`)
      .subscribe( data => {
        lugar.lng = data.json().results[0].geometry.location.lng;
        lugar.lat = data.json().results[0].geometry.location.lat;
      });
    this.afdb.database.ref(`lugares/${lugar.id}`).update(lugar);
  }

Raul Castillo

Estudiante

Hace 8 años

Hola compañeros, tengo problemas con el mapa, se muestra la leyenda de "For Development purposes only"
y por lo tanto mi asignación de latitud y longitud no funciona.
this.lugar.lat = result.results[0].geometry

this.lugar.lat = result.results[0].geometry.location.lat;
 this.lugar.lng = result.results[0].geometry.location.lng;

Ademas que la url

me indica el siguiente mensaje :

{
   "error_message" : "You have exceeded your daily request quota for this API. We recommend registering for a key at the Google Developers Console: https://console.developers.google.com/apis/credentials?project=_",
   "results" : [],
   "status" : "OVER_QUERY_LIMIT"
}

Ayuda!!!

Diego Forero

Team Platzi

Hace 8 años

Tienes que registrarte y obtener un apikey para poder seguir usando el servicio.

Raul Castillo

Estudiante

Hace 8 años

Lo hice pero sigo viendo esas marcas de agua

Gualberto Cuiza Villca

Estudiante

Hace 8 años

Holas, una pregunta. Cómo puedo hacer para que cuando de click a un marcador envie en evento por ejemplo para mostrar detalles de ese marcalor?. Ayuda por fa

VICTOR JUAREZ PALAFOX

Estudiante

Hace 8 años

Es agregarle el info window. por ejemplo para mostrar el nombre:

	<agm-marker *ngFor="let lugar of lugares" [latitude]="lugar.lat" [longitude]="lugar.lng">
              <agm-info-window>
                <strong>{{lugar.nombre}}</strong>
              </agm-info-window>
            </agm-marker>

Enzo Aliatis

Estudiante

Hace 9 años

Lo mismo pero con Angular 5
Con Angular 5 2018

David Leonardo Agudelo Villa

Estudiante

Hace 8 años

Hola buen día, alguien sabe como generar un API key de forma gratuita para utilizar la librería de Maps en el proyecto de angular? Intenté generarlo en la plataforma pero me exige medio de pago. Muchas gracias

Diego Forero

Team Platzi

Hace 8 años

Ya tienes que registrar una tarjeta para poder obtener un api key, pero todos los meses dan un crédito de 200 dolares más que suficiente para cualquier proyecto que esta iniciando.

public modificarLugar( lugar: any ) {
    this.obtenerGeoData(`${lugar.calle},${lugar.ciudad},${lugar.pais}`)
      .subscribe( data => {
        lugar.lng = data.json().results[0].geometry.location.lng;
        lugar.lat = data.json().results[0].geometry.location.lat;
      });
    this.afdb.database.ref(`lugares/${lugar.id}`).update(lugar);
  }

{
   "error_message" : "You have exceeded your daily request quota for this API. We recommend registering for a key at the Google Developers Console: https://console.developers.google.com/apis/credentials?project=_",
   "results" : [],
   "status" : "OVER_QUERY_LIMIT"
}

	<agm-marker *ngFor="let lugar of lugares" [latitude]="lugar.lat" [longitude]="lugar.lng">
              <agm-info-window>
                <strong>{{lugar.nombre}}</strong>
              </agm-info-window>
            </agm-marker>

Mostrando marcadores en el Mapa de Google

Inicio del curso

Angular 4: configuración a despliegue profesional

Introducción a Angular 4

Versionamiento en Angular

Qué es Angular 4 y el salto de versiones

Typescript: qué es

Cómo monetizar una app directorio comercial

Setup del Ambiente de Trabajo

Herramientas de trabajo y Angular CLI

Generación y estructura de Angular 4

RETO: Haz un cambio simple en el proyecto.

Conceptos Básicos

Para qué nos sirven los Módulos y Componentes

Tipos de Data Binding y String Interpolation

Property Binding

Event Binding

ngModel y two way binding en Angular

Directivas en Angular 4 y ngFor

Cómo usar ngIf en Angular 4.0

Instalando librerías con NPM (Google Maps)

Directivas

ngStyle y ngClass en Angular: estilos condicionales

Directiva ngSwitch

Cómo crear directivas de atributo en Angular

Host Listeners

HostBinding en Angular: controla estilos desde directivas

Angular UI

Angular Material y Bootstrap

Configurando e implementando Bootstrap en nuestro proyecto

Ruteo

Qué hace el router en Angular 4

Implementación de Rutas en el Proyecto

Href vs router link: navegación angular

Resaltando el link activo con CSS para indicar visualmente en que componente nos encontramos

Parámetros de ruta con routerLink en Angular

Parámetros tipo Query

Creando una vista de detalle para el proyecto

Página de contacto Angular desde cero

Servicios

Servicios en Angular para compartir datos

Creando nuestro propio servicio

Configurando Firebase en nuestro proyecto

Guardando Records en Firebase

Obteniendo records desde Firebase

Obteniendo coordenadas usando Geocoding

Reto: Crear una vista para editar records

Mostrando marcadores en el Mapa de Google

Conexión Remota (Http y Sockets)

Funcionamiento de los llamados Http y Sockets

Qué es una arquitectura cliente - servidor

Enviando llamados tipo POST

Enviando llamados tipo GET

Formateando respuestas del servidor con el operador map()

Manejando errores HTTP

Pipes

Utilidad de los Pipes en Angular 4

Usando los pipes por defecto de Angular

Parámetros en pipes

Creando nuestro propio pipe

Animaciones en Angular

Configurando animaciones en nuestro proyecto

Transiciones

Callbacks

Solución al Reto: Añadiendo animaciones a nuestra aplicación

Testing en Angular

Introducción a unit tests

Configuración de testing por default

Corriendo los tests

Creando unit tests para componentes

Integración de Unit Test con Servicios

Autenticación y Protección de Rutas

Cómo funcionan los JSON Web Tokens

Preparación de vistas para login y registro

Registrando usuarios

Loggeando usuarios

Guardias canActivate en Angular: Proteger rutas con autenticación

Cómo integrar Facebook login con Firebase

Logout en Angular con Firebase

RxJS