You're all set!

To start developing, please head over to our developer documentation.

Activate the Google Maps JavaScript API

To get you started we'll guide you through the Google Developers Console to do a few things first:

  1. Create or choose a project
  2. Activate the Google Maps JavaScript API and related services
  3. Create appropriate keys
Continue

Experimental Renderer

Overview

The Google Maps JavaScript API team is developing a new renderer which will eventually replace the current renderer. An experimental version is now available. Follow the instructions on this page to opt in for testing the experimental version.

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-in

To opt-in to the experimental renderer, update the script tag that loads the API. Add the following parameter to the end of the URL:

&v=3.exp

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.exp>

Update the script tag in a test or internal app to test whether your app works as expected.

How to opt-out

To opt-out of the experimental renderer, use the release version (3.31) of the Google Maps JavaScript API. To do this, 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.

Send feedback about...

Google Maps JavaScript API
Google Maps JavaScript API
Need help? Visit our support page.