javascript - 一页上有多个谷歌地图，不起作用

Question

我的代码如下，用于在我的网页上启用谷歌地图的脚本，我有 6 个想要显示的 map ，我也有 api key ，但是没有任何效果。 我从之前给有相同问题的用户的答案中得到了这个解决方案。 [已编辑]

  <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>

但是，一旦我调用 div，我只会得到一个灰色框:

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

Answer 1

这里那里有一些错别字，这是更正后的代码:

<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>

应该可以完美运行，您可以将其与旧代码进行比较以找出问题所在。