So you want to embed Google Maps in your website. Maybe you have a list of locations you want to display, or perhaps you need to provide directions or perform simple GIS operations. You’re a pragmatic person, so you don’t want to reinvent the wheel. You’ve settled on Google Maps as your mapping platform, acquired your API key, and you’re raring to go. Awesome! I’m so excited! Google Maps has great bang for the buck, and their API is well documented and easy enough to use. But there’s a downside. Google Maps has become the Power Point of cartography.
But all that’s just fine, because we can still do some great work with this tool. I’ve written some general tips that I’ve learned after making a few of those “Contact Us” and “Locations” pages you see, but they are far from prescriptive. You, dear reader, are the adult in the room. All of these tips should be taken with a grain of salt.
You have options. Specifically, you have MapOptions.
Even a cursory glance over the documentation for MapOptions will be worth your time. This is Google Map’s “Look what I can do!” section. Want a simple map without all the UI bureaucracy? Oh look, disableDefaultUI right there! How nice! Most UX and UI tweaks can be done with a careful and considered use of MapOptions. Experiment with a variety of configurations.
Own your map. Own your Style.
Google Maps v3 has Styled Maps. For a crash course, take a quick jaunt over to SnazzyMaps to get some inspiration. Note how their own map style reinforces their brand. If you really wanna get your hands dirty, though, you’ll have to learn Google’s Styled Maps from the ground up. The results are worth it. For the extra mile, you can style Map Markers and Info Boxes too. Be sure to check Google’s Styled Map Wizard. You can also head over to Stadtwerk.org’s Styled Map Colorizr. Don’t forget your color theory!
Remove irrelevant labels.
If your labels compete with the data, get rid of them or find a way to quiet them. Do your users need to be told where the North Atlantic Ocean is? Do you need to know the province names AND the city names? This isn’t to say that all labels should be removed, but hiding extraneous information will give your data more elbow room. Don’t make your map be all things to all people; make it the right thing for your people.
Stay on topic; constrain the view.
Hi. I have ADD. If a content manager takes about three hours to enter in the geo locations of all 52 of artisan waffle shops onto a map of North America, you can bet within 10 seconds I’ll have already left the confines of North America and centered my map on Ouagadougou because OOH BUTTERFLIES!
Stay on topic and stay the course. Reducing scope also helps you focus your own optimization efforts. You’ll enjoy a reduced workload, and your user will enjoy an increased attention span.
Consider setting minimum and maximum zoom in the MapOptions object. As far as constraining the viewport, you may have to write some custom code to stay on topic. If users need to view a particular location up close, it’s very easy to provide an external link to maps.google.com.
Consider Clusters for large amounts of Map Markers.
Watch out for UX Gotchas!
Avoid full bleed on mobile devices, as user may be unable to scroll. Give small gutters on either side to give enough affordance to scroll freely.
Imagine a long blog post (like this one) where there was a map near the bottom. A smartphone user scrolls down, dragging their finger across the glass. Eventually the large map scrolls into view, and the scrolling momentum takes the map entirely into their view. The user intends to skip this content and continue scrolling down. They use the same action – they have no choice. GOTCHA! Instead of scrolling the document, the map captures the event and pans the map. If the map takes up the entire viewport, the user is effectively trapped. What an awful thing to happen! On mobile, be very very careful with maps. Your users will reach Antarctica before they reach the footer.
A similar case can happen with mouse scrolling on desktops. Turning off zoom in the API prevents scroll event captures, which can be frustrating. Add a zoom control if your design calls for it, but consider disabling scroll-to-zoom events. Again, pay attention to MapOptions.
Maps are for everyone. Support Localization.
There is life outside of Google Maps.
Google Maps is an excellent tool, but it may not always be the right tool for the job. Ask yourself what it is you want to show. Scale matters. If you want to show people how to get to your locations, then Google Maps is often an appropriate tool. If you want to show that you have an international presence, then Google Maps’ default Web Mercator projection may not be… politically correct.
Let’s not be too hard on Google Maps. It’s a round planet. Your monitor is flat. The math dictates that something has to give here. Suffice to say that the eternal battle of Conformal projections against Equal Area projections may seem a bit academic to people who just wanna know how to get to Denny’s.
If you love data, but you hate Mercator projections like I do, then may I suggest that these problems may require you to consider tools outside of Google Map? Because I just did. Technologies such as D3.js, Open Layers, and GIS software may need to be employed. But then you can be the coolest kid at the party.