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

Mapping

Overview

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
https://github.com/angular-ui/angular-google-maps

Steve shows us some examples from angular-google-maps.org

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.
https://www.waze.com/

Powerful stuff.

Continue to Part 5 – Customizing Ionic