在我的PHP模板中包含Google地图

Question

So I have a simple website template I mocked up in php, each purpose separated into its own file; for example Home, Services, Find Us, Functions, Header, Content etc etc. What I'm trying to do is get google maps to display the location specified in the lat / lng however nothing seems to be showing up. For the other parts of the findus.php page I've been setting the content as follows:

    $the_title = 'Find Us';
    $the_content = '<h3>Address<h3>';

And then calling it on the page.php page as follows:

    <h2><?php echo $the_title; ?></h2>
    <?php echo $the_content; ?>

This works fine. For the GMaps API it doesn't. Underneath my $content variables I close the php tags and have the following code:

<div id="map"></div>
<script>
       var map;
        function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: *removed*, lng: *removed*},
        zoom: 8
    });
  }
</script>

<?php $map = '<script src="https://maps.googleapis.com/maps/api/js?key=*removed*&callback=initMap"
async defer></script>' ?>

Notice I opened a new php tag to set $map to the api call. For some reason my map isn't showing on the page.php page (even making sure css sizing is working just in case..). I've been trying to call it with both of the following:

<?php echo $map ?>
<?php print_r($map) ?>

If anyone could help I'd greatly appreciate it. EDIT Ok, I copied the code into a single html page and it works fine when outputting that to the browser. Anyone know if there is a reason its not working inside my findus.php file? Hell, copying and pasting it to page.php didn't output it anywhere so I'm a bit stumped to be honest. Even tried using the html file as an iframe to output the map but it's not working.. EDIT Ok, the code for the Find Us page is below:

<?php
    $the_title = 'Find Us';
    $the_content = '<h3>Address<h3>';
    $the_content2 = '*removed*'

$img = '<img src="map.png" height="350px" width="500px" id=mapimg>';
?>

<div id="map">
 <script>
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: *removed*, lng: *removed*},
      zoom: 15
    });
  }
</script>
<script async src="https://maps.googleapis.com/maps/api/js?key=*removed*&callback=initMap"></script>
</div>
<?php include('page.php'); ?>

The CSS styling is as follows:

#map {
height: 250px;
width: 250px;
clear: both;
z-index: -1;
}

The code for the page.php file is below:

<?php include('header.php'); ?>
        <div id="content">
            <div id="main">
                <h2><?php echo $the_title; ?></h2>
                <?php echo $the_content; ?>
                <?php echo $the_content2; ?>
                <?php echo $video ?>
            <?php echo $img ?>
            </div>


            <?php include('sidebar.php'); ?>
        </div>
<?php include('footer.php'); ?>