Welcome to the second part of the Setup Google Map in Angular app (The pro way) series!
In this section I'm going to show you how to create multiple markers, add them to your map, and set click events that will trigger the info window of the marker!
A few options:
a) If you completed Part 1, then continue with Part 2.
b) If you didn't do Part 1, go do it, then come back.
c) If you don't care about the setup in Part 1, then clone the branch part1 and continue from there.
Repo
https://github.com/devpato/angular-google-maps-tutorial
Note: Branch part2 contains the final code of this tutorial.
Let's get started
1.Let's add a click event to our existing default marker. Find the mapInitializer() function and right before you set the marker in the map, you will add the following code:
//Adding Click event to default marker
this.marker.addListener("click", () => {
const infoWindow = new google.maps.InfoWindow({
content: this.marker.getTitle()
});
infoWindow.open(this.marker.getMap(), this.marker);
});
- At the top app.component.ts file before the constructor create a global variable of array of markers. This array will contain the markers information.
markers = [
{
position: new google.maps.LatLng(40.73061, 73.935242),
map: this.map,
title: "Marker 1"
},
{
position: new google.maps.LatLng(32.06485, 34.763226),
map: this.map,
title: "Marker 2"
}
];
At the bottom of your class component, create a new function called loadAllMarkers()
Inside of that function, you are going to iterate thought the array of markers, to start creating markers, adding info windows, adding click events to the marker, and adding the marker to the map.
Let's start by iterating through the array of markers.
this.markers.forEach(markerInfo => {
console.log
})
- Create markers based on the markers information.
this.markers.forEach(markerInfo => {
const marker = new google.maps.Marker({
...markerInfo
});
})
- Creating the info window of the marker
this.markers.forEach(markerInfo => {
//...the marker creation code here
const infoWindow = new google.maps.InfoWindow({
content: marker.getTitle()
});
})
- Adding the click event to the marker
this.markers.forEach(markerInfo => {
//...the marker creation code here
//...info window creation code here
marker.addListener("click", () => {
infoWindow.open(marker.getMap(), marker);
});
})
- Adding marker to the map
this.markers.forEach(markerInfo => {
//...the marker creation code here
//...info window creation code here
//...adding click event to marker code here
marker.setMap(this.map);
})
- You loadAllMarkers() function should look like this:
loadAllMarkers(): void {
this.markers.forEach(markerInfo => {
//Creating a new marker object
const marker = new google.maps.Marker({
...markerInfo
});
//creating a new info window with markers info
const infoWindow = new google.maps.InfoWindow({
content: marker.getTitle()
});
//Add click event to open info window on marker
marker.addListener("click", () => {
infoWindow.open(marker.getMap(), marker);
});
//Adding marker to google map
marker.setMap(this.map);
});
}
- At the bottom of your mapInitializer() function, call the loadAllMarkers() function
You mapInitializer() function should look like this:
mapInitializer(): void {
this.map = new google.maps.Map(this.gmap.nativeElement, this.mapOptions);
//Adding Click event to default marker
this.marker.addListener("click", () => {
const infoWindow = new google.maps.InfoWindow({
content: this.marker.getTitle()
});
infoWindow.open(this.marker.getMap(), this.marker);
});
//Adding default marker to map
this.marker.setMap(this.map);
//Adding other markers
this.loadAllMarkers();
}
Final Result
Top comments (11)
Thank you !!! It helped me a lot !!
But I have tried adding a checkbox to show / hide certain bookmarks, and was unsuccessful. Will you have an example that you can show me? I would be very grateful: D
Hi! I'm super busy right now. Ill prob have some time in 2 weeks to make the tutorial. Ill let you know if I do it. If you have some code example i can take a look to it too. preferible a repo on github or stackbliz
Hi Pato,
what if there are multiple locations have same lat long? Markers formed as stack. Any solution for this?
Thanks in advance !
Hi Akash! you don't want them to be stacked? or you don't want to have duplicate markers?
There are 6 store type of markers on map .How do i filter while switching options .Currently I re-intialiase the map while switching checklist this make map reload .Can you please help me how to achieve without flicker the map view
Hi! I'm super busy right now. Ill prob have some time in 2 weeks to make the tutorial. If you have some code example i can take a look to it too. preferible a repo on github or stackbliz
Hey Pato! Thanks a lot for the tutorial. I am currently building my app which is supposed to calculate distances to several locations and return the shortest distance to recommend the user the nearest location. I've been researching a lot. So far, I was able to set up google maps using Angular Google Maps Api module (traditional and easy way as you say). However, after doing couple of your tutorials, I kinda liked how you did that.
What would be your recommendation on how to calculate the distances between one location (in my case geolocation of the user, which I know how to set up through navigation object) and the markers that I set up on the map using your method from this tutorial? Any thoughts and suggestions? Thank you!!!
Hi! I'm glad you have liked the tutorials. See at the end of the day if you can get the marker using the navigation object and any other object take a look to this answer on stackoverflow I answered.
stackoverflow.com/questions/528714...
Let me know if it helps you if not, let me know
Were you able to use clusterer with this approach?
Property 'map' has no initializer and is not definitely assigned in the constructor
Hi Pato, can you please explain in a short way how can we filter multiple marker using (keyup) or (change) with ngModel bind?
like this one
developers.google.com/community/ex...