← Back to blog

The Google Maps Toolkit I Wish I Had When I Started

If you've built more than one app using the Google Maps JavaScript API, you probably quickly noticed yourself writing the same boilerplate code again and again. Initialize the map, add overlays, figuring out why adding markers makes your whole interface lag. This post is a compilation of reusable UI components that make developing applications using the Google Maps API quicker, so you can shift your focus from boilerplate to problem-solving.

CustomOverlay

CustomOverlay is used for overlaying arbitrary images on the map. You give it the image source and geographic bounds, and it handles the rest: positioning, reprojecting on zooming and panning. CustomOverlay extends the OverlayView class provided by Google.

Here is a fun example using CustomOverlay to overlay an image of a cat over the State of Iowa:

  1. To be continued ...