Google Maps canvas not displaying

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

    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) {
        } else {


<script async defer

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?