Сохранить текущую карту Google как изображение

Ответ 1

Вы можете использовать API-интерфейс google maps static: https://developers.google.com/maps/documentation/staticmaps/

Вы можете получить параметры, которые вам нужно передать на статические карты api (например, центр, видимый регион и т.д.) из javascript api.

Ответ 2

Если вы хотите сохранить больше, чем google maps, то статический API позволяет (например, настраиваемые наложения, наложенные на него слишком сложные/большие для прохождения через последовательность запросов), вы можете экспортировать контейнер карты в холст, используя что-то вроде html2Canvas (http://html2canvas.hertzen.com/), затем преобразуйте его в URL-адрес данных и сделайте с ним, как хотите.

function saveMapToDataUrl() {

    var element = $("#mapDiv");

    html2canvas(element, {
        useCORS: true,
        onrendered: function(canvas) {
            var dataUrl= canvas.toDataURL("image/png");

            // DO SOMETHING WITH THE DATAURL
            // Eg. write it to the page
            document.write('<img src="' + dataUrl + '"/>');
        }
    });
}

Я считаю, что вам нужно установить для параметра useCORS значение true, чтобы функция могла загружать изображения из Google.

Недостатком этого подхода является то, что он может оставить вас с мегабайтом данных, сидящих на вашей странице.

Я попытался использовать этот подход для EXPORT для карты для загрузки изображения, но столкнулся с проблемами в том, как получить этот образ человеку в хорошей усадьбе. Вы можете использовать гиперссылку с атрибутом href, установленным для созданного вами dataUrl, но имя файла не может быть установлено, если вы не используете атрибуты HTML, такие как download = "filename.png", что для меня было проблематично для разных браузеров. Другой подход заключается в том, чтобы отправить dataUrl на сервер для того, чтобы сервер вытащил его так, как ему нужно, но загрузка большого изображения только для его загрузки снова кажется странным способом справиться с этим.

Ответ 3

Использовать API:

var currentPosition=map.getCenter();
return "http://maps.google.com/maps/api/staticmap?sensor=false&center=" +
  currentPosition.lat() + "," + currentPosition.lng() +
  "&zoom="+map.getZoom()+"&size=512x512&markers=color:green|label:X|" +
  currentPosition.lat() + ',' + currentPosition.lng();

Ответ 4

Вы можете найти полезные статические карты api, которые напрямую генерируют изображения.

https://developers.google.com/maps/documentation/staticmaps/

как этот - это изображение:

и есть такие инструменты, как: http://gmaps-utility-library-dev.googlecode.com/svn/tags/snapshotcontrol/1.0/examples/optionsWizard.html

ref: Карт Google Карт?

Ответ 5

Вот прямой url

Для аннотаций

https://maps.googleapis.com/maps/api/staticmap?center=23.03,72.58&zoom=6&size=640x400&path=weight:3|color:blue|enc:aofcFz_bhVJ[[email protected]@[email protected]@uA%[email protected]@[email protected]@[email protected]@[email protected]@[email protected]@[email protected]@[email protected]@[email protected]@[email protected]@[email protected]@[email protected]@[email protected]@@]JyKA}EC{[email protected]?IGKCeGA{CAyCAyEAwEBaFAkJ?yGEyAIiLAiB?{@BcBJ}@@[email protected]@[email protected]@fOD%60C?|@[email protected]^S%60AI%60A&key=API_KEY

Для спутника

https://maps.googleapis.com/maps/api/staticmap?maptype=satellite&center=37.530101,38.600062&zoom=14&size=640x400&key=YOUR_API_KEY

Для стилизованной карты

http://maps.googleapis.com/maps/api/staticmap?center=Australia&size=640x400&style=element:labels|visibility:off&style=element:geometry.stroke|visibility:off&style=feature:landscape|element:geometry|saturation:-100&style=feature:water|saturation:-100|invert_lightness:true&key=YOUR_API_KEY

Вы можете напрямую использовать это, изменив необходимые параметры, вам просто нужно API_KEY

Ответ 6

Вы можете использовать два способа: используя html2canvas для создания изображения или API статических карт Google.

API статических карт Google

function mapeado(geocoder, map, infowindow) {
    var staticMapUrl = "https://maps.googleapis.com/maps/api/staticmap";

    //Set the Google Map Center.
    staticMapUrl += "?center=" + document.getElementById('lat').value + "," + document.getElementById('lng').value;

    //Set the Google Map Size.
    staticMapUrl += "&size=640x480&scale=2";

    //Set the Google Map Type.
    staticMapUrl += "&maptype=hybrid";

    //Set the Google Map Zoom.
    staticMapUrl += "&zoom=" + mapOptions.zoom;

    //Loop and add Markers.
    staticMapUrl += "&markers=" + document.getElementById('lat').value + "," + document.getElementById('lng').value;

    //Display the Image of Google Map.
    var imgMap = document.getElementById("imgMap");

    $("#imgMap").attr("src", staticMapUrl);
    return imgMap + "png";
}

html2canvas

function convertasbinaryimage() {
    html2canvas(document.getElementById("map"), {
        useCORS: true,
        onrendered: function (canvas) {
            var img = canvas.toDataURL("image/png");
            img = img.replace('data:image/png;base64,', '');
            var finalImageSrc = 'data:image/png;base64,' + img;
            $('#googlemapbinary').attr('src', finalImageSrc);
         }
    });
}

Ответ 7

function Export() 
{          

 var staticMapUrl = "https://maps.googleapis.com/maps/api/staticmap"; 

        //Set the Google Map Center.        
        staticMapUrl += "?center=" + mapOptions.center.G + "," +     mapOptions.center.K;

        //Set the Google Map Size.
        staticMapUrl += "&size=500x400"; 
        //Set the Google Map Zoom.
        //staticMapUrl += "&zoom=" + mapOptions.zoom;
         staticMapUrl += "&zoom= 19";
          staticMapUrl += "&style=visibility:on";         

          for(var n in polygons)
          {        
           staticMapUrl += "&path=color:0x0x23537C%7Cfillcolor:0x0x23537C|weight:0|"+polygons[n];
          }         

        //Set the Google Map Type.
        staticMapUrl += "&maptype=" + mapOptions.mapTypeId;
        staticMapUrl += "&markers=icon:"+iconpath+"%7c"+latitude+","+longitude;
        staticMapUrl += "&scale= 1";

        for (var j in markers) { 
           if (markers[j]!=='')
           {          
            var image=imagnameewithpath+".png";     
            staticMapUrl += "&markers=icon:"+image+"%7c"+markers[j]+"|";

           }           

      var canvas=document.createElement('canvas');
      var context = canvas.getContext('2d');
      var imageObj = new Image();
      imageObj.crossOrigin = "crossOrigin";  // This enables CORS  
      imageObj.onload = function() {
       canvas.width=imageObj.width;
       canvas.height=imageObj.height;
        context.drawImage(imageObj, 0, 0,imageObj.width,imageObj.height);
        var dataurl=canvas.toDataURL('image/png');
         var imgMap = document.getElementById("imgMap");
        imgMap.src = dataurl;        
      };
      imageObj.src = staticMapUrl;

    }