Take a snapshot of a specific area under google map javascript

Question

I'm trying to take a picture of an area enclosed in a rectangle drawn on a google map. Can I take a picture of the area under the rectangle? I searched for answers but did not find any useful information.

Rectangle drawn on a map.

I tried to take a picture of the area under the rectangle using the static map API, indicating the center of the map, zoom level, image width and image height. like https://maps.googleapis.com/maps/api/staticmap?center=CENTER RECTANGLE PICTURE & zoom = ZOOM LEVEL OF MAP & size = WIDTH AND HEIGHT OF RECTANGLE & maptype = satellite & key = API KEY

Here is the code I tried,

var zoom = map.zoom; var centre = rectangle.getBounds().getCenter(); //rectangle is the shape drawn on the map var spherical = google.maps.geometry.spherical; bounds = rectangle.getBounds(); //rectangle is the shape drawn on the map cor1 = bounds.getNorthEast(); cor2 = bounds.getSouthWest(); cor3 = new google.maps.LatLng(cor2.lat(), cor1.lng()); cor4 = new google.maps.LatLng(cor1.lat(), cor2.lng()); width = spherical.computeDistanceBetween(cor1,cor3); height = spherical.computeDistanceBetween( cor1, cor4); 

Now I uploaded the image using this URL,

" https://maps.googleapis.com/maps/api/staticmap?center= " + centerre.lat () + "," + centerre.lng () + "& zoom =" + zoom + "& size =" + width + "x" + height + "& maptype = satellite & key = API_KEY"

Source URL: " https://maps.googleapis.com/maps/api/staticmap?center=40.804197008355914,-74.11213619168848&zoom=20&size=26x37&maptype=satellite&key=API_KEY "

The output image that I received

My expected result

I got the image, but the image does not include the entire area enclosed in the rectangle (it is too small). what am I doing wrong? Are there any other ways to do this?

Answer 1

The main error you have in your code is that the width and height parameters of the static maps API should be in pixels. You are currently calculating the distance in meters and passing it to the URLs of static maps instead of pixels.

I created an example based on your sample code, and was able to create the correct static map URL. Please see my example. The distanceInPx function is the most important thing. Create a rectangle using the drawing manager and click the Show static map link. Also note that the Static Maps API is limited by the size of an image of 640x640 pixels in the standard layout, so you cannot create a link for large rectangles.

 function initMap() { var map = new google.maps.Map(document.getElementById('map'), { center: {lat: 28.45765, lng: -16.363564}, zoom: 21, mapTypeId: google.maps.MapTypeId.SATELLITE }); var drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.RECTANGLE, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: ['rectangle'] } }); drawingManager.setMap(map); google.maps.event.addListener(drawingManager, "rectanglecomplete", function(rectangle){ function distanceInPx(pos1, pos2) { var p1 = map.getProjection().fromLatLngToPoint(pos1); var p2 = map.getProjection().fromLatLngToPoint(pos2); var pixelSize = Math.pow(2, -map.getZoom()); var d = Math.sqrt((p1.x-p2.x)*(p1.x-p2.x) + (p1.y-p2.y)*(p1.y-p2.y))/pixelSize; return Math.round(d); } var zoom = map.zoom; var centre = rectangle.getBounds().getCenter(); //rectangle is the shape drawn on the map var spherical = google.maps.geometry.spherical; bounds = rectangle.getBounds(); //rectangle is the shape drawn on the map var cor1 = bounds.getNorthEast(); var cor2 = bounds.getSouthWest(); var cor3 = new google.maps.LatLng(cor2.lat(), cor1.lng()); var cor4 = new google.maps.LatLng(cor1.lat(), cor2.lng()); var width = distanceInPx(cor1, cor4); var height = distanceInPx(cor1, cor3); var imgUrl = "https://maps.googleapis.com/maps/api/staticmap?center=" + centre.lat() + "," + centre.lng() + "&zoom=" + zoom + "&size=" + width + "x" + height + "&maptype=satellite&key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU"; var aElem = document.getElementById("staticLink"); aElem.setAttribute("href", imgUrl); aElem.style.display="block"; }); } 

 #map { height: 100%; } html, body { height: 95%; margin: 0; padding: 0; } 

 <div id="map"></div> <a id="staticLink" href="#" target="_blank" title="Show static map" style="display:none;">Show static map</a> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&libraries=drawing&callback=initMap" async defer></script> 

This example is also available in jsbin: http://jsbin.com/humuko/edit?html,output

Hope this helps!