Javascript Ajax加载谷歌地图标记

我有一个GoogleMap，它可以在页面加载中加载结果，这很好，但是我有一个ajax搜索表单，它在一个单独的div中通过ajax更新结果，但它不会更新地图。我试图弄清楚在ajax调用完成时如何更新映射，但我被卡住了。任何帮助都将不胜感激

代码如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

<script>
$(document).ready(function() {


    var markersInfo = $('.ia-card').map(function() {

            var info = {
                id: $(this).data('map-id'),
                address: $(this).data('map-address'),
                title: $(this).data('map-title'),
                price: $(this).data('map-price'),
                latitude: $(this).data('map-latitude'),
                longitude: $(this).data('map-longitude'),
                html: "<img src=" + $(this).data('map-image') + ">",
                link: $(this).data("map-link"),
          contentHtml:  "<div class='image'>" + "<img src=" + $(this).data('map-image') + ">" + "</div>" + '<b>' + $(this).data('map-title') + '</b><br>' + "<div class='changeprice'><div style='display: none;' class='currency-selector'></div>" + $(this).data('map-price') + "</div>" + "<br><a href='" + $(this).data("map-link") + "'>More>></a>"
            };

        return info;
    }).get();


var distinctMarkerInfo = [];
markersInfo.forEach(function(item) {
    if (!distinctMarkerInfo.some(function(distinct) {
            return distinct.id == item.id;
        })) distinctMarkerInfo.push(item);
});

initGoogleMap(distinctMarkerInfo);




// GMAP ON SEARCH RESULTS PAGE
function initGoogleMap(markersInfo) {

    var mapOptions = {
        // zoom: 2,
        // center: new google.maps.LatLng(53.334430, -7.736673)
    },
    bounds = new google.maps.LatLngBounds(),
    mapElement = document.getElementById('stm_map_results'),
    map = new google.maps.Map(mapElement, mapOptions);
    markerList = []; // create an array to hold the markers

    var geocoder = new google.maps.Geocoder();


    var iconBase = '../assets/images/';



    $.each(markersInfo, function(key, val) {
        var marker = new google.maps.Marker({
            //map: map,
            position: {lat: parseFloat(val.latitude), lng: parseFloat(val.longitude)},
            title: val.title,
            icon: iconBase + 'single.png',
            info: new google.maps.InfoWindow({
                content: val.contentHtml
            })

        });


        markerList.push(marker); // add the marker to the list

        google.maps.event.addListener(marker, 'click', function() {
            marker.info.open(map, marker);
            });


        loc = new google.maps.LatLng(val.latitude, val.longitude);
            bounds.extend(loc);
    });


    map.fitBounds(bounds);
        map.panToBounds(bounds);

  var markerCluster = new MarkerClusterer(map, markerList, {
  imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });


};


});
</script>

<div id="stm_map_results" style="width:100%; height:600px;"></div>

$（文档）.ready（函数（）{
var markersInfo=$（'.ia card'）.map（函数（）{
变量信息={
id:$（this）.data（'map-id'），
地址：$（this）.data（'map-address'），
标题：$（this）.data（'map-title'），
价格：$（此）.data（'map-price'），
纬度：$（this）.data（'map-latitude'），
经度：$（this）.data（'map-longitude'），
html:“”，
链接：$（this）.data（“地图链接”），
contentHtml:“+”+“+”+“+”+$（此）.data（'map-title'）+”
“+”++$（此）.data（'map-price'）+“+”
”
};
退货信息；
}).get（）；
var distinctMarkerInfo=[]；
markersInfo.forEach（函数（项）{
if（！distinctMarkerInfo.some）（函数（不同）{
返回distinct.id==item.id；
}))distinctMarkerInfo.推送（项目）；
});
initGoogleMap（distinctMarkerInfo）；
//搜索结果页面上的GMAP
函数initGoogleMap（markersInfo）{
变量映射选项={
//缩放：2，
//中心：新google.maps.LatLng（53.334430，-7.736673）
},
bounds=新的google.maps.LatLngBounds（），
mapElement=document.getElementById（'stm\u map\u results'），
map=新的google.maps.map（mapElement，mapOptions）；
markerList=[]；//创建一个数组来保存标记
var geocoder=new google.maps.geocoder（）；
var iconBase='../assets/images/'；
$.each（markersInfo，函数（key，val）{
var marker=new google.maps.marker({
//地图：地图，
位置：{lat:parseFloat（val.latitude），lng:parseFloat（val.longitude）}，
标题：val.title，
图标：iconBase+'single.png'，
信息：新建google.maps.InfoWindow({
内容：val.contentHtml
})
});
markerList.push（marker）；//将标记添加到列表中
google.maps.event.addListener（标记'click'，函数（）{
标记信息打开（地图，标记）；
});
loc=新的google.maps.LatLng（val.latitude，val.longitude）；
边界扩展（loc）；
});
映射边界（bounds）；
panToBounds地图（边界）；
var markerCluster=新的MarkerClusterer（映射、标记列表、{
imagePath:'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
};
});

由于您是通过

MarkerClusterer

显示标记，因此我建议以下解决方案来更新地图

• 检索到数据后，使用从地图中清除现有市场

  MarkerCluster.clearMarkers

  函数
• 使用新数据初始化

  MarkerCluster

下面的示例演示如何“刷新”地图上的标记：

function placeMarkers(data){
     var markers = data.map(function (item, i) {
          return new google.maps.Marker({
              position: { lat: item.lat, lng: item.lng }
          });
     });

     //1.clear existing markers
     if (markerCluster)
          markerCluster.clearMarkers();

     //2.init marker cluster
     markerCluster = new MarkerClusterer(map, markers,
           { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' });

}

---

我在一个单独的页面（例如ajax.js）上运行ajax函数，我有从另一个页面（例如map.php）加载地图的代码，每当我试图从js文件访问php文件上的地图脚本时，我都会收到一个错误，说函数未定义，因此我无法从该页面外部重新初始化地图。我已经把js页面的代码和php页面的代码结合起来了，那么我应该把上面的代码放在哪里呢？我有点不知道该换什么。我是一个Javascript新手。。。。谢谢