Html 谷歌地图可以'；不要使用ajax加载_Html_Ajax_Google Maps_Jquery

Html 谷歌地图可以'；不要使用ajax加载

html ajax google-maps jquery

Html 谷歌地图可以'；不要使用ajax加载,html,ajax,google-maps,jquery,Html,Ajax,Google Maps,Jquery,我试图在html页面中使用ajax加载gmap，但它不起作用 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=

我试图在html页面中使用ajax加载gmap，但它不起作用

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>

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();
};

请帮助我在Location.html中解决此问题

你有：

<div class="map>

我成功了这就是我所做的
在您的头脑中，我添加了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>

同时给gmap一个高度和宽度。然后地图就出现了 兄弟，当我在这里发帖时，它不见了，但不是在我的实际代码中。为什么你要对location.html进行ajax请求。我认为您正在运行javascript，以便在ajax请求实际完成在dom上加载内容之前设置映射。如果您去掉window.onload，将两个html页面合并，消除ajax请求，并从锚调用initialize。像这样：onclick=“javascript:initialize（）；bcoz我有不止一个功能页面，这就是为什么我需要这个功能…有没有解决这个问题的方法；已经用例子尝试过你是伟大的兄弟…你工作很好…非常感谢你我没有投票的名声，但非常感谢你“不工作”是没有帮助的。你真的认为有人会看你的大量代码吗？
<div class="map">

<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>

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