10 AngularJS Google Maps Demos & Examples

Handsontable JavaScript Spreadsheet Most popular component for web apps
Sam Deering Sam Deering (updated ) Angular Modules Tips

In today’s post we’ve collected some awesome Google Maps Demos. With geolocation being all the rage at the moment and the increase in mobile devices web apps are heavily using maps to provide services to mobile users. Angular is becoming more popular and we now need to integrate a map with AngularJS apps. It’s easier for us as developers if we don’t reinvent the wheel and utilize some of the truely good work from the open source community. So check out the demos below and save yourself some valuable coding time! If you find any other decent Angular demos please do leave a comment.

If your looking for Angular 2 Google Maps integrations click here.

1. Angular Directives for Google Maps

AngularJS directives to integrate Google Maps into your applications.
AngularJS directives to integrate Google Maps into your applications. There are directives for most of the widely-used objects, including markers, windows, lines and shapes. We’re currently working on integrating more layer objects, including the HeatMap and such.

Github Website Demo

2. GM Simple Maps

AngularGM is a set of directives for embedding Google Maps in your application using the Google Maps Javascript API.
AngularGM is a set of directives for embedding Google Maps in your application using the Javascript API. If you want a handle to the map, you should use the getMapPromise(mapId) method so you can guarantee the map will be initialized.

Github Docs Demo

3. Angular TODO Google Map Demo

Making google maps components with AngularJS. Awesome Demo.
Making map components with AngularJS pretty awesome demo. The simplest situation is just setting up a map with a starting location. Using the directive link function instantiate the map seems to do a great job.

Github Website Demo

4. Example of Angular Maps with Markers

A simple jsfiddle example of embedding a google map with markers.
A simple jsfiddle example of embedding a google map class with markers to calculate long and lat positions.

jsFiddle Demo

5. Playing with Maps using AngularJS

The talk covers basic Maps API following by the use of AngularJS to create a Maps application. The source code for live demo can be found under the "demo" directory in the github repository.
The talk covers basic Maps API following by the use of AngularJS to create a Maps application. The source code for live ng-map demo can be found under the “demo” directory in the github repository.

Tutorial Demo

 

6-10 – Please tell us below if you know any more good JavaScript demos of Google maps which we can add to this web page to help others.

Also if you are looking to code or have coded any features we are looking for include functionality for zooming the maps with mouse scrolling or by finger pinch (on mobile devices) we would love to hear about it.  We’re also API integration such as real-time search custom markers and other similar geo-location features. In return we can offer you some exposure and usage/adoption to your module for free.

 

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.

2 thoughts on “10 AngularJS Google Maps Demos & Examples”

Leave a Reply

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