Maps are great visual, web design tools that help users get the information they need quickly. Advances in geocoding have made it easy to create beautiful, custom location and geographic specific data maps. Here are some of my favorite examples of websites using awesome map designs right now.
Websites Using Custom Markers
PM Environmental
PM Environmental’s location page uses a custom Google Map that displays all of their office locations using their logo as the marker.
Yacht Co.
The Yacht Co. locations page uses Google’s satellite view in sharp contrast to their bright yellow custom marker.
Artprize
Custom Markers on the web map for ArtPrize helps users find pieces of art throughout the city of Grand Rapids, MI, as well as other venues indicated by a custom marker.
Website Using Custom Colors
Lifechurch
With a clean and simple look, the map on the Lifechurch locations page is stripped down of unnecessary clutter to emphasize where their churches are located.
Diehl Group
Diehl Group uses a dark, sharp contrasting map that matches the aesthetics of the rest of their site.
Portland Eater
This online dining guide features a fun, interactive map that allows users to find the location of multiple food trucks in Portland, Oregon.
Community Bible Church
Here is another gray scale map that matches the desaturated tones of the Community Bible Church website.
Gude
Gude uses the color orange as a contrasting color on their contact page map.
Data Maps
Anderson Economics Group
The data map on Anderson Economic Group’s website uses a blue gradient to show the difference between the highest and lowest business tax ranked state. Hovering over each state gives more detail about each one. This map was built using Google Geocharts.
Counterspill
Counterspill is an interactive map that shows the impact of major non-renewable energy disasters.
An Urban World – Unicef
This Unicef map shows past, present and projected populations of urban areas throughout the world. Varying circle size and color help to communicate impact and scale for the user.
Additional Web Map Inspiration
Michigan Apples
The Michigan Apple Committee map allows users to input their location and find apple orchards and farm markets nearby.
Tomie Raines, Inc.
The web map on Tomie Raines, Inc.’s website shows all home listings that meet specific search criteria using custom markers. Clicking on a marker will show a photo and details of the home.
Joint
Joint uses a unique layout for a web map on their contact page.
Urban Organics
This company uses a nice, simple map with custom colors and markers to show their current pickup locations.
Morris Food Truck
The Morris Food Truck uses a map to show where they will be located each day.
Maps will continue to play an integral role in web design. As new technologies are developed, the methods for displaying them will continue to grow and evolve making the web more unique and engaging. Have a favorite map on a website? Tell us about it in the comments below!