Javascript 无法在WordPress模板中使用marker.setPosition和map.panTo

我一直在尝试在WordPress模板中修改Google地图的实现，用户可以从列表中选择一个位置，而不是一个带有标记的地图。然后，单击事件应移动标记，使地图居中，并理想地设置一个新的缩放级别。我已经混了好几个小时，但我缺乏Javascript知识，这是一个障碍

我已经把它整理好了，以防有用

真诚希望有人愿意帮忙。提前谢谢

功能盘（拉特隆）{
var coords=latlon.split（“，”）；
var panPoint=new google.maps.LatLng（coords[0]，coords[1]）；
标记器设置位置（panPoint）；
panTo地图（panPoint）；
//setZoom（3）；//这必须是动态的，基于数据缩放
}
google_api_map_init_259585579（）；
函数google\u api\u map\u init\u 259585579（）{
var映射；
var coordData=new google.maps.LatLng（parseFloat（3.165612）、parseFloat（101.650425））；
var标记；
var styleArray=[
{
“特色类型”：“景观”，
“造型师”：[
{
“饱和”：-100
},
{
“轻盈”：65
},
{
“可见性”：“打开”
}
]
},
{
“featureType”：“poi”，
“造型师”：[
{
“饱和”：-100
},
{
“轻盈”：51
},
{
“可见性”：“简化”
}
]
},
{
“功能类型”：“道路.公路”，
“造型师”：[
{
“饱和”：-100
},
{
“可见性”：“简化”
}
]
},
{
“功能类型”：“道路干线”，
“造型师”：[
{
“饱和”：-100
},
{
“轻盈”：30
},
{
“可见性”：“打开”
}
]
},
{
“功能类型”：“road.local”，
“造型师”：[
{
“饱和”：-100
},
{
“轻盈”：40
},
{
“可见性”：“打开”
}
]
},
{
“featureType”：“transit”，
“造型师”：[
{
“饱和”：-100
},
{
“可见性”：“简化”
}
]
},
{
“特征类型”：“行政省”，
“造型师”：[
{
“可见性”：“关闭”
}
]
},
{
“功能类型”：“水”，
“elementType”：“标签”，
“造型师”：[
{
“可见性”：“打开”
},
{
“亮度”：-25
},
{
“饱和”：-100
}
]
},
{
“功能类型”：“水”，
“elementType”：“几何体”，
“造型师”：[
{
“色调”：“ffff00”
},
{
“亮度”：-25
},
{
“饱和度”：-97
}
]
}
]
函数初始化（）{
变量映射选项={
缩放：5，
中心：coordData，
滚轮：错误，
样式：样式数组
}
var map=new google.maps.map（document.getElementById（“map-canvas-259585579”）、mapOptions）；
var markerIcon={
url:“http://maps.gstatic.com/mapfiles/markers2/marker_sprite.png", 
尺寸：新谷歌地图尺寸（72,74），
来源：新google.maps.Point（0,0），
主持人：新谷歌地图点（30,74）
};
marker=新的google.maps.marker({
地图：地图，
可拖动：错误，
职位：coordData，
图标：markerIcon
});
$（'.location'）。在（'click'，函数（）{
pan（$（this.data（'coords'））；
$（“#位置输出”）.text（$（this.data（'location'））；
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
}

html，正文，#map-canvas-259585579{
高度：570px；
宽度：100%；
}

马来西亚
印度尼西亚
阿拉伯联合酋长国（阿联酋）

在

pan（）

中无法访问变量

map

和

marker

可能的解决方案：将这些变量作为参数传递给

pan（）

：

功能平移（拉特隆、地图、标记）{
var coords=latlon.split（“，”）；
var panPoint=new google.maps.LatLng（coords[0]，coords[1]）；
标记器设置位置（panPoint）；
panTo地图（panPoint）；
//setZoom（3）；//这必须是动态的，基于数据缩放
}
google_api_map_init_259585579（）；
函数google\u api\u map\u init\u 259585579（）{
var映射；
var coordData=new google.maps.LatLng（parseFloat（3.165612）、parseFloat（101.650425））；
var标记；
var styleArray=[
{
“特色类型”：“景观”，
“造型师”：[
{
“饱和”：-100
},
{
“轻盈”：65
},
{
“可见性”：“打开”
}
]
},
{
“featureType”：“poi”，
“造型师”：[
{
“饱和”：-100
},
{
“轻盈”：51
},
{
“可见性”：“简化”
}
]
},
{
“功能类型”：“道路.公路”，
“造型师”：[
{
“饱和”：-100
},
{
“可见性”：“简化”
}
]
},
{
“功能类型”：“道路干线”，
“造型师”：[
{
“饱和”：-100
var map, marker;
function pan(latlon) {
    var coords = latlon.split(",");
    var panPoint = new google.maps.LatLng(coords[0], coords[1]);
    marker.setPosition( panPoint );
    map.panTo(panPoint);
}

function initialize() {
  // ...
  map = new google.maps.Map(document.getElementById("map-canvas-259585579"), mapOptions);
  // ...
  marker = new google.maps.Marker({
    map:map,
    draggable:false,
    position: coordData,
    icon: markerIcon
  });