使用ajax加载谷歌地图

Question

I am trying to implement google maps in to my page. I couldn't able to acheive it. I am just getting an empty container. I am doing something wrong here ?

 <div class="container">
 <div class="map">
 <div id="map-container" class="z-depth-1-half map-container" style="height: 500px;"></div>
 </div>
 </div>

These are the script files

 <script type="text/javascript" src="https://maps.google.com/maps/api/js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/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> 

Answer 1

Simple : Your script must be: <script async defer src="//maps.googleapis.com/maps/api/js?key=YourApiKey&callback=initMap"></script>

If necessary, post an screen on your console web.

To know more .