Always wondered how to setup Google Maps the easy way in an Angular project?
Here's I'm going to show you how.
If you are looking to add a lot of functionality I will suggest you to add the map the way I teach you in my other tutorial: https://dev.to/pato_codes/setup-google-map-in-angular-app-the-pro-way-3m9p
Setup Google Maps with AGM (Angular Google Maps)
If it was me working on a project that I needed to do some basic Google maps functionality I will approach it this way by using the AGM library. if the app needs more custom functionality I will do it using the Google Maps API only.
To learn more about AGM (Angular Google Maps) visit:
https://angular-maps.com/
https://stackblitz.com/edit/angular-google-maps-demo
Let's get Started!!
1) Create a new Angular project:
ng new angular-agm
2) Install the AGM library inside of you Angular app you just created
npm install @agm/core
3) Now open your app.module.ts file. Let's add the AGM library to our app. At the top of your file add the following line
import { AgmCoreModule } from '@agm/core';
4) Generate a Google Maps API key here
5) Add the AgmCoreModule to your imports array inside of the app.module.ts file.
imports: [
BrowserModule,
AgmCoreModule.forRoot({
apiKey: 'YOUR GOOGLE API KEY HERE'
})
],
6) Paste your generated API Key as the value for your apiKey property.
7) Time to add the map to your HTML file. Go to your app.component.html and add the following:
<agm-map [latitude]="lat" [longitude]="lng"></agm-map>
Note: The latitude and longitude values are used to show the centered initial view of the map.
8) Adding a marker to the map. Inside of your app.component.html add the following line:
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
Your html file will look like this:
<agm-map [latitude]="lat" [longitude]="lng">
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
9) Go to your CSS file. app.component.css and add the following:
agm-map {
height: 500px;
}
Note: If you don't add the height, the map won't show on your app.
10) Go to your app.component.ts file add the following variables:
lat = 40.730610;
lng = -73.935242;
The variables are the ones defining where is the center of the map and also place the marker in the same place.
11) Start your server in the terminal:
ng serve --o
13) You should see something like this:
14) The complete repo:
https://github.com/devpato/angular-agm-tutorial
Top comments (12)
every thing is ok there is no error in console but not showing map on browser
Did you add this part ? agm-map {
height: 500px;
}
hy thanks working fine but can you tell me i have add input for search and filter record in markers but when there is not record exist in the map so then do not show map show
there is no record find
Hi, how did you get your app to start working? I have the same issue you had with no map showing up on the browser at all. What did you do after that point to get the map to show up?
Abuba, so the tutorial part works now? but now you want to add a search input functionality?
Aiden, what part you are stocked on? The tutorial part or an extra functionality? I'm down to help if I can see some code
Hi Pato,
can we have a selection menu list with countries and when we select a country, the marker should point to that country on world map.? How to pass lat and lng values to the markers of different countries? I stuck here. Please help me. thank you.
Hi, agm-map is loading in localhost but not working after deployment. Here is the screenshot. Can you please am I missing anything?
Can anyone please reply
Hi, For me agm-map is loading in local host but after giving deployment agm-map not loading. Can anyone tell why map not loading after deployment.
here is the screenshot after deployment
Hello sir can you please tell me how to reverse geocoding will be done like if we have two input box lat and lang after inputting the value then map will move according to lat and lat please
How does AGM compare to the offical @angular/google-maps library?