Javascript Ajax调用中未显示Google地图_Javascript_Php_Jquery_Ajax_Google Maps

Javascript Ajax调用中未显示Google地图

javascript php jquery ajax google-maps

Javascript Ajax调用中未显示Google地图,javascript,php,jquery,ajax,google-maps,Javascript,Php,Jquery,Ajax,Google Maps,我有一个php文件，它生成了一个Google地图。如果我独立运行它，它会正常工作但是当我试图通过Ajax调用显示它时，它会显示所有map.php内容，而不是地图 $.ajax({ type:"post", url:"map_generator.php", data:{label1:data1}, success: function (

我有一个php文件，它生成了一个Google地图。如果我独立运行它，它会正常工作

但是当我试图通过Ajax调用显示它时，它会显示所有map.php内容，而不是地图

$.ajax({            
        type:"post",
        url:"map_generator.php",                
        data:{label1:data1},                    
        success:  function (response) {                 
            $('#map-section').html(response);

        },          
        error: function (xhr, ajaxOptions, thrownError) {
            alert('Error');
        }
    });

我还尝试了“完整”功能而不是“成功”，但仍然不起作用

欢迎所有提示

多谢各位

编辑

mymap.php

<html>
<head>

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">  </script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js"></script>


<script type="text/javascript">

var coords = [{
0: "45.648110",
1: "11.497398",
2:"Title 1"
}, {
0: "45.511180",
1: "11.511070",
2:"Title 2"
 },{

0: "45.803245",
1: "11.355629",
2:"Title 3"
}];

var geocoder;
var map;

var mapCenter = new google.maps.LatLng(coords [0][0], coords [0][1]);


function initialize() {
//Google map option
        var googleMapOptions = 
        { 
            center: mapCenter, // map center
            zoom: 7, //zoom level, 0 = earth view to higher value
            panControl: true, //enable pan Control
            zoomControl: true, //enable zoom control
            zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL //zoom control size
        },
            scaleControl: true, // enable scale control
            mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
        };

        map = new google.maps.Map(document.getElementById("map"), googleMapOptions);

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

        var infowindow = new google.maps.InfoWindow({
            content:"¡Hello World!"
        });

    infowindow.open(map,marker);
    update(coords )
}


function update(markers) {
var infowindow = new google.maps.InfoWindow(),
    marker, i;

    for (i = 0; i < markers.length; i++) {
        var lat = markers[i][0];
        var lng = markers[i][1];    

        var title = markers[i][2];                                  

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat, lng),
            map: map,               
            title: title
        });


        google.maps.event.addListener(marker, 'click', (function(marker, lat, lng) {

                    return function() {
                        infowindow.setContent(lat + " " + lng);
                        infowindow.open(map, marker);
                    }
                })(marker, lat, lng));

    }
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

</head>                 
<body>

<div class="map" id="map" style="margin:0 auto; width:500px; height:500px; border:1px solid #ff0000">


</body>

</html>

这就是调用map.php的文件

 <html>
 <head>
 <script type="text/javascript" src="js/jquery.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">     </script>
 <script type="text/javascript" src="js/plugins.js"></script>   
 <script type="text/javascript" src="js/informe.js"></script>
 </head>
 <body>
 <a href="javascript:void(0)" onclick="getMap()">Get map</a>
 <div id="map-section" style="position:relative; border:1px solid;width:600px; height:600px;"></div>

 <script>

 function getMap(){ 

$(document).ready(function(){       
    $.ajax({            
        type:"post",
        url:"map.php",              
        data:{region:"algo"},                   
        success:  function (response) {                     
            $('#map-section').html(response);   
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert('Error');
        }
    });
}); 
 }

 </script>
 </body>
 </html>

php是一个包含html、head、body等标记的自包含、格式正确的html页面吗？另外，您是否检查过开发工具控制台大多数浏览器上的开发工具键盘上的是F12是的，它的格式正确。我尝试在调用之前加载脚本（如此处所述），但对我不起作用。您是否检查了开发人员工具控制台中的错误大多数浏览器上的开发人员工具是键盘上的F12它显示以下内容：Google Maps API警告：SensorNotRequired:我从中删除了sensor=false，但仍然不起作用。我开始怀疑可能是ajax调用需要更多的时间来绘制地图，这就是为什么它没有显示地图的原因。