Germán Álvarez

Creating a routing app with Google Maps API from scratch

One missing CSS rule can make your map disappear. Learn this and other critical tips for building a complete routing app with the Google Maps API.

Creating a routing app with Google Maps API from scratch
#1about 2 minutes

Overview of the three map applications to be built

A brief introduction to the three projects that will be created from scratch: a styled map, a geolocated map, and a route-planning application.

#2about 5 minutes

Setting up the basic HTML and script structure

Learn how to structure the HTML file, include the Google Maps API script with a key and callback function, and prepare the initial JavaScript setup.

#3about 9 minutes

Rendering a basic map with a marker and custom styles

Instantiate a basic map with a specific center and zoom level, add a marker to a location, and apply custom JSON styles for unique visual themes.

#4about 11 minutes

Using browser geolocation to center the map on the user

Access the user's location using the browser's `navigator.geolocation` API and dynamically update the map's center and add a marker to their current position.

#5about 22 minutes

Creating a complete route planning application

Build a routing feature by capturing user input for a destination, using geolocation for the origin, and leveraging the Directions Service and Directions Renderer to calculate and display the route on the map.

#6about 7 minutes

Q&A on API billing, local development, and best practices

A discussion covering the Google Maps API free tier, how usage is counted during local development, and important best practices like managing API keys in production.

Related jobs
Jobs that call for the skills explored in this talk.

Featured Partners

Related Videos

See all videos
Unleash your web skills on native!52:01

Unleash your web skills on native!

Rowdy Rabouw

Snappy UI needs no Single-Page Application40:24

Snappy UI needs no Single-Page Application

Clemens Helm

Extensionator - Rise of the Chromium35:15

Extensionator - Rise of the Chromium

Keren Kenzi

Progressive Web Apps - The next big thing40:01

Progressive Web Apps - The next big thing

Nico Martin

Catching up on the basics you don't really need that much code14:44

Catching up on the basics you don't really need that much code

Chris Heilmann

The Eventloop in JavaScript - How does it work?30:36

The Eventloop in JavaScript - How does it work?

Christian Woerz

Build Your Own Subscription-based Course Platform1:24:47

Build Your Own Subscription-based Course Platform

Dávid Lévai

The Art and Craft of Type Development43:20

The Art and Craft of Type Development

Michael Hladky & Stefan Baumgartner

From learning to earning

Jobs that call for the skills explored in this talk.

Angular Developer

Angular Developer

Picnic Technologies B.V.
Amsterdam, Netherlands

Intermediate
Senior
RxJS
Angular
TypeScript