Thankfully, there are a few options when you want to integrate Google Maps into your Angular 2 or Angular 4 application. So npm packages include angular2-google, angular2-google maps amongst other popular options that support the core google map apis. So without further a due here are some Angular 2 Google Maps Examples to help you get started. Enjoy!
1. Angular 2 Google Maps Components
2. Angular2 Google Map Click Event Demo
A simple plunker demonstrating Angular2 usage: Uses SystemJS + TypeScript to compile on the fly and includes binding, directives, and DI usage.
3. Angular 2 + Google Maps Places Autocomplete
This brief tutorial will show you how to quickly build an Angular 2 + Google Maps Places Autocomplete application. The Places Autocomplete by Google Maps is very helpful as it allows a user to search for an address or specific location. Combine the Places Autocomplete API with a Google Map using the angular2-google-map module.
4. Angular2 angular2-google-maps Demo
To install this library, run: $ npm install google-maps-ng2 –save.
Optionally, you can set different google maps api loader using OpaqueToken LAZY_LOADER_OPTIONS. Simple register your loader service as provider with this OpaqueToken key.
5. Angular 2 and Google Maps Example
This Angular app is built with anguar-cli, this is an early stage and very typical master-detail app with an input form.
6. Angular Google Maps (AGM)
Angular 2+ components for Google Maps. (Previously known as angular2-google-maps). The project name has changed from angular2-google-maps maps to AGM – Angular Google Maps because #itsJustAngular and we want to support all upcomming Angular versions.
7. Angular 2 Google Maps Markers
How can you implement a Google Map with markers animated?Watch this tutorial and step by step you’ll start coding in a short time.
8. Build A Google Map App Using Angular 2
In this short MapIt project based course, you will learn how to use the Google Maps components for Angular 2 and incorporate a MapIt feature. In this project, you will be able to search and pin locations using Latitude (lat) and Longitude (long) or simply by clicking on the location on the Map. These pins will parse to Local Storage, so they will stay even if you restart your applications.
9. Google Maps in Ionic 2
Adding map functionality to a mobile application can be extremely useful, especially when we throw Geolocation into the mix. The nature of mobile devices are that they are mobile obviously, and maps are generally most useful to people when they are on the move. It also gives us an awesome opportunity to display information contextually to a user (e.g. other users of the app that are nearby).
10. Google Maps API For Angular 2
The angular-google-maps core module. Contains all Directives/Services/Pipes of the core module. Please use AgmCoreModule.forRoot() in your app module.