Code Completion & IntelliSenseChrome DevToolsConsole PanelSources Panel & DebuggingLive ExpressionsElements PanelLocating Elements of InterestNetwork PanelOnline Tools
If you made it through chapters 1–5, you now have a solid understanding of how to:
- Trigger and listen to built-in and custom Google Maps events.
In this chapter we’ll talk about best practices and developer experience (DX) tooling to make your Google Maps integration a walk in the park.
You will likely be coding your Google Maps implementation in an IDE like VSCode, WebStorm or Stackblitz (like all runnable code samples in this handbook.) Regardless of your IDE preference, you should always install
@types/google.maps as part of your
Code completion is super helpful but what if you could directly interact with the available Maps artifacts, classes, and functions? With Chrome DevTools, you can.
Once Google Maps loads, it’ll populate the global
You can interact with the namespace’s members through the Console:
Not only can you see what’s inside the
google namespace, but you can also view, inspect, and debug Google Maps’ obfuscated code:
You can interact with the source of any of the scripts currently loaded on a webpage by searching the Sources panel via
ctrl + p /
⌘ + p.
An even more useful trick is to store your own Google Maps instances on the
window object, i.e. via
window.map. That way, you can imperatively control the map’s attributes from the Console:
In the 2nd half of the video you can see live expressions in action. What’s that all about?
Given Google Maps’ asynchronous nature, it’s often difficult to schedule your
console.log calls. For instance, panning may take X milliseconds and you’d need some sort of an
idle event or a rough
In situations like this it might be easier to create a Live Expression where you type an expression once and then pin it to the top of your Console. It’ll be executed in near real-time (roughly every 250ms).
Try typing in: