Ionic Framework – Mapping


Welcome to Part 4 of this review of the Pluralsight course “Building Mobile Apps with the Ionic Framework and Angular JS” by Steve Michelotti.

Steve is a Microsoft ASP.NET MVP and holds MCSD, MCPD, and MCT certifications. He has produced a total of 7 courses for Pluralsight and is working on more.

Also in this series

Part 1 – Getting Started with the Ionic Framework.

Part 2 – Navigating and Routing



This module shows you how to provide a marker on a Google map for the location of our games, and give driving directions to that location

Google Maps for Angular – Introduction

Google Maps for Angular makes it easy to work with Google Maps. Steve provides a high level overview of the features of Google Maps for Angular

See more at

Steve shows us some examples from

Google Maps for Angular – Installation and Setup

We see how to install this using Bower, and set it up.

Google Maps for Angular – Implementation

Now that we have Google Maps for Angular setup, adding our Google map is just a google-map tag inside of an ion-content tag, and a small amount of JavaScript to set the center of the map.

Steve also adds a new route for this map screen, and a button to view it.

We see a map of Washington centered on the White House.

Google Maps for Angular – Markers

Inside the google-map tag, Steve adds a marker tag, with a marker-label tag inside that.
The label is styled with our custom CSS.

Driving Directions

Here we go beyond what can be shown in an emulator, and see a projection of Steve’s mobile phone. This fires up Waze, a driving direction program, with instructions fully loaded.

Powerful stuff.

Continue to Part 5 – Customizing Ionic

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s