title: Displaying Multiple Google Maps on one page
body: <p>I am having a bit of trouble which should be easy but I am missing something but not sure what. I have the code in two separate js files then call them in the head. </p>
  
  <p>These are the two maps.</p>
  
  <p><a href="http://www.mesquiteweather.net/gmap/aqiCurrent.js" rel="nofollow">http://www.mesquiteweather.net/gmap/aqiCurrent.js</a></p>
  
  <p><a href="http://www.mesquiteweather.net/gmap/aqiForecast.js" rel="nofollow">http://www.mesquiteweather.net/gmap/aqiForecast.js</a></p>
  
  <p>Then I would add this in the head section. This works great for single maps on one page but not two.</p>
  
  <pre><code>   &lt;script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAmOjwJpRcp48pn7smsrprlnN90iYBxR8g&amp;sensor=false"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="gmap/aqiCurrent.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="gmap/aqiForecast.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="initialize()"&gt;
  </code></pre>
  
  <p>Then I call the maps in the html like so.</p>
  
  <pre><code>&lt;div id="aqiCurrent" style="width:100%; height:400px"&gt; &lt;/div&gt;
  
  &lt;div id="aqiForecast" style="width:100%; height:400px"&gt; &lt;/div&gt;
  </code></pre>
  
  <p>It only displays the second map not the first one. If I remove one of the calls from the head then the first one shows. So I know the code is good because I can get one or the other to load and display. I just can't get them both to load and display at the same time. I am not sure what I am missing.</p>
  
  <p>-Thanks</p>