To add AGM npm package to your local machine, type the given into your command line.
Provide API key for your application. The API key can be generated using a link.
Open src/app/app.module.ts and import the AgmCoreModule.
Add following into app.module.ts file.
Extend the App Component by adding the following into src/app/app.component.ts file:This will also create an array with different pins, you can use different pins as per the needs.
Get the pin locations from API and create the array of pin objects. This will include some pointers with info window and others are without infowindow.
Now, add following into the src/app/app.component.html to generate the map using dynamic pins.
Now, add the function into an add.component.ts file to show and hide the infowindow. you can now emit this function from child controllers to show/hide infowindow by multiple events. We use the table with a list of customers. Clicking on a row of that table, info window on a pin of that customer will be visible and the other entire infowindow will be hidden.
Angular Google Maps makes easier to render your custom JSON data with Google Maps as long as you have geocoordinates available for each of your locations. While developing a mobile or web app, you may find yourself in a position where you need to integrate a map into it. By embedding a map you will succeed in creating an interface that is visually rich and engages your users better. Choosing the right solution can not only enhance the user experience but also provides extra perks like revenue increase, product image improvement and so on, depending on the target audience and the app scope.
WRITTEN BY: Parth Patel
Parth Patel is a Microsoft Certified Solution Associate (MCSA) and DotNet Team Lead at CMARIX, a leading Asp.net mvc development company. With 10+ years of…
FEW MORE POSTS BY Parth Patel: