douxiaqin2062 2016-02-16 09:34
浏览 63
已采纳

使用加载ajax在当前页面中加载新的Google地图

I try to load a java script google map v3 in my index page with ajax load:

I know it there a lot of same question but I couldn't underestand them.

index.php

 <!DOCTYPE html>
    <html>
      <head>
        <script src="js/vendor/jquery.min.js"></script>
        <style type="text/css">
          html, body { height: 100%; margin: 0; padding: 0; }
          #map { height: 100%; }
        </style>
      </head>
      <body>
      <div id="mapc"></div>

      <span id="btn">load map</span>

        <script type="text/javascript">

    var map;
    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 8
      });
    }

    $(document).ready(function(){
       $("#btn").click(function(){
        $("#mapc").load("map.php");
        initMap();
        });
     });
        </script>
        <script async defer
          src="https://maps.googleapis.com/maps/api/js?callback=initMap">
        </script>
      </body>
    </html>

Note: I need google API link be in index.php because I plan to have anoher google map in index.php too.

also this is map.php

<div id="map"></div>

Also in console I only get this error:

js?callback=initMap:74 Uncaught TypeError: Cannot read property 'offsetWidth' of null_.Af @ js?callback=initMap:74_.hg @ js?callback=initMap:81initMap @ (index):19(anonymous function) @ js?callback=initMap:87(anonymous function) @ js?callback=initMap:49_.ac @ js?callback=initMap:46oc @ js?callback=initMap:49(anonymous function) @ js?callback=initMap:123google.maps.Load @ js?callback=initMap:21(anonymous function) @ js?callback=initMap:122(anonymous function) @ js?callback=initMap:123
js?callback=initMap:74 Uncaught TypeError: Cannot read property 'offsetWidth' of null_.Af @ js?callback=initMap:74_.hg @ js?callback=initMap:81initMap @ (index):19(anonymous function) @ (index):28n.event.dispatch @ jquery.min.js:3r.handle @ jquery.min.js:3
  • 写回答

2条回答 默认 最新

  • dongpu7881 2016-02-16 09:55
    关注

    You need to do the initMap(); just after that the map.php was loaded.

    So, you need to call the load function with 2 parameters:

    1. URL.
    2. Callback function.

    jQuery docs

    Callback Function

    If a "complete" callback is provided, it is executed after post-processing and HTML insertion has been performed. The callback is fired once for each element in the jQuery collection, and this is set to each DOM element in turn.

    In the callback function you can be sure that the map.php was loaded and the #map div exist in the DOM.

    $("#mapc").load("map.php", function() {
       initMap();
    });
    

    Also, remove the ?callback=initMap from the URL

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?