Para criar um aplicativo que utiliza o Google Maps nativo usando HTML5, CSS e JavaScript, você pode seguir os passos básicos abaixo. Certifique-se de ter uma chave de API válida do Google Maps para autenticação. Se você ainda não tiver uma, pode obtê-la no Console de APIs do Google.
-
Obtenha uma chave da API do Google Maps:
- Acesse o Console de APIs do Google.
- Crie um novo projeto ou selecione um projeto existente.
- Ative a API do Google Maps JavaScript.
- Crie uma chave da API e configure as restrições, se necessário.
-
Crie a estrutura HTML básica:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Google Maps App</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div id="map"></div> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script> <script src="app.js"></script> </body> </html> -
Estilize o mapa com CSS (opcional):
body, html { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } -
Crie o script JavaScript (app.js):
function initMap() { // Coordenadas iniciais var myLatLng = { lat: -34.397, lng: 150.644 }; // Opções do mapa var mapOptions = { center: myLatLng, zoom: 8, }; // Crie o mapa var map = new google.maps.Map(document.getElementById("map"), mapOptions); // Adicione um marcador var marker = new google.maps.Marker({ position: myLatLng, map: map, title: "Hello World!", }); } -
Substitua
YOUR_API_KEYpela sua chave de API do Google Maps. -
Teste o aplicativo:
- Abra o arquivo HTML em um navegador.
Este é um exemplo básico para começar. Você pode personalizar o mapa adicionando marcadores, linhas, polígonos e interatividade conforme necessário para atender aos requisitos do seu aplicativo. Consulte a documentação do Google Maps JavaScript API para mais informações e funcionalidades avançadas.
FONTE : YOUTUBE
