Google static maps get satellite view with tilt

Question

Didn't see anything in documentation so I figured I'd ask here:

For capturing image via google static maps api, is there any way to get views that have tilt? Doesn't seem to be any documentation on how to query for this.

Thanks.

2 follow up questions: Using google static street view image api, can you query with zoom of street view specified? I forgot what the second question was. — Murcielago, May 31 '16 at 06:22
I'd recommend filing a feature request at https://code.google.com/p/gmaps-api-issues/issues/list?can=2&q=apitype:Static%20type:Enhancement&sort=-stars&colspec=ID%20Type%20Status%20Summary%20Internal%20Stars — miguev, Jun 13 '16 at 09:50
Possible duplicate of [How to change view angle in Google Static Map?](http://stackoverflow.com/questions/32687617/how-to-change-view-angle-in-google-static-map) — miguev, Aug 29 '16 at 12:56

score 7 · Accepted Answer · edited May 23 '17 at 12:17

I've done a small example that could help you. It uses html2canvas.js and jquery.js I forked also what @mfirdaus did in another answer

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Capture map</title>
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #map {
      float: left;
      height: 640px;
      width: 640px;
    }
    .myButton1 {
      -moz-box-shadow: 0px 1px 0px 0px #fff6af;
      -webkit-box-shadow: 0px 1px 0px 0px #fff6af;
      box-shadow: 0px 1px 0px 0px #fff6af;
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
      background: -moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
      background: -webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
      background: -o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
      background: -ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
      background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
      filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23', GradientType=0);
      background-color: #ffec64;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      border-radius: 6px;
      border: 1px solid #ffaa22;
      display: inline-block;
      cursor: pointer;
      color: #333333;
      font-family: Arial;
      font-size: 15px;
      font-weight: bold;
      padding: 6px 24px;
      text-decoration: none;
      text-shadow: 0px 1px 0px #ffee66;
    }
    .myButton1:hover {
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64));
      background: -moz-linear-gradient(top, #ffab23 5%, #ffec64 100%);
      background: -webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%);
      background: -o-linear-gradient(top, #ffab23 5%, #ffec64 100%);
      background: -ms-linear-gradient(top, #ffab23 5%, #ffec64 100%);
      background: linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
      filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64', GradientType=0);
      background-color: #ffab23;
    }
    .myButton1:active {
      position: relative;
      top: 1px;
    }
  </style>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
  <script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
</head>

<body>

  <div id="map"></div>
  <a id="btnSave" class="myButton1">generate img</a>
  <a id="togCtrl" class="myButton1">toggle controls</a>
  <div id="img-out"></div>
  <script>
    var map;
    var transform;
    var toggler = true;

    function initialize() {
      var tokio = new google.maps.LatLng(35.6801453, 139.728792);

      var agbar = new google.maps.LatLng(41.4035482, 2.1894355);
      map = new google.maps.Map(document.getElementById('map'), {
        center: agbar,
        zoom: 18,
        mapTypeId: google.maps.MapTypeId.SATELLITE
      });


    }

     //forked of https://stackoverflow.com/a/24281734/4537906
     //get transform value

    $("#btnSave").click(function() {
      console.log('btnSave');
      var transform = $(".gm-style>div:first>div").css("transform");
      var comp = transform.split(","); //split up the transform matrix
      var mapleft = parseFloat(comp[4]); //get left value
      var maptop = parseFloat(comp[5]); //get top value
      $(".gm-style>div:first>div").css({ //get the map container.
        "transform": "none",
        "left": mapleft,
        "top": maptop,
      })
      html2canvas($('#map'), {
        useCORS: true,
        onrendered: function(canvas) {
          var dataUrl = canvas.toDataURL('image/png'); //ready to use with the below commented line
          //location.href = dataUrl; //this opens the image as an url into your browser
          $(".gm-style>div:first>div").css({
            left: 0,
            top: 0,
            "transform": transform
          })
          $("#img-out").append(canvas);
        }
      });
    });
    $("#togCtrl").click(function() {

      map.setOptions({
        disableDefaultUI: toggler,
        disableDoubleClickZoom: toggler,
        draggable: !toggler,
        scrollwheel: !toggler
      });
      toggler = !toggler;

    })
  </script>

  <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initialize">
  </script>
</body>

</html>

Thanks for your answer. I was hoping I had missed something in the google maps docs for a straightforward way to do it. But this is a functional workaround. — Murcielago, Jun 11 '16 at 16:20

Google static maps get satellite view with tilt

1 Answers1

Linked