Symbols and Heatmaps in the Google Maps API

The Google Maps API provides a robust platform in which you can add geographical context to your data in a variety of ways. Data visualization is therefore one of the elements at the heart of the Maps API, and today we’re introducing two new techniques for visualizing your data in flexible and dynamic ways.

Symbols

At SXSW Interactive in 2011, I attended a session on geotemporal data visualization that made me keen to make it easier for Maps API developers to build visualizations similar to those discussed. For this reason I’m particularly excited to introduce a simple, yet powerful, new concept to the Maps API v3 that we call Symbols.

Unlike the image icons currently used for marking locations on a map, a Symbol is defined as a vector shape. The size, stroke width, color, and opacity of the shape, are all set by the Maps API application and can be dynamically modified. A small number of shapes, such as a circle, are provided by the Maps API, and custom shapes can be expressed as an SVG path.

Symbols open up a wide range of compelling new possibilities for data visualization and visual effects. For example, the below map illustrates the expansion of the Walmart chain of stores between 1962 and 2006:

In addition to using symbols to represent point features you can also decorate polylines with Symbols. One or more symbols, such as an arrowhead, can be placed at fixed positions on the polyline or repeated along the polyline. Because the polyline that has been decorated does not need to be visible, this feature can also be used to created dotted or dashed polylines, and just as the style of the symbols can be dynamically modified, so too can their location on the polyline:

Heatmaps

Developers often ask how they can represent large amounts of data on a map. Improvements in web browser technology have increased the number of markers that can be rendered by a Maps API application, but above a certain threshold the density of markers can overwhelm the user.

An alternative approach is to use a heatmap, and to enable this approach we’re launching support for browser rendering of heatmaps by the Maps API using the new Heatmap Layer. Your Maps API application can define the colour spectrum, intensity range, and behaviour of the heatmap when the map is zoomed. Here’s the Walmart example from above, but this time visualized as a heatmap:

If you have any technical questions about these new features, we recommend engaging with our developer community online, or joining our regular Google Maps API Office Hours. If you’re at I/O come see us in person at Office Hours in the Google Maps developer sandbox.

 

Share|

MapMyFITNESS and Google Maps API for Business

Being fit means moving and moving means going someplace. We created the MapMyFITNESS applications because we are passionate about living active lifestyles and we wanted a way to both track our progress and explore new activities. We wanted to help people experience this passion for themselves. As our community of MapMyFITNESS users has grown to over 9 million people, we have continually worked to make the applications easier to use and more effective at motivating people to keep moving, whether they’re elite athletes or people just getting started.

A key component to that mission has been our integration with Google Maps, which has made it easy for our users to find new routes or make their own, then share them with the rest of the MapMyFITNESS community. As one of the earliest Google Maps API developers, we noticed it was easy to incorporate the mapping functionality into our product. As we set about to completely rebuild our platform that launched earlier this month, our goal was to expand the ways users could take advantage of Google Maps’ latest API functionality. We’ve gone from tracking and sharing routes in our old platform to providing “Courses” in our new platform. Courses provide our users with real-time data like traffic patterns and temperature, and include “check-in” technology that helps them track workouts, share their progress, and compete in our new leaderboard against specific groups of people. They can compete with local clubs, friends, and most importantly against themselves and their own progress.

The Google Maps API allowed us to show the important information to our users in an easy to read format. Users can visit our site to find new cycling, running or walking routes by searching for the route while viewing it on the map. By using the Google Maps API were we able to incorporate the Street View API to create virtual tours of routes and the Elevation API to calculate how many feet you climb – and descend – during your workout. That familiarity, in addition to fantastic technology and features, makes the user experience both easier and more powerful.

Share|

London Calling

Map of the Week: London Calling
Why we like it: This map is a great way to promote a city and share its history. A brilliantly designed UI, that includes info windows with map cutouts. Additionally, it’s an elegant use of Styled Maps.

In honor of a big year for the city of London, the BBC Australia has created “London Calling” as a way to explore and celebrate London. For those of you who know your way around London, there’s a ‘drop-the-pin’ challenge, where users answer geography questions by placing a pin on the map in the right place. If you get stuck with particular questions, there’s also the option to reach out to the “London Calling” team.

For those that just want to explore London, the map is a great way to learn more about the city that has been getting a lot of attention in light of the Queen’s Jubilee and the upcoming 2012 Olympics. There’s even a chance to win prizes just by exploring the map!

From a design standpoint, this map is really great to look at. Two things about this map really stand out to us. Firstly, Styled Maps has been used to add a sepia effect that reflects the rich history of the city of London. Secondly, this is one of the first use cases where we’ve seen a custom info window that includes a cutout to reveal the highlighted feature below. A clever design choice that’s great to look at!

 

 

Share|

Map of the Week: Airbnb

Map of the Week: Airbnb

Why we like it: Airbnb has created a really great ‘search by map’ interface for their vacation rentals services. There’s also a really nice implementation of Google Street View to help renters make an informed decision about the rental and the surrounding neighborhood.

For a lot of people, the months of June, July, and August mean vacation time. As the price of just about everything rises, it can be difficult to find a unique and exciting place to stay within your budget. Luckily there’s Airbnb, which is a great way to find short-term accommodations rented out by private parties.

When it comes to finding the perfect place to stay, location is everything and Airbnb has invested heavily in creating mapping tools to make the right connections. A nice feature of the website is the ability to search by map for places to rent. The search interface is intuitive and easy to use.

For security reasons, you aren’t able to know the exact property or the exact address, but Airbnb places you in the right neighborhood so that you can use Street View to get a better idea of what’s around. A nice added UI feature is a “Rotate Street View” button, which automatically glides the imagery around the neighborhood.

Airbnb is a global operation and there’s a Google Map for everywhere there are Airbnb rentals (which is just about every corner of the globe). So wherever you’re travelling, there’s a good chance that Airbnb has rental for you and Google Maps API tools to help you find it. Good luck and safe travels on your next vacation!

via:googlegeodevelopers.blogspot.com

 

Share|

University of Washington: Campus Map

Map of the Week: University of Washington Campus Map
Why we like it: A beautiful use of interactive custom tiles, custom info windows, and the Google Directions API for embedded walk/bike/drive directions. A great example of a highly customized Google Map.

The beginning of May marks the start of college graduation in many places around the world. When the day comes for long awaited college graduation ceremonies, finding the events on campus can be daunting for visiting family and friends. Just in time for spring graduation ceremonies, comes this great Google Map from the University of Washington. For a large school like the University of Washington that occupies over 500 buildings and over 20 million gross square feet of space, a good map is a must to help visitors and students alike find their way around.

What sets this map apart is the high level of customization, most notably the well designed, custom interactive tiles that highlight university buildings and points of interest. University buildings stand-out from the map in deep purple and display a custom InfoWindow with additional information when you click on them. For sharing convenience, each building has its shortened url.

Overall the map looks great responds quickly as you search around campus. Embedded into the map are walking/biking/driving directions that allows users to route in between buildings and point of interest.

Just in case you won’t be visiting the University of Washington in the near future, here are some other campus maps worth checking out: Northeastern University, UCSD Bus Map, and Universidad de Murcia. Also, the Google Developers Showcase has this and many more campus maps worth checking out.

 

Share|