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

报告相同问题?

悬赏问题

  • ¥15 LD衰减图用R语言对其可视化
  • ¥15 Mermaid语法生成的svg在Axure无法编辑
  • ¥15 Windchill二次开发
  • ¥15 怎么把tkinter和其他代码结合起来使功能可以完善
  • ¥15 爬取豆瓣电影相关处理
  • ¥15 手机淘宝抓清除消息接口
  • ¥15 C#无selenium
  • ¥15 用机器学习方法帮助保险公司预测哪些是欺诈行为
  • ¥15 数据爬取,python
  • ¥15 怎么看 cst中一个面的功率分布图,请说明详细步骤。类似下图