CODEWITHSUNDEEP
javascriptphpjquerygoogle-maps
elize
elize

Reputation: 425

load a new google map in current page with load ajax

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

Upvotes: 0

Views: 4533

Answers (2)

kaito
kaito

Reputation: 291

Your problem is that the Element () not exists on page load. You add the first after clicked the "#btn".

It works first after clicking, see: 

    $(document).ready(function(){
       $("#btn").click(function(){
        $("#mapc").append('<div id="map"></div>');
        initMap();
        });
     });
html, body { height: 100%; margin: 0; padding: 0; }
          #map { height: 100%;     width: 500px;
    height: 500px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var map;

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

      <div id="mapc"></div>

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

        <script async defer
          src="https://maps.googleapis.com/maps/api/js">
        </script>

Just remove the "?callback=initMap" Parameter and it works fine, without errors.

Upvotes: 1

Mosh Feu
Mosh Feu

Reputation: 29277

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

Upvotes: 0

Related Questions