How to create a map in Angular JS?

Last updated on March 18, 2023
Author: ciphertrick

Last updated on March 18, 2023
Author: ciphertrick

AngularJS is a popular JavaScript framework for building web applications. However, it’s important to note that AngularJS (1.x) is now considered outdated, and it’s recommended to use Angular (2+), which is a complete rewrite and provides better performance and features.

Regardless, if you want to create a map in AngularJS, you can use the Angular Google Maps (AGM) library. This library makes it easy to integrate Google Maps into your AngularJS application.

Follow the steps below to create a map using AngularJS and AGM:

Include the required libraries:

Include the AngularJS and AGM libraries in your project. Add the following script tags to your HTML file:

<!DOCTYPE html>
<html ng-app="mapApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.4.1/angular-google-maps.min.js"></script>
  </head>
  <body>
    <!-- Your code here -->
  </body>
</html>

Create an AngularJS module and controller:

Create a new AngularJS module and controller for your map. Add the ‘uiGmapgoogle-maps’ dependency to your module:

angular.module('mapApp', ['uiGmapgoogle-maps'])
  .controller('MapController', function($scope) {
    // Your map configuration and logic here
  });

Configure the map:

Configure the map’s center and zoom level within the MapController:

$scope.map = {
  center: { latitude: 40.7128, longitude: -74.0060 }, // New York City coordinates
  zoom: 12
};

Add the map to your HTML:

Use the ‘ui-gmap-google-map’ directive to add the map to your HTML:

<body ng-controller="MapController">
  <ui-gmap-google-map center="map.center" zoom="map.zoom"></ui-gmap-google-map>
</body>

Set the map’s size:

To display the map correctly, you need to set the size of the ‘ui-gmap-google-map’ element. Add some CSS to define the size:

<head>
  <!-- Other scripts -->
  <style>
    .angular-google-map-container {
      height: 400px;
      width: 100%;
    }
  </style>
</head>

Now you should have a basic Google Map displayed using AngularJS and the AGM library. You can further customize the map by adding markers, drawing shapes, and more by referring to the AGM documentation: https://angular-maps.com/api-docs/agm-core/