Implementing Google Maps API inside an AngularJS app

Google Maps API allows developers to integrate interactive maps into web applications, providing functionalities like location search, markers, and geolocation. In this guide, we will walk through integrating Google Maps API in an AngularJS application step by step.

1. Prerequisites

Before proceeding, ensure you have:
✔ Basic knowledge of AngularJS
✔ A Google Maps API Key
✔ A working AngularJS project

2. Getting a Google Maps API Key

Go to Google Cloud Console → https://console.cloud.google.com/
Create a new project or select an existing one.
Enable Google Maps JavaScript API:
- Navigate to APIs & Services > Library
- Search for Google Maps JavaScript API and enable it.
Generate API Key:
- Go to APIs & Services > Credentials
- Click Create Credentials > API Key
- Copy and save the API key

3. Adding Google Maps to AngularJS Application

A. Include Google Maps JavaScript API in `index.html`

Add the Google Maps script with your API key in the <head> section:

htmlCopyEdit<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY"></script>

4. Creating an AngularJS App with Google Maps

A. Define the AngularJS App and Controller

Create an app.js file and set up the AngularJS module:

var app = angular.module('mapsApp', []);

app.controller('MapController', function ($scope) {
    function initMap() {
        var mapOptions = {
            center: { lat: 40.7128, lng: -74.0060 }, // New York City
            zoom: 10
        };

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

        var marker = new google.maps.Marker({
            position: { lat: 40.7128, lng: -74.0060 },
            map: map,
            title: "New York City"
        });
    }

    google.maps.event.addDomListener(window, 'load', initMap);
});

5. Creating the HTML View

Modify index.html to display the map:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AngularJS Google Maps</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY"></script>
    <script src="app.js"></script>
    <style>
        #map {
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body ng-app="mapsApp" ng-controller="MapController">
    <h2>Google Maps in AngularJS</h2>
    <div id="map"></div>
</body>
</html>

6. Explanation of Code

✔ Google Maps API is loaded in the <head> section
✔ The map is initialized inside initMap() function
✔ A marker is added at the specified location
✔ The map is displayed inside the #map div

7. Adding Multiple Markers Dynamically

Modify app.js to include multiple markers:

app.controller('MapController', function ($scope) {
    function initMap() {
        var locations = [
            { lat: 40.7128, lng: -74.0060, title: "New York" },
            { lat: 34.0522, lng: -118.2437, title: "Los Angeles" },
            { lat: 41.8781, lng: -87.6298, title: "Chicago" }
        ];

        var map = new google.maps.Map(document.getElementById("map"), {
            center: { lat: 39.8283, lng: -98.5795 }, // USA center
            zoom: 4
        });

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

    google.maps.event.addDomListener(window, 'load', initMap);
});

8. Getting User’s Current Location and Displaying on Map

Modify app.js to detect the user’s location:

app.controller('MapController', function ($scope) {
    function initMap() {
        var map = new google.maps.Map(document.getElementById("map"), {
            zoom: 12
        });

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

                map.setCenter(userLocation);

                new google.maps.Marker({
                    position: userLocation,
                    map: map,
                    title: "You are here"
                });

            }, function () {
                alert("Geolocation failed.");
            });
        } else {
            alert("Geolocation is not supported by this browser.");
        }
    }

    google.maps.event.addDomListener(window, 'load', initMap);
});

9. Adding Search Functionality for Places

Modify index.html to add a search box:

<input id="searchBox" type="text" placeholder="Search a location">

Modify app.js to enable search:

app.controller('MapController', function ($scope) {
    function initMap() {
        var map = new google.maps.Map(document.getElementById("map"), {
            center: { lat: 39.8283, lng: -98.5795 }, // USA
            zoom: 5
        });

        var searchBox = new google.maps.places.SearchBox(document.getElementById("searchBox"));

        searchBox.addListener("places_changed", function () {
            var places = searchBox.getPlaces();
            if (places.length === 0) return;

            var bounds = new google.maps.LatLngBounds();
            places.forEach(function (place) {
                if (!place.geometry) return;

                bounds.extend(place.geometry.location);
                new google.maps.Marker({
                    position: place.geometry.location,
                    map: map
                });
            });

            map.fitBounds(bounds);
        });
    }

    google.maps.event.addDomListener(window, 'load', initMap);
});