谷歌地图无法加载用ajax

-1

我想在HTML页面中使用Ajax加载GMAP但它不能正常工作谷歌地图无法加载用ajax

的index.html

<head>  
<script type="text/javascript">  
function load_pages(url) {   
$('#project').html('<p><img src="../images/loader/ajax-loader1.gif" width="100"  height="19" style="margin: 30% auto 0px 30%;"/></p>');     
$('#project').load(url, "",   
function(responseText, textStatus, XMLHttpRequest) {    
if (textStatus === 'error') {      
$('#project').html('<p style="margin: 30% auto 0 30%;">Unable to load the content...</p>');    
}    
});  
} 
</script> 
</head> 

<body> 
<div id="project"> 
<a href="javascript:void 0" onclick="load_pages('project-1/location.html');">Location</a> 
<p>Here Map Should be load</p> 
</div> 
</body>

这里是Location.html

<div class="map"> 
<center>            
<div id="bd"></div>            
<div id="gmap" class="roundtext"></div>           
</center> 
</div> 

<!-- Map -->        
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>        
<script src="../js/map.js"></script>        
<!-- Map End -->

，这里是我的map.js ，我在我的location.html用于在底部我也tryed在index.html中

var map; 
var marker = false; 
function initialize() { 
    var mLati = 18.546821; 
    var mLongi = 73.935998; 
    var myLatlng = new google.maps.LatLng(mLati, mLongi); 
    var myOptions = { 
     zoom: 19, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("gmap"), myOptions); 

    marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map 
    }); 

    google.maps.event.addListener(map, 'center_changed', function() { 
     var location = map.getCenter(); 
     document.getElementById("lat").innerHTML = location.lat(); 
     document.getElementById("lon").innerHTML = location.lng(); 
     document.getElementById("frmLat").value = location.lat(); 
     document.getElementById("frmLon").value = location.lng(); 
     placeMarker(location); 
    }); 

    google.maps.event.addListener(map, 'zoom_changed', function() { 
     zoomLevel = map.getZoom(); 
     document.getElementById("zoom_level").innerHTML = zoomLevel; 
    }); 

    google.maps.event.addListener(marker, 'dblclick', function() { 
     zoomLevel = map.getZoom() + 1; 
     if (zoomLevel == 20) { 
      zoomLevel = 10; 
     } 
     document.getElementById("zoom_level").innerHTML = zoomLevel; 
     map.setZoom(zoomLevel); 
    }); 

    document.getElementById("zoom_level").innerHTML = 11; 
    document.getElementById("lat").innerHTML = 18.546821; 
    document.getElementById("lon").innerHTML = 73.935998; 
} 

function placeMarker(location) { 
    var clickedLocation = new google.maps.LatLng(location); 
    marker.setPosition(location); 
} 

window.onload = function() { 
    initialize(); 
};

请帮我解决这个问题

来源

2013-10-15 Nilesh12

“不起作用”没有帮助。你真的认为有人会看你的大量代码吗？ – Sliq

我把它练到这是我所做的工作。

在你的脑海中，我添加jQuery库。

<head> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript">  
function load_pages(url) {   
$('#project').html('<p><img src="../images/loader/ajax-loader1.gif" width="100"   height="19" style="margin: 30% auto 0px 30%;"/></p>');     
$('#project').load(url, "",   
function(responseText, textStatus, XMLHttpRequest) {    
if (textStatus === 'error') {      
$('#project').html('<p style="margin: 30% auto 0 30%;">Unable to load the content...</p>');    
}    
});  
} 
</script> 
</head>

然后在您map.js文件我改变了你的window.onload到：

$(document).ready(function() { 
initialize();    
});

也给#gmap的高度和宽度。并且地图显示出来。

来源

2013-10-15 06:30:22 w3bMak3r

你是伟大的兄弟...亚工作良好.........非常感谢你 – Nilesh12

我没有投票的声望，但非常感谢你 – Nilesh12

在Location.html

您有：

<div class="map>

它缺少一个双引号：

<div class="map">

来源

2013-10-15 05:33:53 w3bMak3r

当我在这里发布但不是在我的实际代码 – Nilesh12

时，它会丢失它为什么要对location.html执行ajax请求。我认为你正在运行你的JavaScript来设置地图，然后ajax请求实际上完成加载dom上的内容。 – w3bMak3r

如果你摆脱了window.onload，结合这两个html页面，消除了ajax请求并从锚点调用初始化。像这样：onclick =“javascript：initialize（）; – w3bMak3r

谷歌地图无法加载用ajax

回答

相关问题