I’m sure you know that the intuitive Google Maps is very popular among developers!
In this blog series, you will learn how to add Google Maps using Google Maps API. You will also learn how to add markers, clusters, editable polygons, and circles with markers on Google Maps.
We are going to rely on open-source Google API to achieve this task!.
Well, here’s the full overview of this blog:
- How to get Google Maps API key?
- How to integrate Google Maps in Angular application?
- How to add shapes on Google Maps
- How to markers and clusters on Google Maps
Discover how our Angular UI test automation solution saved a customer 90% of manual testing efforts.
First things first…
Get Google Maps API Key
So first, you need to get access API key from Google Maps. Integrating Google Maps is a breeze if you have your API key handy.
1. Go to Google Developer Console.
You need to sign in with your Google account.
2. First, we need to create a project to enable Google Maps Services. So, click the New Project button.
3. After you clicked the New Project, it prompts you to enter the Project Name. You can give your desired project name. Then click the CREATE button.
4. Once a Project is created, it shows the created project name. Then click SELECT PROJECT.
5. Now we need to enable Google Maps Services to this project. So, click ENANBLE APIS AND SERVICES button.
Fig 1: Enable APIs and Services
6. Select the Maps JavaScript API option.
7. Click the Enable button to enable Google Maps services.
8. Now we need to get API credentials for Google Maps. So first click the triple horizontal bar and select APIs & Service -> Credentials.
9. Click the CREATE CREDENTIALS button.
10. Now choose the API Key.
11. It will show the API Key. Copy this API Key. This key will be used in the Angular Google Maps Plugin.
Here are the steps to integrate Google Maps in an Angular project:
Step 1: Install Google Maps types for typescript support
In the project directory, run
This package imports the TypeScript type definitions for the Google Maps JavaScript API. It allows for robust types and intelligence in your IDE.
Step 2: Link to the Google Maps JavaScript file
Open the index.html file and add in the following script tag within the <body></body> section. Replace API-KEY with your API key.
Step 3: Import the Google Maps type into Component.
In the component file where you placed put the map placeholder element (in this case, app.component.ts), we need tomust import the Google Maps TypeScript definitions. At the top of app.component.ts.
Step 4: Initialize the Map
Let’s initialize the map within the OnInit lifecycle hook. Add two variables within your component.
SeeNote that the variable name in the ViewChild annotation needs tomust match whatever # variable declaration you put placed in your HTML (in this example, we refer tocalled it as ‘map’). You will must also need to import ViewChild.
Text BoxViewChild creates produces a reference to the HTML element that containsing the map. Make Ensure your component implements executes the OnInit interface and add the following method that follows.
This map will centre on Sydney and should come with some built-in zoom and navigation controls. If you want to see your own coordinates, then Location permission is required in the browser so that the map pin will go to the user location.
The API uses a Map Type object to hold information about these maps.
You modify the map type in use by the Map by setting its mapTypeId property, either within the constructor via setting its Map options object, or by calling the maps setMapTypeId() method. The mapTypeID property defaults to roadmap.
Now it’s time to build and run the application!
Build and run your application
Great! So, we have created all the needed source files. Now everything should be ready to build and run the application.
Text BoxRun the following command in the project root folder:
Then, open the following URL in your browser: http://localhost:4200/
Fig 2: Build and run your application
Well, that’s all about basic Maps integration in your Angular application.
When everything works as expected, you should see your first Google Map created with Google Map API!
You can refer to this source code: https://github.com/poojachavan04/Google-Map.git
I would greatly appreciate it if you enjoyed this blog and found it useful. Send us an email with your thoughts about this integration. Visit us at Nitor Infotech to learn more about the software we create.
