0

I am using an API which returns exact location in Google Map by taking 3 parameters Latitude,Longitude & Zoom parameters.Although my requirement is that I need an image in response so how can we return Google Map as an image.

Below is the code I am using for it.Anybody can help me how can I return the Google map as image from here.

 <script>

 function initMap() {
    var loaction = new google.maps.LatLng(20.59, 78.96);

    var map = new google.maps.Map(document.getElementById('map'), {
      center: loaction,
      zoom: 3
    });

    var coordInfoWindow = new google.maps.InfoWindow();
    coordInfoWindow.setContent(createInfoWindowContent(loaction, map.getZoom()));
    coordInfoWindow.setPosition(loaction);
    coordInfoWindow.open(map);

    map.addListener('zoom_changed', function() {
      coordInfoWindow.setContent(createInfoWindowContent(loaction, map.getZoom()));
      coordInfoWindow.open(map);
    });
  }

  var TILE_SIZE = 256;

  function createInfoWindowContent(latLng, zoom) {
    var scale = 1 << zoom;

    var worldCoordinate = project(latLng);

    var pixelCoordinate = new google.maps.Point(
        Math.floor(worldCoordinate.x * scale),
        Math.floor(worldCoordinate.y * scale));

    var tileCoordinate = new google.maps.Point(
        Math.floor(worldCoordinate.x * scale / TILE_SIZE),
        Math.floor(worldCoordinate.y * scale / TILE_SIZE));

    return [
     // 'Location, IL',
      //'LatLng: ' + latLng,
      'Zoom level: ' + zoom,
     // 'World Coordinate: ' + worldCoordinate,
     // 'Pixel Coordinate: ' + pixelCoordinate,
      //'Tile Coordinate: ' + tileCoordinate
    ].join('<br>');
  }

  // The mapping between latitude, longitude and pixels is defined by the web
  // mercator projection.
  function project(latLng) {
    var siny = Math.sin(latLng.lat() * Math.PI / 180);

    // Truncating to 0.9999 effectively limits latitude to 89.189. This is
    // about a third of a tile past the edge of the world tile.
    siny = Math.min(Math.max(siny, -0.9999), 0.9999);

    return new google.maps.Point(
        TILE_SIZE * (0.5 + latLng.lng() / 360),
        TILE_SIZE * (0.5 - Math.log((1 + siny) / (1 - siny)) / (4 * Math.PI)));
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDRQ2DkxY225R-wooSMYM4Mh_tKKqhZhv0&callback=initMap&region=IN">
</script>
shweta_kaushish
  • 141
  • 1
  • 3
  • 17
  • 2
    You should try google static maps – Taylor Rahul May 07 '18 at 05:51
  • 2
    https://developers.google.com/maps/documentation/maps-static/intro – Taylor Rahul May 07 '18 at 05:51
  • I have tried it,but it's not returning as expected..I need to integrate this in some toll which accepts only images in response..The above API is working perfect only thing is that I need to return image instead of Map by modifying the return code a bit. – shweta_kaushish May 07 '18 at 05:53
  • https://stackoverflow.com/questions/16235161/save-current-google-map-as-image see this link it will allow you to save the rendered map as an image. Please check the answer which has 31 votes ups – Taylor Rahul May 07 '18 at 05:57
  • may be you can refer to this page https://www.aspsnippets.com/Articles/Export-Convert-Google-Maps-to-Image-using-Google-Maps-API-V3-Static-Maps-API.aspx – Pajri Aprilio May 07 '18 at 06:14
  • Above code I have posted is working as expected,only thing I am not getting how can I modify the code a bit to return image on place of Google Map! – shweta_kaushish May 07 '18 at 12:15
  • I am getting the tiles from above code perfectly,Now I am looking to stitch all tiles together into single png file.Any suggestions over same? – shweta_kaushish May 11 '18 at 12:11

0 Answers0