google map api is not working and doesn't display the map

i have a PHP code that i need to embedded a Google map inside of it in order to plot markers in future.

for this reason i tried to get a API key for the Google Map and place it inside the code in javascript.

but it did not display anything . how can i fix this problem.

code:

<?php
        /*
        Template Name: search info_location
        */

        get_header();
          ?>

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Markers</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key= AIzaSyBSpBVcEmUnLMXS1wN9Mx8JcOhWvLA0kvY&callback=initMap">
    </script>
     <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 400px;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

    </style>

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

      <script type="text/javascript">

         var map,currentPopup;
         function initMap() 
         {
         map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: new google.maps.LatLng(33.888630, 35.495480),
          mapTypeId: 'roadmap'
         });
       }
        </script>
     </body>
</html>

<?php
get_footer();
?>

Solution

i have tried your code its working fine i believe you got some errors on your php functions like getfooter/getheaders or check that file name is having .php extension.