Using Google maps api inside div not working

Question

I've been trying to add google maps to my page with no avail. My code works fine independently but when I add to a real webpage the map doesn't show at all.

 <div id="map" style="width:100%;height:500px"></div>
<script>
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBcwtM8EBe7BE1NyPbU5SDYVYoBBtbtpTI&callback=initMap"
async defer></script>

And the page looks like this

As you can see, the div pops up but not the map. How would I get this to show?

Answer 1

Your myMap function has never been called. You can call it like,

function myMap() {
   ... 
}

myMap();

or use callback parameter on the script..

<script async defer src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=myMap"> </script>

Edit

You're calling it wrong, it should be an & , not & in your script parameter. Try to change your code to,

<div id="map" style="width:500px;height:500px"></div>

<script>
    function myMap() {
        var mapCanvas = document.getElementById("map");
        var mapOptions = {
            center: new google.maps.LatLng(51.508742,-0.120850),
            zoom: 5
        };
        var map = new google.maps.Map(mapCanvas, mapOptions);
    }
</script>

<script async defer src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBcwtM8EBe7BE1NyPbU5SDYVYoBBtbtpTI&callback=myMap"> </script>

For more detail, check out this fiddle .

- Edit 2 -

I have no idea why you can't get it to work in your site. Since I could do it just fine.

Below are the script that I inject during runtime on the console in your site.

$('.content--body__wrapper').append('<div id="map" />')
$('#map').attr('style', 'width:500px; height:500px')
$('.content--body__wrapper').append(`<script>
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
  }
</script>`);
$('.content--body__wrapper').append(`<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBcwtM8EBe7BE1NyPbU5SDYVYoBBtbtpTI&callback=initMap" async defer></script>`);

What I can tell from your screenshot is your initMap function does not get called. And I am not sure if it's the callback from google map since it provides no error in your console.

Below is an alternative approach, that you might want to try. Try to call initMap on the js instead of callback.

<div id="map" style="width:100%;height:500px"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBcwtM8EBe7BE1NyPbU5SDYVYoBBtbtpTI"></script>

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