New Renderer

Overview

The Google Maps JavaScript API team has developed a new renderer which is replacing the previous renderer.

Read the source code or view this example full screen.

Features

• Animations on zoom and pan
• Markers, info windows, and polygons with do not blink during zoom.
• OverlayViews can hook into the animation frame loop, and render at fractional-zoom levels. This allows arbitrary DOM elements to animate in sync with the map.
• Improved support for touch gestures
• Tiles load during touch pan and zoom.
• Touch works properly on Internet Explorer and Edge browsers.
• When the map is resized, the map center is fixed
• The full-screen control now preserves center.
• There is no longer any need to trigger the resize event manually.

How to opt-out (until August 2018)

The previous renderer remains available in version 3.31 of the Maps JavaScript API until August 2018. To use it, update the script tag that loads the API. Add the following parameter:

&v=3.31

Your script tag should now look similar to the following example:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=3.31>

Read more about versions here.

How to provide feedback

Report a bug or feature request on the issue tracker.

Troubleshooting

My OverlayView is not synchronized with the map animation?

• Custom markers must be drawn during the draw() method. This is called on each animation frame.
• Custom markers position must be calculated using the projection's fromLatLngToDivPixel() method. Note that the scale may be non-integer during a zoom animation.
• See the custom popup sample code.