Google Maps canvas not displaying


#1

I have the below script to display a Google Maps canvas with latitudes / longitude from the database.

<script>
    var marker;

    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 13,
            center: {lat: parseFloat('<?php echo $lat;?>'), lng: parseFloat('<?php echo $lng;?>')}
        });

        marker = new google.maps.Marker({
            map: map,
            draggable: true,
            animation: google.maps.Animation.DROP,
            position: {lat: parseFloat('<?php echo $lat;?>'), lng: parseFloat('<?php echo $lng;?>')}
        });
            marker.addListener('click', toggleBounce);
    }

    function toggleBounce() {
        if (marker.getAnimation() !== null) {
            marker.setAnimation(null);
        } else {
            marker.setAnimation(google.maps.Animation.BOUNCE);
        }
    }

</script>

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&signed_in=true&callback=initMap"></script>

I then display the canvas like so:

<div id="map"></div>

This works like a charm, locally. However the canvas does not display at all on the live site. What would the cause’ of this be?