AngularJS - Application de Cartes
Bonjour à tous, aspirants développeurs web ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde d'AngularJS et de Google Maps. D'ici la fin de ce tutoriel, vous serez capable de créer votre propre application de carte interactive. Ce n'est pas génial ? C'est parti !
Introduction à AngularJS et Google Maps
Avant de commencer à coder, comprendre ce qu'est AngularJS et Google Maps.
AngularJS est un puissant framework JavaScript qui nous aide à construire des applications web dynamiques. C'est comme un super-héros sidekick pour votre HTML, lui donnant des superpuissances pour créer des pages web interactives et réactives.
Google Maps, quant à lui, est un service de cartographie web qui fournit des informations détaillées sur les régions géographiques et les sites du monde entier. C'est comme avoir le monde entier à vos doigts !
En combinant ces deux technologies, nous pouvons créer des applications basées sur des cartes incroyables. Excitant, non ?
Configuration deNotre Projet
Étape 1 : Inclure AngularJS et l'API Google Maps
Premièrement, nous devons inclure les bibliothèques nécessaires dans notre fichier HTML. Voici comment nous faisons :
<!DOCTYPE html>
<html ng-app="mapApp">
<head>
<title>Mon Application de Carte AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>
<body>
<!-- Notre application ira ici -->
<script src="app.js"></script>
</body>
</html>Dans ce code, nous incluons AngularJS et l'API Google Maps. Remplacez 'YOUR_API_KEY' par votre clé API Google Maps réelle. Ne vous inquiétez pas si vous n'en avez pas encore une ; nous couvrirons comment l'obtenir plus tard.
Étape 2 : Créer Notre Application AngularJS
Maintenant, créons notre application AngularJS. Dans un nouveau fichier appelé app.js, ajoutez le code suivant :
var app = angular.module('mapApp', []);
app.controller('MapController', function($scope) {
// Nous ajouterons notre logique de carte ici
});Ce code crée un module AngularJS nommé 'mapApp' et un contrôleur nommé 'MapController'. Pensez au module comme un conteneur pour notre application, et au contrôleur comme le cerveau qui gérera notre carte.
Construction de Notre Carte
Étape 3 : Initialiser la Carte
Ajoutons du code à notre contrôleur pour initialiser notre carte :
app.controller('MapController', function($scope) {
$scope.initMap = function() {
var mapOptions = {
center: new google.maps.LatLng(40.7128, -74.0060),
zoom: 12
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
});Cette fonction crée une nouvelle Google Map centrée sur New York City (vous pouvez changer les coordonnées pour n'importe quel emplacement que vous aimez). Le niveau de zoom détermine à quel point la carte est zoomée.
Étape 4 : Ajouter la Carte à Notre HTML
Maintenant, ajoutons une div à notre HTML où la carte sera affichée :
<body ng-controller="MapController">
<div id="map" style="height: 400px; width: 100%;" ng-init="initMap()"></div>
<script src="app.js"></script>
</body>La directive ng-controller indique à AngularJS d'utiliser notre MapController pour cette partie de la page. La directive ng-init appelle notre fonction initMap lorsque la page se charge.
Ajout de Marqueurs
Étape 5 : Créer une Fonction pour Ajouter des Marqueurs
Améliorons notre contrôleur pour ajouter des marqueurs à notre carte :
app.controller('MapController', function($scope) {
var map;
$scope.initMap = function() {
var mapOptions = {
center: new google.maps.LatLng(40.7128, -74.0060),
zoom: 12
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
$scope.addMarker = function(lat, lng, title) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
title: title
});
}
});Cette nouvelle fonction addMarker crée un marqueur à la latitude et longitude spécifiées, avec un titre donné.
Étape 6 : Utiliser la Fonction de Marqueur
Maintenant, utilisons notre nouvelle fonction pour ajouter des marqueurs :
<body ng-controller="MapController">
<div id="map" style="height: 400px; width: 100%;" ng-init="initMap()"></div>
<button ng-click="addMarker(40.7484, -73.9857, 'Empire State Building')">Ajouter l'Empire State Building</button>
<button ng-click="addMarker(40.7484, -73.9857, 'Statue de la Liberté')">Ajouter la Statue de la Liberté</button>
<script src="app.js"></script>
</body>Ces boutons ajouteront des marqueurs pour l'Empire State Building et la Statue de la Liberté lorsque vous cliquez dessus.
Gestion des Entrées Utilisateur
Étape 7 : Créer un Formulaire d'Entrée
Permettons aux utilisateurs d'ajouter leurs propres marqueurs :
<form ng-submit="addCustomMarker()">
<input type="text" ng-model="newMarker.title" placeholder="Titre">
<input type="number" ng-model="newMarker.lat" placeholder="Latitude">
<input type="number" ng-model="newMarker.lng" placeholder="Longitude">
<button type="submit">Ajouter un Marqueur</button>
</form>Étape 8 : Gérer la Soumission du Formulaire
Ajoutez cette fonction à votre contrôleur :
$scope.newMarker = {};
$scope.addCustomMarker = function() {
if($scope.newMarker.title && $scope.newMarker.lat && $scope.newMarker.lng) {
$scope.addMarker($scope.newMarker.lat, $scope.newMarker.lng, $scope.newMarker.title);
$scope.newMarker = {};
}
}Cette fonction vérifie si tous les champs sont remplis, ajoute le marqueur, puis efface le formulaire.
Conclusion
Félicitations ! Vous venez de construire votre première application de cartes AngularJS. Vous pouvez maintenant afficher une carte, ajouter des marqueurs prédéfinis, et même permettre aux utilisateurs d'ajouter leurs propres marqueurs. C'est apenas le début - il y a tellement plus à faire avec AngularJS et Google Maps.
Souvenez-vous, la clé pour devenir un grand programmeur est la pratique. Essayez d'ajouter plus de fonctionnalités à votre application de carte. Que diriez-vous de montrer des informations lorsque vous cliquez sur un marqueur ? Ou d'ajouter différents types de marqueurs ? Les possibilités sont infinies !
Bonne programmation, futurs mages de la technologie !
| Méthode | Description |
|---|---|
initMap() |
Initialise la Google Map |
addMarker(lat, lng, title) |
Ajoute un marqueur à la carte à la latitude et longitude spécifiées |
addCustomMarker() |
Gère l'entrée utilisateur pour ajouter un marqueur personnalisé |
Credits: Image by storyset