您可以使用一个占位符图像来提示一个映射,加载Javascript,但不调用映射函数(通常通过
initMap
以谷歌为例)
下面的例子过于夸张,但给出了一个想法,我的建议也许。我通过Google控制台监控地图的加载——仅仅加载页面并不会增加计数器,但是一旦点击地图并正确调用地图,我发现配额计数器就会上升。
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Load a map on demand</title>
<style>
html, body {
height:100vh;
width:100%;
margin: 0;
padding: 0;
}
body{
display:flex;
align-items:center;
justify-content:center;
background:whitesmoke;
}
#map {
height:90vh;
width:90%;
margin:auto;
border:3px solid rgba(0,0,0,1);
}
.staticmap{
background-image:url(/images/maps/static-map-scotland.jpg);
background-position:top left;
background-size:cover;
display:flex;
align-items:center;
justify-content:center;
border:3px solid rgba(0,0,0,0.25)!important;
}
.staticmap:after{
content:attr(data-info);
font-size:3rem;
color:red;
width:100%;
display:block;
text-align:center;
}
</style>
<script>
document.addEventListener('DOMContentLoaded',function(){
let map=document.getElementById('map');
const initMap=function() {
var default_location = {
lat:56.646577,
lng:-2.888609
};
map = new google.maps.Map( map, {
zoom: 10,
center: default_location,
mapTypeId:'roadmap',
mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }
});
let options={
position:default_location,
map:map,
icon:'//maps.google.com/mapfiles/ms/icons/blue-pushpin.png',
title:'Default location'
}
marker = new google.maps.Marker( options );
}
map.onmouseover=function(){
this.dataset.info='Click on the map to load';
};
map.onmouseout=function(){
this.dataset.info='';
};
document.querySelector('.staticmap').onclick=function(){
if( confirm('Would you like to load the proper map?') ){
initMap();
this.classList.remove('staticmap');
}
}
},false);
</script>
<script async defer src="//maps.googleapis.com/maps/api/js?key=APIKEY"></script>
</head>
<body>
<div id='map' class='staticmap' data-info=''></div>
</body>
</html>