Styling Your Own Google Map
The First Step in a DIY Adventure Map
Map Themes
As oubiwann has recently posted, Forgotten Roads has a new Google Maps theme. But why would we do something like that? Well, it's not unlike the need to create a website with a unique look that distinguishes you from everyone else. For most people, this won't be necessary (or even of interest!), but for those who create unique content that revolves around map data, specific locations, or routes between points on a map, having a way to display this that is uniquely "you" is a great way to present a unified experience of your data.
Google Maps Defaults
Okay, but doesn't Google have defaults that are good enough? Sure, Google Maps provides several map views:
- Street Map view (this is what most of us probably use)
- Satellite view (really nice for sanity checks on locations, etc.)
- Terrain view (shaded views of land features, etc.)
While each of those is very useful in different ways, they don't really let us look at map data differently than what Google has decided for us. But hey, it's probably meets the needs of the vast majority.
Google "My Maps"
For those that aren't satisfied with these, you can actually do something more while still using Google's suite of tools. To see an example of this, do the following:
- Go to http://maps.google.com/.
- Log in with Google credentials (upper right).
- Then click the "hamburger" menu in the upper left (the icon of three horizontal lines).
- In the menu that appears, click "Your Places" then "Maps" – if you'vecreated any maps, they'll be here: go ahead and click on one. If you don't have any, you can click "Create Map" at the bottom.
- In the new window / tab that opens up, you'll see "layers" section to theright – click the arrow next to "Base map".
At that point, you'll see the following:
And these, dear rider, are the map themes that Google has provided to its "My Maps" users. The first three are the ones we're familiar with, listed above. The remaining six, however, may be quite new to you.
For the small percentage of the Google Maps using population who aren't satisfied with the defaults, this will likely satisfy. But then there's the tiny remainder like us that, well, need something more. Or less, as the case may be.
OpenRouteService
Before exploring our final solution, it's worth mentioning one of the earliest alternative we explored – not Google at all. We've used OpenStreetMap before, and unlike Google Maps, it's run by a volunteer effort and has a permissive open license (something that a lot of people care about). They've got a really nice theme that's easy on the eyes:
What we didn't know about, however, was OpenRouteService which makes use of OpenStreetMap but offers a new set of themes to choose from when creating a new route.
We had originally settled on this approach instead of putting time into styling our own maps, but sadly, we found a bug in its routing algorithm when we uploaded our own .kml
files. Given that our riding routes are the core of this whole effort, we had to bail.
For those who don't need perfect duplication of routes from .kml
files, we highly recommend this service. It's not as fast as Google, but you are offered the ability to create a greater number of way points than with Google Maps (something which has bothered us in Google Maps for a long time). Furthermore, their map themes are beautiful. Here's four of them looking at the Rapid City metro area:
That hardly does them justice, though – you should visit their site.
Here are the two we like best for looking at streets:
Styling Tools for Google Maps
So, given that all of our attempts to not do this ourselves failed, we fell back on a path of more work and greater time investment: creating a custom style for Google Maps. This required the following:
- Creating the style and saving the style JSON data
- Uploading the JSON data to a data repository
- Integrating the style with plain Google Maps (getting started)
- Integrating the style with track/trip data in Google Maps (tutorial, guide)
- Uploading track/trip data to a data repository
- Creating new pages that reference that data and pull in the Google Maps JavaScript APIs
But! We're not going to cover all that here – other places do that quite well. I just want to mention the tools for creating your own styles. oubiwann mentioned them in his recent post about the FRMX styles:
Both of these sites let you create either new styles from scratch or a style based on another one in their archives. We found a style we really liked here, and then began modifying it. We used both SnazzyMaps and MapStylr – their user interface tools a quite good for this, but couldn't find ways in which one definitely our-performed the other ... so we'll likely continue to use them both.
One thing to keep in mind as you play with both style editors: it's going to be very confusing at first, and you'll find yourself editing different parts of the highly nested data wondering what really controls what. It's not you. The data is complex and anti-intuitive. Just keep plugging away at it. 🛣