🏡 Home 📖 Chapter 👈 Prev 👉 Next
⚡ GMapsBook.com is crafted by Jozef Sorocin and powered by:
Google Maps supports various types of overlays, ranging from markers with associated info windows, through polylines, all the way to circles, rectangles, squares and other kinds of polygons.
🔑 Disambiguation: overlays discussed in this chapter will also be called artifacts to differentiate them from 5. Data Layers & Overlays.
You would typically:
- use markers (pins) to display single locations on the map
- connect each marker to a clickable info window containing more detailed information about the underlying location (more on this in Custom Info Windows)
- draw polylines to denote routes, directions, and other kinds of connections between markers
- display circles to indicate a radial ranges around your points of interest — e.g. to represent population, intensity, or density clusters, potential explosion zones etc.
- deploy rectangles to cut out regular subsets of the map canvas — e.g. when developing a “search as I move the map” feature on real estate websites.
- utilize polygons to highlight real-world areas of interest — i.e. plots of land, building footprints, food delivery coverage etc.
FYI, delivery coverage isn’t as trivial as it seems — check out this primer on isodistance and isochrone maps if you’re interested in this topic.
Unless customized, all these artifacts are vectorized — meaning that when you move or zoom the map, the overlays move and scale up/down without pixelation and in sync with the map canvas.
💡 The following concepts require elementary knowledge of geographic coordinates, as presented in the previous chapter.
I’d like to display my chain of restaurants on a Google Map and display 0.5mi circles around each location: