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?
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');
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.