WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
WeAreDevelopers LIVE • Dec 1, 2023

Creating a routing app with Google Maps API from scratch

Germán Álvarez

Transform a simple HTML element into a robust location-aware application. Master the Google Maps API, asynchronous geolocation, and dynamic route rendering from scratch.

Pause
Mute Enter Fullscreen
#1 about 2 min

Overview of the three Google Maps routing applications

Three instructional applications demonstrate foundational API capabilities spanning custom visual styling, physical geolocation tracking, and algorithmic route generation.

#2 about 8 min

Setting up the HTML structure and external dependencies

Setting up the foundational HTML document requires injecting third-party scripts, obtaining authentication keys, and explicitly defining container heights.

#3 about 4 min

Rendering the map instance and adding location markers

Generating a basic map view relies on specifying baseline zoom levels and geographical coordinates prior to appending location markers.

#4 about 3 min

Applying custom JSON styles to the map components

Map visual aesthetics are entirely overwritten by supplying a comprehensive JSON configuration object to the internal settings.

#5 about 12 min

Fetching and implementing device geolocation data via API

The internal navigator API prompts browsers to supply local device coordinates which dynamically reposition the digital map center.

#6 about 7 min

Creating the user interface for the routing application

Expanding the foundational HTML introduces interactive input elements and event listeners capable of capturing destination data strings.

#7 about 10 min

Fetching route details using the Directions Service API

The programmatic Directions Service instance accepts precise origin and destination values to algorithmically calculate optimal travel paths.

#8 about 3 min

Drawing the calculated route with the Directions Renderer

Validated navigational data sequences are physically sketched across the map topology using dedicated Directions Renderer instances.

#9 about 10 min

Final code walk-through and audience Q&A session

A summarized architectural review precedes discussions on maintaining API rate limits, masking authentication credentials, and deployment safety.

Matching moments

2:59 min

Rendering geographical maps with React Map GL

Daisy Muyldermans · LIVE

3:22 min

Demonstrating on-device indoor navigation in real time

Precious Osaro Precious Osaro · World Congress 2026 Europe

2:46 min

Migrating legacy mapping tools to current geocoding systems

Chris Heilmann Chris Heilmann +5 · LIVE

2:42 min

Executing a live multicloud routing demonstration

Alex Soto Alex Soto · LIVE

1:40 min

Building a modern interactive map with AI agents

Angie Jones Angie Jones · World Congress 2025

2:20 min

Building a location-aware city sightseeing mobile application

Mario Bodemann Mario Bodemann

More from WeAreDevelopers LIVE

WeAreDevelopers LIVE - Is CSS Catching Up to Flash? thumbnail
1:03:33
13 days ago

WeAreDevelopers LIVE - Is CSS Catching Up to Flash?

Chris Heilmann, Daniel Cranney, Bramus Van Damme

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along thumbnail
1:21:17
20 days ago

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along

Chris Heilmann, Daniel Cranney, Krzysztof Cieślak

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak thumbnail
4:23
22 days ago

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak

Chris Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Open Source Agent Toolkits thumbnail
1:00:38
27 days ago

WeAreDevelopers LIVE - Open Source Agent Toolkits

Chris Heilmann, Daniel Cranney, Eddie Jaoude

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude thumbnail
6:16
29 days ago

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude

Chris Heilmann, Daniel Cranney

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas thumbnail
5:46
about 1 month ago

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas

Chris Heilmann, Daniel Cranney, Marc Plogas

Related videos

Location Verification without GPS? thumbnail
23:51
about 2 years ago

Location Verification without GPS?

Mario Bodemann

Generate Customer Journeys from reusable Building Blocks thumbnail
28:13
World Congress 2022 • over 4 years ago

Generate Customer Journeys from reusable Building Blocks

Jochen Supper, Tobias Siebert

React and the power of visualisation thumbnail
40:19
LIVE • almost 6 years ago

React and the power of visualisation

Daisy Muyldermans

Building Apps With a Mixture of Code and No Code thumbnail
36:33
LIVE • almost 6 years ago

Building Apps With a Mixture of Code and No Code

Mark Piller

View-Transition-API: Gamechanger for hybrid app-development thumbnail
24:17
World Congress 2024 • about 2 years ago

View-Transition-API: Gamechanger for hybrid app-development

Sascha Lehmann

Snappy UI needs no Single-Page Application thumbnail
40:24
LIVE • over 2 years ago

Snappy UI needs no Single-Page Application

Clemens Helm

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.