Using Google Maps API with AngularJS

Integrating Google Maps API with AngularJS allows developers to add interactive maps, geolocation features, and markers dynamically in web applications.

---

1. Setting Up Google Maps API in AngularJS

Step 1: Get a Google Maps API Key

1. Go to the Google Cloud Console.
2. Create a new project.
3. Navigate to APIs & Services > Credentials.
4. Click Create Credentials > API Key.
5. Enable Google Maps JavaScript API under APIs & Services.
6. Copy the generated API Key.

---

Step 2: Include Google Maps API in index.html

Add the Google Maps script with your API key:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js"></script>

---

Step 3: Create an AngularJS App

var app = angular.module("mapApp", []);

---

2. Displaying a Simple Map in AngularJS

Step 1: Create a Controller to Initialize the Map

app.controller("MapController", function($scope) {
    $scope.initMap = function() {
        var mapOptions = {
            center: new google.maps.LatLng(37.7749, -122.4194), // San Francisco
            zoom: 10
        };

        var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    };
});

---

Step 2: Add HTML to Display the Map

<div ng-app="mapApp" ng-controller="MapController" ng-init="initMap()">
    <div id="map" style="width: 100%; height: 500px;"></div>
</div>

The map will now load with San Francisco as the center!

---

3. Adding Markers to the Map

Step 1: Modify the Controller to Add Markers

app.controller("MapController", function($scope) {
    $scope.initMap = function() {
        var mapOptions = {
            center: new google.maps.LatLng(37.7749, -122.4194),
            zoom: 10
        };

        var map = new google.maps.Map(document.getElementById("map"), mapOptions);

        // Adding a marker
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(37.7749, -122.4194),
            map: map,
            title: "San Francisco"
        });

        // Info Window
        var infoWindow = new google.maps.InfoWindow({
            content: "<h4>San Francisco</h4><p>This is San Francisco!</p>"
        });

        // Show info window on click
        marker.addListener("click", function() {
            infoWindow.open(map, marker);
        });
    };
});

Now, clicking on the marker will display an info window. 🏙️

---

4. Adding Multiple Markers Dynamically

Step 1: Modify the Controller

app.controller("MapController", function($scope) {
    $scope.initMap = function() {
        var locations = [
            { name: "San Francisco", lat: 37.7749, lng: -122.4194 },
            { name: "Los Angeles", lat: 34.0522, lng: -118.2437 },
            { name: "Las Vegas", lat: 36.1699, lng: -115.1398 }
        ];

        var map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(36.7783, -119.4179), // California Center
            zoom: 6
        });

        locations.forEach(function(location) {
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(location.lat, location.lng),
                map: map,
                title: location.name
            });

            var infoWindow = new google.maps.InfoWindow({
                content: "<h4>" + location.name + "</h4>"
            });

            marker.addListener("click", function() {
                infoWindow.open(map, marker);
            });
        });
    };
});

This will display multiple markers for different cities. 📍

---

5. Geolocation: Show User’s Current Location

Modify Controller to Get User’s Location

app.controller("MapController", function($scope) {
    $scope.initMap = function() {
        var map = new google.maps.Map(document.getElementById("map"), {
            center: { lat: 0, lng: 0 },
            zoom: 2
        });

        // Get user location
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var userLocation = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };

                map.setCenter(userLocation);
                map.setZoom(12);

                var marker = new google.maps.Marker({
                    position: userLocation,
                    map: map,
                    title: "Your Location"
                });
            }, function() {
                alert("Geolocation failed.");
            });
        } else {
            alert("Geolocation is not supported by this browser.");
        }
    };
});

This will detect the user’s current location and place a marker on the map! 🧭

---

6. Adding Route Directions

Modify Controller to Show Routes

app.controller("MapController", function($scope) {
    $scope.initMap = function() {
        var map = new google.maps.Map(document.getElementById("map"), {
            center: { lat: 34.0522, lng: -118.2437 }, // Los Angeles
            zoom: 6
        });

        var directionsService = new google.maps.DirectionsService();
        var directionsRenderer = new google.maps.DirectionsRenderer();
        directionsRenderer.setMap(map);

        var request = {
            origin: "Los Angeles, CA",
            destination: "Las Vegas, NV",
            travelMode: google.maps.TravelMode.DRIVING
        };

        directionsService.route(request, function(result, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsRenderer.setDirections(result);
            }
        });
    };
});

This will draw a route from Los Angeles to Las Vegas!