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.