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.
3
-
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– Murcielago2016-05-31 06:22:43 +00:00Commented May 31, 2016 at 6:22
-
1I'd recommend filing a feature request at code.google.com/p/gmaps-api-issues/issues/…miguev– miguev2016-06-13 09:50:36 +00:00Commented Jun 13, 2016 at 9:50
-
Possible duplicate of How to change view angle in Google Static Map?miguev– miguev2016-08-29 12:56:03 +00:00Commented Aug 29, 2016 at 12:56
Add a comment
|
1 Answer
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>
1 Comment
Murcielago
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.