Nessa aula iremos implementar o Google Maps em nossa aplicação Angular para que seja possível listar todos os alunos recuperados através de uma requisição GET. Além disso, aprenderemos também a utilizar alguns eventos como Drag (Arrastar) e Click (Clicar no mapa e no Marker) para poder cadastrar um novo aluno e editar suas informações.
- Node 14.17.5 (LTS);
- Seu editor de código de preferência (No meu caso, Visual Studio Code);
- Familiaridade com HTML, CSS e JavaScript;
- Vontade de aprender :D
- npm install @angular/google-maps
- ng generate component features/students/student-map
Caso você esteja desenvolvendo sua própria aplicação para estudo, após a instalação do google-maps npm install --save @angular/google-maps, é necessário adicionar a importação do script do GoogleMaps API dentro da tag <head></head> no arquivo index.html.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
OBS: Onde esta YOUR_API_KEY, substitua pela sua chave de acesso.
Não sabe como criar sua chave de acesso? Clique no seguinte link: criando uma API key
- Clone o repositório para a sua máquina
- Abra um terminal na pasta principal da aplicação
- Instale todas as dependências da aplicação utilizando o seguinte comando:
npm install - Antes de inicializar nossa aplicação, é necessário subir nossa fake API (Back-end server):
npm run server - Para rodar a aplicação, execute o comando:
npm start - Abra o seu browser na seguinte URL: http://localhost:4200
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent