javascript - 多个 jQuery 移动页面上的 Google 地图

Question

我在我的 jQuery 移动应用程序的多个页面上显示我的谷歌地图时遇到问题。我有一个“工作”列表，每个“工作”都有相关的工作信息。作业信息是一个附加页面，并由一个唯一的 jobID 完成，如下所示。我想将“工作”位置的地图添加到每个附加页面。我认为问题可能是我必须在我的谷歌地图功能中更改 id = 'map' 。任何帮助都将得到应用，以便在每个工作的每个页面上获取每个地图。

谷歌地图代码 -

         <script>
              // Initialize and add the map
               function initMap() {
              // The location of the school
              var colaisteChiarain = {lat: 53.3641, lng: -6.4989};
              // The map, centered at Uluru
              var map = new google.maps.Map(
              document.getElementById('map'), {
                zoom: 16, 
                center: colaisteChiarain,
                zoomControl: false,
                scaleControl: false,
                streetViewControl: false,
                mapTypeControl: false,
                fullscreenControl: false,
                  });
             // The marker, positioned at Uluru

          var marker = new google.maps.Marker({position: 
  colaisteChiarain, map: map});
        }
            </script>
            <!--Load the API from the specified URL
            * The async attribute allows the browser to render the page 
  while the API loads
            * The key parameter will contain your own API key (which is 
  not needed for this tutorial)
            * The callback parameter executes the initMap() function
            -->
            <script async defer
            src="https://maps.googleapis.com/maps/api/js? 
 key=AIzaSyCOVjM5TbQis074pESLRehc3PpNBE1sll4&callback=initMap">
            </script>

附加的 jQuery 页面 -

 $("#main_body").append('<div data-role="page" id='+ 
 jobpost.jobID+'>\n\
       <div data-role="header" class="header" data-position="fixed">\n\
          <a href="#page4" class="ui-btn-left" 
    data-icon="user"\n\>Profile</a>EduSub Teacher\n\
     </div>\n\
          <div role="main" 
               id="content">\n\
                                       \n\<div id="map"></div>\n\
                                     <div class="schoolDetails">\n\
                                        <h1>'+ jobpost.title+' 
   Wanted</h1>\n\
                                        <h2><b>Date: </b>'+ 
   jobpost.dateFrom+' </b><b>to </b>'+ jobpost.dateTo+'<br>\n\
                                        <br><br>\n\
                                        <b>Location: </b>'+ 
   jobpost.location+'<br>\n\
                                        <br><br>\n\
                                        <b>Description: </b>'+ 
   jobpost.description+'<br>\n\
                                        </h2>\n\
                                        </div>  \n\
                                    </div>\n\

标签： javascriptjqueryhtmlmaps