Posted by Ankur Kotwal, Developer Advocate at Google

Editor's Note: 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.


Maps are awesome because they show us where to go. But how are your users getting to their chosen destination? The Directions API web service provides step-by-step directions from point A to B and can get your user where they’re going. Being a web service, it is protected by an API key and thus it should not consumed in the mobile app - proxy it via your server as shown here.

The Directions API can give you walking, cycling and driving directions as expected. But it also gives great public transport directions. When guiding users to a destination, it’s best to show them the path on a map.

Polylines are a great way to show a path but rather than have them simply appear on the map, it’s nicer to animate them in place. In the image below, the intended path grows providing a clear distinction about the direction of travel.

So now we’re showing users where to go and how to get there. But once they’re at their destination, our app’s work is not done. In Shibuya, a city in Tokyo, Japan, there are many tall buildings whose shops visible from the road. It can be really hard to tell which one of those is the destination. In effect, users can be left feeling lost after they get to their destination. Thankfully, there’s a Maps API for that!

Street View is a great way to visualize the user’s destination, or any address really. Adding Street View adds a real-world visual element to your app and provides meaningful context for users. Users will generally expect that they can interact with a Street View since they’re likely to pan and scan around the location so be sure to leave not to disable interactivity with the StreetViewPanorama.

You can add a StreetViewPanorama into your app by including it in your XML layouts, like so.

<fragment
    android:id="@+id/streetview"
    android:name=
        "com.google.android.gms.maps.StreetViewPanoramaFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

You can provide a location for the StreetViewPanorama using the following Java code.

streetViewPanorama.setPosition(targetLatLng);
StreetViewPanoramaCamera camera =
    new StreetViewPanoramaCamera(zoom, tilt, bearing);
mStreetViewPanorama.animateTo(camera, duration);

With guided directions and the addition of Street View in your apps, users are given a visual representation of their destination. They’re no longer lost on the way there and they’re not lost when they get there.

Posted by Ankur Kotwal, Developer Advocate at Google

Editor's Note: 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.


Markers are much more useful than identifying points on a map. Markers can also be used as a way to visually convey information about a place. If a user is searching for a well rated restaurant, they’d fire up your app to find that there’s a bunch of restaurants in their vicinity. But it’s not easy to tell which ones are actually worth visiting. To see the ratings for each place, they’d end up having to tap each one first.

Here’s an how marker selection and marker animations can be a great way to show this information. In this example, markers that lack colour rate poorly and the vibrant colorful markers are the highly rated ones. There’s also animated steam on some markers also helping to highlight the best rated restaurants!

To achieve the steam animation, the marker icon is being changed by calling the setIcon() method periodically. A delay of 32ms roughly corresponds to 30 marker icon updates a second — animating the icon at 30 frames per second.

mAnimHandler.post(new Runnable() {
@Override
public void run() {
marker.setIcon(mSteamFrames.nextFrame());
// Next frame in 32 ms
mAnimHandler.postDelayed(this, 32);
}
});

To desaturate the marker icons, a ColorMatrixColorFilter from the Android framework being used. First, setup the color filter based on the restaurant rating scale via a ColorMatrix. In this case, any restaurant that has a 3 star rating will be presented as having an entirely grayscale icon. Restaurants with a 4.5 star or higher rating will be presented in full color. The restaurant scale is set it to a Paint object and the filter is applied to the marker image using a canvas.

ColorMatrix desatMatrix = new ColorMatrix();
desatMatrix.setSaturation(restaurantRating);

ColorFilter paintColorFilter = new
ColorMatrixColorFilter(desatMatrix);
Paint paint = new Paint();

paint.setColorFilter(paintColorFilter);

Canvas canvas = new Canvas(newImage);
canvas.drawBitmap(oldImage, 0, 0, paint);

Markers are great for showing points on a map but sometimes you can end up with too many. In this case, we have too well rated many restaurants around us - sure, it’s a nice problem to have but it’s not helping the user choose a restaurant. In such situations, you need to display many markers but still keep the view comprehensible. We’re going to look at two ways to overcome these issues.

The first is through the use of marker clustering. As the zoom levels of the map change, markers are aggregated making for a much more digestible view. Now as the map zooms out, markers will combine, showing how many restaurants are in the surrounding areas.

This visual effect may seem like a lot of work, but it is not. The Android Maps Util library provides a four-step implementation of marker clustering:

1. Add the library to your gradle config.

compile 'com.google.maps.android:android-maps-utils:0.3+'

2. Implement ClusterItem interface in your main data class.

public interface ClusterItem {
LatLng getPosition();
}

3. Instantiate the cluster manager and register it for a couple of map listeners.

mClusterManager = new ClusterManager<>(this, mMap);
mMap.setOnCameraChangeListener(mClusterManager);
mMap.setOnMarkerClickListener(mClusterManager);

4. Replace your marker management code with calls to the cluster manager - the cluster manager will manage adding and removing the markers for you.

mClusterManager.addItem(clusterItem);

5. You can optionally customise the effect further by providing custom aggregate markers (showing images instead of a count for example).

Let’s look at the second method to show marker aggregation - it looks really cool! Here, the count of markers are replaced with a heat map showing the concentration of these markers.

Achieving this effect is also just four simple steps using the Android Maps Utils library, thanks to its heatmaps.

1. Add the library to your gradle config.

compile 'com.google.maps.android:android-maps-utils:0.3+'

2. Instantiate a HeatMapTileProvider and pass it your LatLngs.

mHeatmapTileProvider = new HeatmapTileProvider.Builder()
.data(mLatLngCollection)
.build();

3. Use it to create a map overlay.

mTileOverlay = mMap.addTileOverlay(
new TileOverlayOptions().tileProvider(mHeatmapTileProvider));

4. You can optionally customize this further by specifying the gradient and the radius of the heatmap.

It’s worth keeping in mind that information overload is a common problem with mobile apps. Location apps, in particular suffer from poor user experiences when dealing lots of places. The Android Maps Utils library offers beautiful visualizations enabling you to build amazing maps.

Posted by Ankur Kotwal, Developer Advocate at Google

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.

Posted by Ankur Kotwal, Developer Advocate at Google

Gone are the days when users were impressed with a marker on a map. This is the first in a series of Maps Zen blog posts covering 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.
A common UI pattern is showing a collection of places. At first glance it seems pretty easy. You could just throw together a list of place names and you’re done, right? Its not quite that simple. Here are two ways to visualize locations using the Google Maps Android API.

First is on the map itself. Here, we remove the UI and let the map markers be the primary point of interaction. This makes for a very immersive experience, however it's only effective if the markers fit comfortably on one screen. If the user has to zoom or scroll, the emphasis of your collection is lost. For example, “Train stations near me” works well since the results are co-located.

The second method of displaying a list of places that are spread out —it uses map thumbnails. The Maps Android API offers Lite mode — an ideal mode for such scenarios.

Lite mode provides a static map; effectively just the image of a map without the ability for the user to pan, or tilt the camera. This limited functionality, however, comes with some big benefits — it’s super fast and uses less memory. Additionally, you still get click listeners, markers and polylines. Lite mode makes it possible to show lists of maps — they are just images so you can instantiate many of these.

Enabling Lite mode is simple. If you’re creating your maps in Java, on creation, simply specify litemode in the GoogleMapOptions object as shown below.

GoogleMapOptions options = new GoogleMapOptions().liteMode(true);

If your map is declared via layouts, add the xml property in your layouts as shown below. Be sure to include the map namespace since it makes the litemode attribute available.

<fragment xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    android:name="com.google.android.gms.maps.MapFragment"
    android:id="@+id/map"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    map:liteMode="true"/>

At some point, you may need to replace the lite mode map with the fully-interactive one. In that situation, you can gracefully transition into a regular map triggered by a touch event. In the image below, Android Lollipop transitions are being used across screens. You can see the big map dissolve and the grid implode in place. For users on older versions of Android, a reasonable fallback is to instantiate a MapFragment and animate it into place.

With this technique, we’re able to mix and match Lite mode and regular maps seamlessly. I hope you’ve now seen the lite — Lite mode that is. It enables you to show multiple maps simultaneously whilst keeping your app performant.