jquery load（）

jquery load（） - 无法加载谷歌地图(jquery load() - unable to load google maps)

我无法在使用JQuery中的load()新页面的内容时加载谷歌地图，而无需重新加载窗口。

Jquery ajax调用是：

$("form").submit(function(){ $(".cs-container").load("set-location.php .cs-container"); return false; });

我试图从当前div.cs-container类元素中的另一个set-location.php页面加载.cs-container的内容。 它已成功加载但谷歌地图无法加载 。 g-maps容器放在set-location.php页面的.cs-container中，它的脚本文件包含在该页面的头部。

google maps工作得很好，但不加载在ajax调用。

当我尝试这样的事情时：

$("form").submit(function(){ $(".cs-container").load("set-location.php"); return false; });

它工作得很好，但它在.cs-container加载了整个页面。 我不想要的。

谷歌地图初始化脚本为（在文件cs-loc.js ） ：

/*check if geolocaiton supported*/ if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(success); } else { error('Geo Location is not supported'); } function success(position) { var lat = position.coords.latitude; /*getting cordinates*/ var long = position.coords.longitude; var input = document.getElementById("latLong"); input.value = lat + ", " + long; var poos = new google.maps.LatLng(lat,long); /*set lat long for maps*/ var mapProp = { center: poos, zoom:16, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); /*init maps*/ /*create marker*/ var marker=new google.maps.Marker({ position:poos, title: 'Your Store Location', draggable: true }); marker.setMap(map); /*set marker to map*/ google.maps.event.addListener(marker, 'dragend', function(a) { console.log(a); input.value = a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4); }); } success();

怎么解决？

I have trouble to load google maps while loading the contents of new page using load() in JQuery without reloading window.

Jquery ajax call is:

$("form").submit(function(){ $(".cs-container").load("set-location.php .cs-container"); return false; });

I am trying to load the contents of .cs-container from another set-location.php page in the current div.cs-container class element. it's loaded successfully but the google maps does't load. The g-maps container is placed in .cs-container in the set-location.php page and it's script files are contained in the head of that page.

google maps works very well but does't load in the ajax call.

when i try something like this:

$("form").submit(function(){ $(".cs-container").load("set-location.php"); return false; });

it works very well but it load the complete page in the .cs-container. that I don't want.

the google maps initializing script is as (in the file cs-loc.js):

/*check if geolocaiton supported*/ if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(success); } else { error('Geo Location is not supported'); } function success(position) { var lat = position.coords.latitude; /*getting cordinates*/ var long = position.coords.longitude; var input = document.getElementById("latLong"); input.value = lat + ", " + long; var poos = new google.maps.LatLng(lat,long); /*set lat long for maps*/ var mapProp = { center: poos, zoom:16, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); /*init maps*/ /*create marker*/ var marker=new google.maps.Marker({ position:poos, title: 'Your Store Location', draggable: true }); marker.setMap(map); /*set marker to map*/ google.maps.event.addListener(marker, 'dragend', function(a) { console.log(a); input.value = a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4); }); } success();

How it can be solve?

最满意答案

您可以在load()回调中使用$.getScript()

$(".cs-container").load("set-location.php .cs-container", function(){ $.getScript('google.maps....').done(function(){ $.getScript('cs-loc.js'); }); });

You could use $.getScript() in the load() callback

$(".cs-container").load("set-location.php .cs-container", function(){ $.getScript('google.maps....').done(function(){ $.getScript('cs-loc.js'); }); });