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 · WWC Europe 2026

2:46 min

Migrating legacy mapping tools to current geocoding systems

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 · WWC 2025

2:20 min

Building a location-aware city sightseeing mobile application

Mario Bodemann Mario Bodemann

More from WeAreDevelopers LIVE

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz thumbnail
5:43
5 days ago

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz

Chris Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Node and Package Security thumbnail
1:08:30
5 days ago

WeAreDevelopers LIVE - Node and Package Security

Chris Heilmann, Daniel Cranney, Zbyszek Tenerowicz

WeAreDevelopers LIVE - Streaming HTML thumbnail
1:10:26
12 days ago

WeAreDevelopers LIVE - Streaming HTML

Chris Heilmann, Daniel Cranney, Jad Joubran

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe thumbnail
1:02:34
19 days ago

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe

Chris Heilmann, Daniel Cranney, Justin Halsall, Werner Jeschko, Nicole Jeschko, Mirco Tomić

WeAreDevelopers LIVE - Web Performance in an AI World thumbnail
1:07:59
26 days ago

WeAreDevelopers LIVE - Web Performance in an AI World

Chris Heilmann, Daniel Cranney

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko thumbnail
5:55
about 2 months ago

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko

Chris Heilmann, Daniel Cranney

Upcoming sessions on this topic

Open session

World Congress 2026 North America

API = Some REST and HTTP, right? RIGHT?!

Rustam Mehmandarov

Passionate computer scientist

Rustam Mehmandarov
Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

How to generate business value through performance optimizations

Nikolai Sidiropulo

Software Engineer at Meta

Nikolai Sidiropulo
Open session

World Congress 2026 North America

Building Stuff with GenAI - The Open Minded Workshop beyond OpenAI

Andreas Erben

CTO for Applied AI and Metaverse at daenet

Andreas Erben
Open session

World Congress 2026 North America

Designing APIs That Survive AI Agents at Scale

Phani Pendurthi

Mastercard, Principal Software Engineer

Phani Pendurthi
Open session

World Congress 2026 North America

AI-Driven API Design

Mike Amundsen

Author, Adviser, Trainer

Mike Amundsen

Related videos

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

Location Verification without GPS?

Mario Bodemann

Generate Customer Journeys from reusable Building Blocks thumbnail
28:13
WWC 2022 • about 4 years ago

Generate Customer Journeys from reusable Building Blocks

Jochen Supper, Tobias Siebert

React and the power of visualisation thumbnail
40:19
LIVE • over 5 years ago

React and the power of visualisation

Daisy Muyldermans

Building Apps With a Mixture of Code and No Code thumbnail
36:33
LIVE • over 5 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
WWC 2024 • almost 2 years ago

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

Sascha Lehmann

Snappy UI needs no Single-Page Application thumbnail
40:24
LIVE • about 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.