Working with google maps in angular

Introduction

Hi readers!. Nowadays we are using google maps frequently and integrating maps in different applications is also in demand as it helps the user to identify places easily. So in this blog, we will be going through the integration of google maps in angular directly from google maps API and how we can add markers on the map.

So let us get started.

Note

To work with google maps, you will need to create an API key which you can create from your google maps platform. Follow the steps in this link in order to generate a key.

Google Maps provides us with 4 different map views- roadmap, satellite, hybrid, and terrain which you can control from your code. By default, google maps provide you a map with zoom-in and out controls, map and satellite view, and the option for keyboard shortcuts as well. The zooming can be controlled on the map by defining the min zoom and max zoom whichever you want.

The initial resolution at which the map is displayed is zoom level 0. For continent view, it should be 5, for cities it should be 10. The street view is 15 and the building view is 20. So we can set that according to our requirements.

Also, we can disable the default options easily in the map options which we will see below in the example.

We will also get the full-screen option as well in the maps as a default feature.

Integration of Google Maps

Let us create a new angular application

ng new googleMaps

Then run these commands in order to use the google maps API

npm i googlemaps
npm i @types/google.maps

The first command is for google maps features and the second one contains typescript definitions for google maps js API.

Now in order to use google maps API, we first need the following script tag in our index.html with the Google Map key. You can add your own API key

<script src="http://maps.googleapis.com/maps/api/js?key=API-KEY"></script>

In your component html file add, add the following div:

<div #mapContainer id="map"></div>

Now in your typescript class, you need to add the following code:

 map!: google.maps.Map;
  @ViewChild('mapContainer', {static: false}) gmap!: ElementRef;
  lat = 20.5937;
  lng = 78.9629;
  coordinates = new google.maps.LatLng(this.lat, this.lng);
  mapOptions: google.maps.MapOptions = {
    center: this.coordinates,
    zoom: 2,
    minZoom: 2,
    maxZoom: 10
  };

   positionMarker = new google.maps.Marker({
     position: this.coordinates,
     map: this.map,
   });

   ngAfterViewInit() {
     this.initializeMap();
   }

   initializeMap() {
     this.map = new google.maps.Map(this.gmap.nativeElement, this.mapOptions);
     this.positionMarker.setMap(this.map);
   }

Now let us understand the above code.

To load the map initially we will need to define the center coordinate around which the map will be displayed so that we have stored in the coordinates variable. The latitude and longitude are of India. Then in the map options we have specified the initial zoom level as 2 and minimum and maximum zoom also we have specified. So after reaching zoom level 10, the user cannot zoom in more on the map.

Then for the marker, we are using the same coordinates as now. To display more you can take an array and add all the coordinates in it.

Then simply in ngAfterViewInit we initialize the map

Now you are ready to run your application.

ng serve

And you will be able to see a Google map on the browser.

Conclusion

So now we have learned how we can display google maps and display a marker in angular. There are various other features available in google maps but it all depends on your requirement. You can go through the google maps documentation here

Finally, for more such posts like this, please follow our LinkedIn page- FrontEnd Competency.