I am working with two fields: one is a textarea and the other is an image field.
<textarea name="siteplan" id="siteplan" class="form-control" rows="10"></textarea>The image field looks like this:
<input type="file" name="image" id="image">Here is the text that I want to insert into the textarea:
var city = new google.maps.LatLng(43.20976, -79.96596);
var point1 = new google.maps.LatLng(43.20500, -79.96390);
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(43.2052,-79.9684),
new google.maps.LatLng(43.2146,-79.9627));
var mapOptions = {
zoom: 16,
center: city,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<div id="bodyContent">'+
'<p><b>Ancaster Glen</b> - 435 Garner Rd E, Ancaster</p>' +
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 300
});
var marker = new google.maps.Marker({
position: point1,
map: map,
title:"Ancaster Glen"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
var oldmap = new google.maps.GroundOverlay(
'/images/IMAGE.png',
imageBounds);
oldmap.setMap(map);
I would like to replace IMAGE.png in the above text with the name of the image uploaded through the input file field. Is this doable? Any assistance on how to achieve this would be highly appreciated.
Thank you in advance.