Gone are the days when users were impressed with a marker on a map. The Maps Zen blog post series covers integrations of Google Maps APIs to help your apps provide great maps user experiences. What’s a zen pattern? Simply put, a design pattern that results in harmonious user experiences.
Movie & television directors have fascinating jobs — shooting movies seems like a lot of fun, right? The idea that you’re in control of the camera, framing each shot and creating an evocative scene can be really inspirational. Maps developers have the same creative direction over UI. We get to build maps scenes to create evocative user experiences.
The Maps API provides a sophisticated camera, which enables you to frame your maps in three dimensions. Its has expected capabilities such as projections, zooming and panning but additionally you can rotate, tilt and animate the camera. With that in mind, here’s a map — one that you’ve seen many times before. It’s top down, displaying a certain region, at a pre-determined zoom level.
Lets take that same location and adjust its bearing and tilt. This feels like much more like a real place. The user feels a greater sense of depth; a feeling that there’s a bigger world out there.
When directing the camera for something like a house hunting app, the map can be presented in a way that shows more of the surrounding area. First, the map type has been changed to satellite mode and as a result, the nearby beach is more impactful.
As we select the next house in the search results, the camera animates to its next location and during this journey, we’re effectively flying over the area retaining location context. There are also changes to the zoom, bearing and tilt. Once again, the user gets a strong sense of depth and a feeling of exploration. This is crucial in a house hunting scenario since it’s all about location!
To accomplish such camera angles, check out the bearing and tilt methods on the CameraPosition builder. When transitioning from one CameraPosition to another, you’ll achieve a greater impact if you animate it to place rather that instantly moving there — to do this, use the animateCamera method on the GoogleMap object.
CameraPosition.Builder target(LatLng location) zoom(float zoom) bearing(float bearing) tilt(float tilt) map.AnimateCamera( CameraUpdate.newCameraPosition(cameraPosition), durationInMs, callback);
Camera framing and animations are powerful tools. As a camera director, it's important frame your shot in order to evoke the desired emotion.