Javascript 谷歌地图api试图允许用户将图像上传到信息窗口

目前正在做一个大学地理信息系统项目，它允许用户拍摄他们看到的鸟类的照片，并在谷歌地图上找到它们的地方用标记上传它们

我已经获得了地理位置，添加了标记和一个可点击的信息窗口，但是有人知道如何允许用户在这个信息窗口中上传照片吗

还有，我应该如何存储它们，以便在用户上传它们后它们仍留在地图上

我已经包括了我的代码和到目前为止我所拥有的图像

任何帮助我都将不胜感激，我觉得我简直是在胡思乱想

干杯

劳拉

//将提示用户同意地理定位。
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
中心：{纬度：-34.397，液化天然气：150.644}，
缩放：6
});
var marker=new google.maps.marker（{map:map，draggable:true}）；
//HTML5地理定位。
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（函数（位置）{
var pos={
纬度：位置坐标纬度，
lng:position.coords.longitude
};
标记器设置位置（pos）；
地图设置中心（pos）；
}，函数（）{
handleLocationError（true，infoWindow，map.getCenter（））；
});
}否则{
//浏览器不支持地理位置
handleLocationError（false，marker，map.getCenter（））；
}
//创建信息窗口内容
var infoWindowContent=''+
"" +
“姓名：”+
“地址：”+
“类型：”+
“鸟”+
“鸟”+
" " +
"" +
""; +
'';
//单击标记时显示我们的信息窗口
var infoWindow=new google.maps.infoWindow({
内容：infoWindowContent
});
google.maps.event.addListener（标记'click'，函数（）{
信息窗口。打开（地图、标记）；
}); 
}
功能手柄位置错误（浏览器有地理位置、标记、位置）{
标记器设置位置（pos）；
marker.setContent（browserHasGeolocation？
“错误：地理位置服务失败。”：
'错误：您的浏览器不支持地理位置。'）；
}

<script>

  //The user will be prompted to give consent to geolocation.

  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 6
    });
    var marker = new google.maps.Marker({map: map, draggable: true});

    //HTML5 geolocation.

    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var pos = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
        marker.setPosition(pos);
        map.setCenter(pos);
        }, function() {
        handleLocationError(true, infoWindow, map.getCenter());
      });

    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, marker, map.getCenter());
    }
    // Create the info window content   
var infoWindowContent = '<div class="info_content">' +
    "<table>" +
             "<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" +
             "<tr><td>Address:</td> <td><input type='text' id='address'/></td> </tr>" +
             "<tr><td>Type:</td> <td><select id='type'>" +
             "<option value='bird' SELECTED>bird</option>" +
             "<option value='bird'>bird</option>" +
             "</select> </td></tr>" +
             "<tr><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>" +
             "<tr><td><input type='button' value='Add Image' onclick='saveData()'/></td></tr>"; +

'</div>';



   // Display our info window when the marker is clicked
    var infoWindow = new google.maps.InfoWindow({
    content: infoWindowContent
});
    google.maps.event.addListener(marker, 'click', function() {
    infoWindow.open(map, marker);
}); 

  }

  function handleLocationError(browserHasGeolocation, marker, pos) {
    marker.setPosition(pos);
    marker.setContent(browserHasGeolocation ?
                          'Error: The Geolocation service failed.' :
                          'Error: Your browser doesn\'t support geolocation.');
  }


    </script>