Angular
Implement Google Maps in your Angular app
Implement Google Maps in your Angular app in just four minutes
There is no doubt that the Google Map Integration can add value to any application in existence mostly with an application that deals with location services and mapping features. In angular version 18.1 and above, it becomes very easy to integrate google maps capabilities into your angular application using stand alone components. Below are easy to follow steps showing how to integrate Google Maps in a proper way into your Angular application. No matter if you are developing a location based app, working on some geographic data representations or providing a routing & navigation service, this guide will help you to do that.
Step 1: Install Required Packages
To start with, You need to install the google-map package in application, Type command
npm install @angular/google-mapsStep 2: Include Google Maps API Script to Index
Insert the script into index.html <head> section. Replace YOUR_SECRET_KEY with actual API key generated from https://console.cloud.google.com/
<script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_SECRET_KEY"></script>Step 3: Create Component And Use
Now, Lets start with actual implementation, We will create a separate component named google-map by typing,
ng g c google-mapWe will add one location’s Coordinates for latlong literal and adjust zoom level. We will also provide other location’s Coordinates for markers. In html file, We will use google-map tag and provide the config.
// google-map.component.ts
import { CommonModule } from '@angular/common';import { Component } from '@angular/core';import { GoogleMapsModule } from '@angular/google-maps';import { RouterModule } from '@angular/router';@Component({ selector: 'app-google-map', standalone: true, imports: [CommonModule, GoogleMapsModule, RouterModule], templateUrl: './google-map.component.html', styleUrl: './google-map.component.scss',})export class GoogleMapComponent { center: google.maps.LatLngLiteral = { lat: 23.0225, lng: 72.5714 }; zoom = 12; markerLatLong: google.maps.LatLngLiteral[] = [ { latitude: 23.0557, longitude: 72.4687 }, { latitude: 23.0504, longitude: 72.4991 }, ];}// google-map.component.html<google-map [center]="center" [zoom]="zoom" width="100%" height="400px"> <map-marker *ngFor="let position of markerLatLong" [position]="position" ></map-marker></google-map>
Conclusion
Through these simple steps, we can integrate the Angular Google Maps library, build a basic map component, define the initial center and zoom level for your map, set up a new Angular project, fetch a Google Maps API key and place markers to identify specific points. This is the best and effortless way to integrate Google Maps provided by angular framework itself.
Ready to transform your business with our technology solutions? Contact Us today to Leverage Our Angular Expertise.
Angular