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 - Read more, Prompt Less thumbnail
1:01:30
6 days ago

WeAreDevelopers LIVE - Read more, Prompt Less

Chris Heilmann, Daniel Cranney, Luise Freese

WeAreDevelopers LIVE - Tech Education in Two Languages thumbnail
1:00:18
12 days ago

WeAreDevelopers LIVE - Tech Education in Two Languages

Daniel Cranney, Roxy Rodriguez-Becker

WeAreDevelopers LIVE - Playing in Production thumbnail
1:06:40
19 days ago

WeAreDevelopers LIVE - Playing in Production

Andrew MacLean, Daniel Cranney, Christian Heilmann

WeAreDevelopers LIVE - Is CSS Catching Up to Flash? thumbnail
1:03:33
about 1 month 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
about 1 month 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
about 1 month ago

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

Chris Heilmann, Daniel Cranney

Upcoming sessions on this topic

Open session

Build a Zero-Cost AI Agent in Your Browser

  • Aishwarya Mathuria

    Adobe

    Computer Scientist

  • Nishant Thakur

    Adobe

    Senior Computer Scientist

Open session

Designing for Every Direction: Logical CSS for Global, Adaptive, and Effortlessly Reversible UIs

  • Vidhya Krishnamoorthy

    Morgan Stanley

    VP, Software Engineering Manager

Open session

React Under Fire: Rendering Performance for Streaming Agent UIs

  • Abhirupa Mitra

    Slack

    Senior Member of Technical Staff

Open session

Thinking in Graphs, Reasoning with Gemini!

  • Bhavesh Bhatt

    N/A

    Lead AI Engineer

Open session

How Google built a Consistent, Global Authorization System with Zanzibar (and you can too!)

  • Sohan Maheshwar

    AuthZed

    Lead Developer Advocate

Open session

From Profiler to Production: Measuring What Actually Matters in React & React Native

  • Andrei Tazetdinov

    Dynatrace

    React Native Developer

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.