π― Tips & Tricks
If you made it through chapters 1β5, you now have a solid understanding of how to:
- Customize your Google map .
- Create and work with interactive and custom markers, lines, and shapes .
- Trigger and listen to built-in and custom Google Maps events .
- Edit , import , and export Google Maps artifacts.
- Display native and highly-performant data overlays.
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.
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:
 for Google Maps](/_vercel/image?url=%2Fgoogle-maps%2F07_01%2Fgmaps-intellisense.png&w=1200&q=100)
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 .
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 window.google.maps namespace. You can interact with the namespace's members through the Console :
Inspecting the global google namespace
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?