谷歌地图 - 在跨度点击时导航到特定位置

Question

>我有一个小项目，其中用户查看一个位置卡，其中包含有关该地点的一些信息，例如(学校，餐馆，研究所,...(，在该卡片上，我有一个跨度与visit-location类，它具有该位置的纬度和液化天然气两个属性，如果单击它应该打开一个名为map的页面.php并在中心加载位置的地图，现在我已经编写了加载代码地图，但我对加载时将纬度和液化天然气属性发送到地图感到困惑..我将在下面提供我的代码以进行任何编辑或更改
编辑：我有来自控制台的错误说："未捕获的参考错误：未定义谷歌" HTML 中的 span 标记代码：

<span class="visit-location" lat="12.7855" lng="45.0187">Visit in map</span>  

跨度点击功能：

$('.visit-location').click(function(){
var lat = $(this).attr('lat');
var lng = $(this).attr('lng');
loadMap(lat,lng);
window.location.href='map.php';
});  

加载映射功能：

function loadMap(lat,lng){
var aden = {lat: lat , lng: lng}; 
var map = new google.maps.Map(document.getElementById('map'),{
zoom: 15,
center: aden,
streetViewControl: false,
mapTypeControl: false
});
}  

map.php我调用map的代码：

<div id="map-container">
<div id="map"></div>
</div>  

映射脚本标记中提供的 API 密钥：

<script async defer src="https://maps.googleapis.com/maps/api/
js?key=mykey&callback=loadMap"> 
</script>

Answer 1

一种可能的解决方案是使用本地存储来保存地图中心状态：

$('.visit-location').click(function(){
var lat = $(this).attr('lat');
var lng = $(this).attr('lng');
// loadMap(lat,lng);
localStorage.setItem('aden', JSON.stringify({ lat: lat, lng: lng }))
window.location.href='map.php';
}); 

在地图上.php：

function loadMap(){
var aden = JSON.parse(localStoarage.getItem('aden'))
var map = new google.maps.Map(document.getElementById('map'),{
zoom: 15,
center: aden,
streetViewControl: false,
mapTypeControl: false
});
}

Answer 2

基于@webprojohn答案，我尝试以不同的方式使用 localStorage，如下所示，它可以工作

$('.visit-location').click(function(){
var lat = $(this).attr('lat');
var lng = $(this).attr('lng');
localStorage.setItem('lat', lat);
localStorage.setItem('lng', lng);
window.location.href='map.php';
});  
function loadMap(){
var aden = {lat: parseFloat(localStorage.getItem('lat')) , lng: parseFloat(localStorage.getItem('lng'))};
var map = new google.maps.Map(document.getElementById('map'),{
zoom: 15,
center: aden,
streetViewControl: false,
mapTypeControl: false
});
}