Multiple google maps on one page, not working

Question

My code is below for the script I am using to enable the use of google maps on my webpage, I have 6 maps I wish to display, I also have the api key, however nothing is working. I got this solution from a previous answer given to a user who had the same issue. [EDITED]

  <script src="/js/foundation.js"></script>
  <script src="/js/google_maps_options.js"></script>
  <script src="/js/rem.js"></script>
  <!-- jQuery -->
  <script src="js/jquery.min.js"></script>
  <!-- Bootstrap js-->
  <script src="bootstrap/js/bootstrap.min.js"></script>
  <!--easing plugin for smooth scroll-->
  <script src="js/jquery.easing.1.3.min.js" type="text/javascript"></script>
  <script src="js/jquery.backstretch.min.js" type="text/javascript"></script>
  <!--flex slider plugin-->
  <script src="js/jquery.flexslider-min.js" type="text/javascript"></script>
  <!--owl carousel slider js-->
  <script src="owl-carousel/owl.carousel.min.js" type="text/javascript"></script>
  <!-- jQuery UI -->
  <script type="text/javascript" src="js/jquery-ui.min.js"></script>
  <!--pace plugin-->
  <script src="js/pace.min.js" type="text/javascript"></script>
  <!--on scroll animation-->
  <script src="js/wow.min.js" type="text/javascript"></script>
  <!--popup js-->
  <script src="lightbox2/dist/js/lightbox.min.js" type="text/javascript"></script>
  <!--cantact form script-->
  <script src="js/contact_me.js" type="text/javascript"></script>
  <script src="js/jqBootstrapValidation.js" type="text/javascript"></script>
  <!--restaurant custom js-->
  <script src="js/restaurant-custom.js" type="text/javascript"></script>
  <!-- google maps -->









  <script type="text/javascript">
   var map1, map2, map3, map4,map5,map6;
   function initialize(condition){
     var pryzmMap ={
       zoom:15,
       center: new google.maps.LatLng(52.474543,-1.914752),
       mapTypeId: google.maps.MapTypeId.ROADMAP
     }
     var indiMap ={
       zoom:15,
       center: new google.maps.LatLng(52.474808,-1.896045),
       mapTypeId: google.maps.MapTypeId.ROADMAP
     }
     var bambuMap ={
       zoom:15,
       center: new google.maps.LatLng(52.475371,-1.896546),
       mapTypeId: google.maps.MapTypeId.ROADMAP
     }
     var map101 ={
       zoom:15,
       center: new google.maps.LatLng(52.473789,-1.895801),
       mapTypeId: google.maps.MapTypeId.ROADMAP
     }
     var playerMap ={
       zoom:15,
       center: new google.maps.LatLng(52.476874,-1.91135),
       mapTypeId: google.maps.MapTypeId.ROADMAP
     }
     var rosMap={
       zoom:15,
       center: new google.maps.LatLng(52.477364,-1.910835),
       mapTypeId: google.maps.MapTypeId.ROADMAP
     }
     map1 = new google.maps.Map(document.getElementById("pryzm"), pryzmMap);
     map2 = new google.maps.Map(document.getElementById("indi"), indiMap);
     map3 = new google.maps.Map(document.getElementById("bambu"), bambuMap);
     map4 = new google.maps.Map(document.getElementById("club101"), map101);
     map5 = new google.maps.Map(document.getElementById("players"), playerMap);
     map6 = new google.maps.Map(document.getElementById("rosies"), rosMap);
   }
  </script>
 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAJpdsIlyS5SAVtN5Y9SaRZ5_E6StvlhzY&callback=initMap"
 async defer></script>

However once i call the div I just get a grey box:

<div id="pryzm" style="width:100%; height:250px; background-color:grey;">

Answer 1

A couple of typos here and there, this is the corrected code:

<script type="text/javascript">
 var map, map2, map3, map4,map5,map6;
 function initialize(condition){
   var pryzmMap ={
     zoom:15,
     center: new google.maps.LatLng(52.474543,-1.914752),
     mapTypeId: google.maps.MapTypeId.ROADMAP
   }
   var indiMap ={
     zoom:15,
     center: new google.maps.LatLng(52.474808,-1.896045),
     mapTypeId: google.maps.MapTypeId.ROADMAP
   }
   var bambuMap ={
     zoom:15,
     center: new google.maps.LatLng(52.475371,-1.896546),
     mapTypeId: google.maps.MapTypeId.ROADMAP
   }
   var map101 ={
     zoom:15,
     center: new google.maps.LatLng(52.473789,-1.895801),
     mapTypeId: google.maps.MapTypeId.ROADMAP
   }
   var playerMap ={
     zoom:15,
     center: new google.maps.LatLng(52.476874,-1.91135),
     mapTypeId: google.maps.MapTypeId.ROADMAP
   }
   var rosMap={
     zoom:15,
     center: new google.maps.LatLng(52.477364,-1.910835),
     mapTypeId: google.maps.MapTypeId.ROADMAP
   }
   map1 = new google.maps.Map(document.getElementById("pryzm"), pryzmMap);
   map2 = new google.maps.Map(document.getElementById("indi"), indiMap);
   map3 = new google.maps.Map(document.getElementById("bambu"), bambuMap);
   map4 = new google.maps.Map(document.getElementById("club101"), map101);
   map5 = new google.maps.Map(document.getElementById("players"), playerMap);
   map6 = new google.maps.Map(document.getElementById("rosies"), rosMap);
 }
</script>

Should work flawlessly, you can compare it to your old code to find what went wrong.