Я знаю, что это сообщение старое, но я подумал, что это может быть полезно, если кто-нибудь наткнется на это и ищет более обновленный пример.Хотя код в ответе работает нормально, он написан не в дружественном для jQuery формате.Я также обнаружил, что способ, которым настроены слушатели событий, делает его использование немного сложным.Наконец, фиксированный размер карты просто не работает в современном адаптивном мире.Надеюсь, это кому-нибудь поможет!
Добавьте #mapHolder в любое место на своей странице и настройте его по своему вкусу:
<div id='mapHolder' style='whatever you want'></div>
Размещайте ссылки в любом месте на своей странице, чтобы вы могли отображать карту при наведении мышиболее:
<a class="mapthis" place="properly formatted address" zoom="12">MAP</a>
JQuery:
$(document).on("mouseenter", ".mapthis", function(e) {
var desiredMapWidthPercent = .8;
var mapWidth = Math.round($(window).width() * desiredMapWidthPercent);
var aspectRatio = mapWidth / $(window).height();
var mapHeight = Math.round($(window).height() * aspectRatio);
var boxWidth = mapWidth;
var boxHeight = mapHeight;
var scale = 1;
var pZoom = parseInt($(this).attr("zoom"));
var pPlace = $(this).attr("place");
if((mapHeight > 640) || (mapWidth > 640)){
mapHeight = Math.round(mapHeight / 3.5);
mapWidth = Math.round(mapWidth / 3.5);
scale = 2;
if(((mapHeight) > 1280) || ((mapWidth) > 1280)){
mapHeight = 640;
mapWidth = 640;
boxWidth = 1280;
boxHeight = 1280;
}else{
boxWidth = mapWidth * 2;
boxHeight = mapHeight * 2;
}
}
var fromleft = Math.max(0, ((($(window).width() - boxWidth) / 2) + $(window).scrollLeft()))+'px';
var fromtop = Math.max(0, ((($(window).height() - boxHeight) / 2) + $(window).scrollTop()))+'px';
var pText = $(this).html();
$('#mapHolder').html('<a href="https://maps.google.com/maps?q=' + pPlace + '&z=11" target="new"><img border=0 src="https://maps.google.com/maps/api/staticmap?center=' + pPlace + '&zoom=' + pZoom + '&size='+mapWidth+'x'+mapHeight+'&scale='+scale+'&sensor=false&format=png&markers=color:blue|' + pPlace + '"></a>');
$('#mapHolder').css({position:'absolute',top:fromtop,left:fromleft, width:boxWidth, z-index:'999'});
$('#mapHolder').show();
});
$(document).on("mouseleave", ".mapthis", function(e) {
if($(e.relatedTarget).closest('#mapHolder').length){
$("#mapHolder").on("mouseleave", function(e) {
$('#mapHolder').hide();
});
return;
}
$('#mapHolder').hide();
});