Если вы хотите сохранить больше, чем позволяет статический API карт Google Maps (например, пользовательские наложения, нарисованные на нем, слишком сложные / большие, чтобы проходить через строку запроса), вы можете экспортировать контейнер карты на холст, используя что-то вроде 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.
Недостатком этого подхода является то, что он может оставить на вашей странице около мегабайта данных.
Я пытался использовать этот подход, чтобы экспортировать карту в изображение для загрузки, но столкнулся с проблемами в том, как передать это изображение человеку в хорошей усадьбе. Вы можете использовать гиперссылку, у которой для атрибута href установлено значение dataUrl, которое вы создали, но имя файла не может быть установлено, если вы не используете атрибуты HTML, такие как download = "filename.png", что проблематично для меня в разных браузерах. Другой подход заключается в том, чтобы отправить dataUrl на сервер, чтобы сервер затем выдал его, как ему нужно, но загрузка большого изображения только для его повторной загрузки кажется странным способом справиться с этим.