load a new google map in current page with load ajax
Question
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 answers
solution1
1 2016-02-16 09:55:07
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.
solution2
0 ACCPTED 2016-02-16 09:55:03
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:
- URL.
- 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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.