不能在一个网页中使用谷歌地图 API 显示多个地理位置

我使用googleapi在一个页面中显示多个地方的地理位置，但这是不可能的。

我初始化一个变量来计算地图：

var countmaps=1;

我循环执行以下操作（对于我要显示的每个地图）：

首先，我从xml文件中获取经度和纬度。这是有效的：

var lat= latitude[0].childNodes[0].nodeValue;
var lon= longitude[0].childNodes[0].nodeValue;

在此之后，我创建了一个新的段落元素来保存每个地图：

var newmap=document.createElement('p');

元素的 id 是第一个映射的 map1，第二个映射的 map2，依此类推。

newmap.id="maps" + countmaps;

然后，我将 id 保存在一个变量中：

var getid= "maps" + countmaps;

我将新元素附加到一个名为 section 的div 中：

section.appendChild(newmap);

到目前为止，一切正常。然后我定义用于显示地图的函数。我从w3schools拿走了它们：

    function getLocation()
      {
            if (navigator.geolocation)
        {
        navigator.geolocation.getCurrentPosition(showPosition,showError);
        }
      else{x.innerHTML="Geolocation is not supported by this browser.";//not important
      }
      }
    function showPosition()
      {
      var latlon=lat+","+lon;
      var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
      +latlon+"&zoom=14&size=400x300&sensor=false";
    //i get element with id map1 in the first loop, map2 in the second etc in the below
      document.getElementById(getid).innerHTML="<img src='"+img_url+"'>";
      }
    function showError(error)
      {
      switch(error.code) 
        {
        case error.PERMISSION_DENIED:
          document.getElementById(getid).innerHTML="MAP Not Available"
          break;
        case error.POSITION_UNAVAILABLE:
         document.getElementById(getid).innerHTML="MAP Not Available"
          break;
        case error.TIMEOUT:
          document.getElementById(getid).innerHTML="MAP Not Available"
          break;
        case error.UNKNOWN_ERROR:
          document.getElementById(getid).innerHTML="MAP Not Available"
          break;
        }

 }

最后，我调用 getlocation 函数并增加元素 ID 的计数器。

getLocation();
 countmaps++;

在大多数情况下，我只得到了最后一张地图。你能解释一下这种行为吗？