Angular 2/4 Google Maps 10 Examples

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

Angular 2 Google Maps Components
Angular 2 Google Maps Components

Angular Google Maps is a set of directives (part of angular-ui) written in CoffeeScript and Javascript which integrate Google Maps in an AngularJS applications. There are directives for most of the widely-used Google Maps objects, including markers, windows, lines and shapes. We’re currently working on integrating more layer objects, including the HeatMap and such.

Example Code

2. Angular2 Google Map Click Event Demo

Angular2 Google Map Click Event Demo2
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.

Demo

3. Angular 2 + Google Maps Places Autocomplete

Angular 2 + Google Maps Places Autocomplete
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.

Article Demo

4. Angular2 angular2-google-maps Demo

Angular2 angular2-google-maps Demo
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.

Demo

5. Angular 2 and Google Maps Example

Angular 2 and Google Maps Example
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.

Example

6. Angular Google Maps (AGM)

Angular Google Maps (AGM)
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.

Website

7. Angular 2 Google Maps Markers

Angular 2 Google Maps Markers
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.

Video Tutorial

8. Build A Google Map App Using Angular 2

Build A Google Map App Using Angular 2
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.

Video Tutorial

9. Google Maps in Ionic 2

Google Maps in Ionic 2
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).

Video Tutorial

10. Google Maps API For Angular 2

Google Maps API For Angular 2
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.

Demo

Sam Deering

Sam Deering

Sam is a web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and sharing what he learns with others.

One thought on “Angular 2/4 Google Maps 10 Examples

Leave a Reply

Your email address will not be published. Required fields are marked *