New pricing changes went into effect on July 16, 2018. For more information, check out the Guide for Existing Users.

New Renderer

Read the documentation or view this example fullscreen.

var map, marker, infoWindow;
var SYDNEY = {lat: -33.8798, lng: 151.2089};
var OPERA_HOUSE = {lat: -33.8570, lng: 151.2150};
function initMap() {
  // Create a map in the usual way.
  map = new google.maps.Map(
      document.getElementById('map'), {center: SYDNEY, zoom: 12});

  // Create a marker. Markers behave smoothly with the beta renderer.
  marker = new google.maps.Marker({position: OPERA_HOUSE, map: map});

  // Create info window content.
  var content = document.createElement('div');
  content.textContent = 'new renderer ';
  var zoomInButton = document.createElement('button');
  zoomInButton.textContent = 'zoom in';
  content.appendChild(zoomInButton);

  // Create open an info window attached to the marker.
  infoWindow = new google.maps.InfoWindow({content: content});
  infoWindow.open(map, marker);

  // When the zoom-in button is clicked, zoom in and pan to the Opera House.
  // The zoom and pan animations are smoother with the new renderer.
  zoomInButton.onclick = function() {
    map.setZoom(Math.max(15, map.getZoom() + 1));
    map.panTo(OPERA_HOUSE);
  };
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
    </script>
      

Try it yourself

Hover at top right of the code block to copy the code or open it in JSFiddle.

<!DOCTYPE html>
<html>
  <head>
    <title>New Renderer</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
var map, marker, infoWindow;
var SYDNEY = {lat: -33.8798, lng: 151.2089};
var OPERA_HOUSE = {lat: -33.8570, lng: 151.2150};
function initMap() {
  // Create a map in the usual way.
  map = new google.maps.Map(
      document.getElementById('map'), {center: SYDNEY, zoom: 12});

  // Create a marker. Markers behave smoothly with the beta renderer.
  marker = new google.maps.Marker({position: OPERA_HOUSE, map: map});

  // Create info window content.
  var content = document.createElement('div');
  content.textContent = 'new renderer ';
  var zoomInButton = document.createElement('button');
  zoomInButton.textContent = 'zoom in';
  content.appendChild(zoomInButton);

  // Create open an info window attached to the marker.
  infoWindow = new google.maps.InfoWindow({content: content});
  infoWindow.open(map, marker);

  // When the zoom-in button is clicked, zoom in and pan to the Opera House.
  // The zoom and pan animations are smoother with the new renderer.
  zoomInButton.onclick = function() {
    map.setZoom(Math.max(15, map.getZoom() + 1));
    map.panTo(OPERA_HOUSE);
  };
}
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Send feedback about...

Maps JavaScript API
Need help? Visit our support page.