title: How can I call the div inside my JavaScript HTML so the map will be drawn on each post displayed on the page?
body: <p>So this is a little complicated. I'm doing a university assignment using Firebase Firestore. Basically I have a page that displays information that is filled in on a separate page each entry into my database has a latitude and longitude value and I want to have a map on each entry that is displayed, so inside my JavaScript folder where I am writing HTML for how I want the info displayed I have the map div (I'm gonna use the doc.id for a unique identifier but for the time being I'm just trying to get the map working).</p>
  <p>I'm getting this error</p>
  <pre><code>&quot;Map: Expected mapDiv of type Element but was passed null.&quot;
  </code></pre>
  <p>Which I presume is because it can't find my div so my question is how can I make it find the div?</p>
  <pre><code>let map;
  
  function initMap() {
    map = new google.maps.Map(document.getElementById(&quot;map&quot;), {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8,
    });
  }
  
  maleRef.onSnapshot(snapshot =&gt; {
      let hacks = [];
      snapshot.forEach(doc =&gt; {
          hacks.push({...doc.data(), id: doc.id})
      });
      // console.log(hacks);
      let html = ``;
      hacks.forEach(hacks =&gt; {        
          html += 
          `
          &lt;div class=&quot;col-6&quot;&gt;
              &lt;div class=&quot;item&quot;&gt;
                  &lt;h4 id=&quot;itemName&quot;&gt;${hacks.name}&lt;/h4&gt;
                  &lt;hr&gt;
                  &lt;div class=&quot;row&quot;&gt;
                      &lt;div class=&quot;col-4&quot;&gt;
                          &lt;img id=&quot;itemPhoto&quot; src=&quot;${hacks.photo}&quot;&gt;
                      &lt;/div&gt;
                      &lt;div id=&quot;itemInfo&quot; class=&quot;col-8&quot;&gt;
                          &lt;p&gt;&lt;b&gt;Age:&lt;/b&gt;&lt;/p&gt;
                          &lt;p&gt;${hacks.age}&lt;/p&gt;&lt;br&gt;&lt;br&gt;
                          &lt;p&gt;&lt;b&gt;Gender:&lt;/b&gt;&lt;/p&gt;
                          &lt;p&gt;${hacks.gender}&lt;/p&gt;&lt;br&gt;&lt;br&gt;
                          &lt;p&gt;&lt;b&gt;Email:&lt;/b&gt;&lt;/p&gt;
                          &lt;p&gt;${hacks.email}&lt;/p&gt;&lt;br&gt;&lt;br&gt;
                          &lt;p&gt;&lt;b&gt;Number:&lt;/b&gt;&lt;/p&gt;
                          &lt;p&gt;${hacks.number}&lt;/p&gt;&lt;br&gt;&lt;br&gt;
                          &lt;p&gt;&lt;b&gt;Address:&lt;/b&gt;&lt;/p&gt;
                          &lt;p&gt;${hacks.address}&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div style=&quot;width=80%; height: 200px;&quot; id=&quot;map&quot;&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          `
          document.querySelector('.maleContainer').innerHTML = html;
      
      });
  });
  </code></pre>
  <p>This is the order I have the script links which I believe to be correct</p>
  <pre><code>    &lt;script src=&quot;/__/firebase/8.4.2/firebase-app.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;/__/firebase/8.4.1/firebase-firestore.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;/__/firebase/8.4.1/firebase-functions.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;/__/firebase/init.js&quot;&gt;&lt;/script&gt;
      &lt;script async src=&quot;https://maps.googleapis.com/maps/api/js?key=MY-KEY&amp;callback=initMap&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;js/permition.js&quot;&gt;&lt;/script&gt;
  </code></pre>