6. Tips & Tricks

🏡 Home 👈 Prev 👉 Next
⚡  GMapsBook.com is crafted by Jozef Sorocin and powered by:
  • g-Xperts (Google Cloud & Business Profile Partner)
If you made it through chapters 1–5, you now have a solid understanding of how to:

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.
In the individual subchapters, we’ll combine our knowledge of the Maps Javascript API with related Google Maps Platform APIs: Static Maps, Geocoding, & Places.

Code Completion & IntelliSense

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 devDependencies.
This goes for any GoogleMaps-related JavaScript or TypeScript project:
Code completion and DefinitelyTyped typings for Google Maps
Code completion and DefinitelyTyped typings for Google Maps
The @types/google.maps package pertains to the browser Maps API. Most Node.js / server-side libraries (e.g. google-maps-services-js) will expose their own types. More on this in 👩‍💻Bulletproof Address Autocomplete.

Chrome DevTools

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.
The following materials concern Chrome DevTools, but the same concepts apply if you're using Firefox or Edge.

Console Panel

Once Google Maps loads, it’ll populate the global window.google.maps namespace. You can interact with the namespace’s members through the Console:
Inspecting the global google namespace
Inspecting the global google namespace

Sources Panel & Debugging

Not only can you see what’s inside the google namespace, but you can also view, inspect, and debug Google Maps’ obfuscated code:
Setting a breakpoint inside the new google.maps.Map constructor
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:
Interacting with a global Map instance from the Console
In the 2nd half of the video you can see live expressions in action. What’s that all about?

Live Expressions

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 .setTimeout callback.
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:

Already purchased? Sign in here.