title: 3D Earth globe on google maps API JS
body: <p><em>Short question:</em></p>
  
  <p>Is there a way to represent the 3D earth globe with google maps web API?</p>
  
  <hr>
  
  <p>On <a href="https://www.google.fr/maps/@18.4980181,7.5767451,3z" rel="noreferrer">google maps</a>, we can now visualize the earth as a globe in 3D.</p>
  
  <p>Here is an example:</p>
  
  <p><a href="https://i.stack.imgur.com/AIxIt.png" rel="noreferrer"><img src="https://i.stack.imgur.com/AIxIt.png" alt="consult https://www.google.fr/maps/@18.4980181,7.5767451,3z"></a></p>
  
  <hr>
  
  <p>I am developing an HTML project with google maps API and I would like to use this earth representation on my website.</p>
  
  <p>However, I do not find any topic about this subject.</p>
  
  <p>Is there a way to represent the 3D earth globe with google maps API as on the <a href="https://www.google.fr/maps/@18.4980181,7.5767451,3z" rel="noreferrer">google maps web site</a>3D?</p>
  
  <hr>
  
  <p>Here is an example of my map (it is of course an extract of my code to clarify the question):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var map;
        function initMap() {
          map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: -34.397, lng: 150.644},
            zoom: 8
          });
        }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>      /* 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;
        }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;meta name="viewport" content="initial-scale=1.0"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;div id="map"&gt;&lt;/div&gt;
  
      &lt;script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
      async defer&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is a picture of my map on my website:</p>
  
  <p><a href="https://i.stack.imgur.com/vODQK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/vODQK.png" alt="enter image description here"></a></p>
  
  <p>This map only represents the earth as a planisphere. How may I have the same result as on the google maps web site?</p>
  
  <hr>
  
  <p><strong>Notice</strong>:
  I found this <a href="https://mobile.twitter.com/googlemaps/status/1025130620471656449" rel="noreferrer">post</a> in twitter witch introduces the feature on the google maps web site. </p>