I am using AGM maps for my angular 4 application, there I am facing issues, I will be having the multiple markers which are fetched from api as an array of Latitude and Longitude. I want to set the zoom level exactly covering all the markers on the map. Even if one marker in one country and other in some other country also, It should set the zoom level on load to show all the markers on the map.
Is there a way to do that in AGM angular maps? Could anyone please help me
Angular – way to set the bounds and Zoom level in AGM Map
angularangular-google-mapsgoogle mapsgoogle-maps-api-3google-maps-markers
Best Answer
Objectives
We would like to set a zoom level of AGM map to show all the markers on the map. Typically in Google Maps JavaScript API you use the
fitBounds()
method of the google.maps.Map class to achieve this.https://developers.google.com/maps/documentation/javascript/reference/3/map
So, we have to get instance of the map object (the JavaScript API instance) and apply
fitBounds()
on it.Solution
I have created a simple example that has a mock service that provides JSON data for 5 markers and draws map and markers using AGM map. In this example I used @ViewChild decorator to get the instance of AGM map and listen the
mapReady
event to get instance of map object (from JavaScript API). Once I get map instance I can easily create LatLngBounds object and callfitBounds()
on map object. Have a look at thengAfterViewInit()
method in the app.component.ts to get an idea.Code snippet
app.component.ts
app.component.html
Conclusion
If you would like to check complete example please download the sample project:
https://github.com/xomena-so/so48865595
I hope this helps!