Skip to content
Products
Solutions
By industry
By use case
Resources
Products
Solutions
By industry
By use case
Resources
Products
Solutions
By industry
By use case
Resources
New JavaScript Street View renderer brings rendering improvements and better mobile support
Elena Kelareva
Product Manager, Google Maps APIs
Aug 18, 2016
Try Google Maps Platform
Unlock access to real-world data and insights with a monthly $200 Google Maps Platform credit.
Get started

Street View is one of Google Maps’ most loved features, providing users with a way to explore and experience the world around them. Developers all over the world use Street View in the Google Maps JavaScript API to make their apps more unique and exciting, giving their users a sense of what it’s like to visit a place in real life.

Today we’re making Street View even better, especially on mobile devices, by launching a new Street View renderer in the Google Maps JavaScript API. Read on for the full details of what we’ve improved!

Better display

Smoother Transitions

Transitions from one point to another in Street View now include more animation frames, creating the effect of gliding smoothly to the next location. Transitions in the old renderer looked like jumping from one location to another.

Old renderer

Video showing the old Street View UI

New renderer

Video showing the new and improved Street View UI

Smoother Loading Animations

The old renderer repeats images while loading new content, resulting in a stuttering effect. The new renderer uses lower resolution imagery while loading, resulting in a smoother animation when rotating an image in Street View.

Old renderer

Video showing the old Street View

 New renderer

Video showing new Street View features

Object modeling improvements

Objects in Street View look better in the new renderer because it builds a 360-degree model that considers all possible perspectives. For example, this high rise building has wavy lines in the old renderer, as opposed to crisp lines in the new renderer.

Old renderer

A high rise building in the old street view renderer with wavy lines

New renderer

A high rise building in the new street view renderer with straight lines

In another example: for imagery on an incline, such as a street with a steep hill, the new renderer corrects the objects to be vertical, whereas the old renderer would have shown the objects at an angle.

Old renderer

A street with a steep hill shown with the old renderer with objects at an angle.

New renderer

A street with a steep hill shown on the new renderer that corrects the objects to be vertical.

Better mobile support

WebGL imagery

The new renderer uses WebGL (on browsers that support it) which results in a higher frame rate and better rendering, especially on mobile devices. On mobile devices, the old renderer would display a fish-eye projection of the image, whereas WebGL allows us to present a rendered sphere that looks as it would in reality. For example, the street in the image below is straight, but the old renderer made it look curved on mobile devices.

Old renderer

A street in the old renderer that is curved on a mobile device.

New renderer

A street in the new renderer that is straight on a mobile device.

Touch support

As mobile web usage grows, users expect familiar touch-based interactions to work everywhere. The new renderer supports the same natural touch-based gestures on mobile which have been available in the Google Maps Android app: pinch-to-zoom and double-tap-to-go. In the old renderer, zooming was only available through the +/- buttons, and movement was only possible by clicking the arrows on the ground.

Motion tracking on mobile devices

Mobile devices give developers the opportunity to provide their users with more natural ways to explore and interact with their applications. We’ve enabled support for device orientation events on Street View so that users on mobile devices can look around in Street View by moving their phone. Developers have the option to turn this off if they prefer. Please see the developer documentation for more details, or open the documentation link on a mobile device to see motion tracking in action.

Better controls

X Forward

When using a desktop device with a mouse or trackpad, users will see a small "X" at the cursor location that indicates the next camera location if they choose to move forward. Arrows indicate the direction of movement. Wall rectangles identify the direction the camera will point towards.

Next image targets

New map controls in web, including arrows indicating the direction of movement.

Next centered image target

New map controls in web, including the ability to focus on the next element.

Cleaner street names, labels and targets

Street names and labels are now separated from controls, removing overlap issues and allowing for clean display in right-to-left and left-to-right languages.

Old renderer

Old renderer showing street names overlapping with map controls.

New renderer

New renderer that fixes the overlap issue with street names or labels and map controls.

We hope you enjoy using the new and improved Street View renderer! Also a big thank you to all the developers who use the Google Maps JavaScript API and provide feedback via the issue tracker. Getting feedback from developers is vital for us to be able to keep improving our products, so if you have any bug reports or feature requests, please let us know!

For more information on Street View in the Google Maps JavaScript API, please see the developer documentation.

Clay cityscape
Clay cityscape
Google Maps Platform
Get going with Google Maps Platform