Instalando librerías con NPM (Google Maps)

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

73
Conclusión ¿Qué aprendimos en el curso?
01:20 min
74
Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario
01:25 min

Sesiones en vivo

Contenido Bonus

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

Cursos Empresas Blog Live Conf Eventos Precios

0:006:48

Instalando librerías con NPM (Google Maps)

Curso de Angular 4

Clase 16 de 80

Clase 16 / 80

Por acá dejo mi código. Yo use la herramienta mapbox. Se instala la herramienta con npm install mapbox-gl Luego se agregan los estilos en el index.html

<link href='https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.css' rel='stylesheet' />

app.component.ts

import { Component, OnInit } from '@angular/core';
import { environment } from 'src/environments/environment';
import * as mapboxgl from "mapbox-gl";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})

export class AppComponent implements OnInit {

  title: string = 'Angular';
  name: string = '';
  lastName: string = '';
  notReady: boolean = true;
  map: mapboxgl.Map;
  coordinates: any;
  places: any = [
    { active: true, name: "Florería la Gardenia" },
    { active: true, name: "Donas Vida Dulce" },
    { active: true, name: "Veterinaria Huellitas" },
    { active: true, name: "Sushi Roll" },
    { active: true, name: "Hotel la Gracia" },
    { active: true, name: "Zapatería Clavo" },
    { active: false, name: "Florería la Gardenia" },
    { active: false, name: "Donas Vida Dulce" },
    { active: false, name: "Veterinaria Huellitas" },
    { active: false, name: "Sushi Roll" },
    { active: false, name: "Hotel la Gracia" },
    { active: false, name: "Zapatería Clavo" }
  ];

  ngOnInit():void {
    mapboxgl.accessToken = environment.mapboxKey;
    this.map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [-74.0700526, 4.6489681],
      zoom: 10
    });
    this.createMarker(-74.0700526, 4.6489681)
  }

  createMarker(lng: number, lat: number): void {
    const marker = new mapboxgl.Marker({
      draggable: true
    })
    .setLngLat([lng, lat])
    .addTo(this.map)

    marker.on('drag', () => {
      this.coordinates = marker.getLngLat()
    })
  }

  check():void {
    if (this.name === '' || this.lastName === '') {
      this.notReady = true;
    } else {
      this.notReady = false;
    }
  }

  hello():void {
    alert(`Welcome to this App ${this.name} ${this.lastName}`);
  }

}

app.component.html


<div id="textcenter">
  <h3>{{ title }} app is running!</h3>
  Tu nombre es {{ name }} {{ lastName }} <br />
  <input
    type="text"
    placeholder="Nombre"
    (keyup)="check()"
    [(ngModel)]="name"
  />
  <input
    type="text"
    placeholder="Apellido"
    (keyup)="check()"
    [(ngModel)]="lastName"
  /><br />
  <button [disabled]="notReady" (click)="hello()">Hi</button>
</div>
<br />
<div class="inline" id="map"></div>
<div class="textcenter inline" id="list">
  <ul>
    <ng-container *ngFor="let place of places">
      <li *ngIf="place.active">{{ place.name }}</li>
    </ng-container>
  </ul>
  {{coordinates}}
</div>

app.component.sass


#map
  margin-left: 100px
  width: 650px
  height: 450px
  background-color: #006060

#list
  margin-left: 10px
  vertical-align: top

#textcenter
  text-align: center

.inline
  display: inline-block