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条回答 默认 最新

      报告相同问题?

      相关推荐 更多相似问题

      悬赏问题

      • ¥15 有没有可以下载钉钉群文件视频的软件
      • ¥15 如何用LaTeX打出如下的表格
      • ¥15 程序填空补充完整的代码一共三题
      • ¥15 在MySQL中使用while建表,报错
      • ¥15 DB2线上告警,三表联查sql优化。
      • ¥15 python导入pyautogui报错,网上也没有找到解决方法如何解决?
      • ¥15 关于IPSEC和NAT SERVER同时使用的情况下,该如何解决客户端访问服务器的问题
      • ¥15 eclipse项目在idea运行部署到云服务器
      • ¥100 sql server image类型转换
      • ¥15 关于matlab的问题