Beginner here- I created a gmap with 2 markers (restaurants I like). Each marker has an infowindow with a button that opens a modal form. The form contains a input with id textinput-2
that I would like to 'prepopulate' with the restaurant name.
Here's my javascript:
var issuebutton =
'<!-- Button trigger modal -->'
+'<button type="button" class="btn btn-outline-primary shadow-none" data-toggle="modal" data-target="#issueModal">'
+'Report an issue'
+'</button>'
;
var markersOnMap = [{Name: "Restaurant A", LatLng:[{lat: 40.729915, lng: -74.000264}]},{Name: "Restaurant B", LatLng:[{lat: 40.682579, lng: -73.993147}]}]
function addMarkerInfo() {
for (var i = 0; i < markersOnMap.length; i++) {
var contentString = '<div><b>'+markersOnMap[i].Name+'</b><br>'+issuebutton;
const marker = new google.maps.Marker({
position: markersOnMap[i].LatLng[0],
map: map,
icon: './images/marker.png'
});
const infowindow = new google.maps.InfoWindow({
content: contentString,
});
marker.addListener('click', function () {
closeOtherInfo();
infowindow.open(marker.get('map'), marker);
InforObj[0] = infowindow;
});
};
}
function closeOtherInfo() {
if (InforObj.length > 0) {
InforObj[0].set("marker", null);
InforObj[0].close();
InforObj.length = 0;
}
}
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: {lat: 40.710848, lng: -73.9677},
animation: google.maps.Animation.DROP,;
}
The restaurant name populates perfect in the infowindow using markersOnMap[i].Name
but textinput-2
of my form is blank.
Here's the form:
<div class="modal fade" id="issueModal" tabindex="-1" role="dialog" aria-labelledby="issueModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Restaurant Name</label>
<div class="col-md-4">
<input id="textinput-2" name="textinput" type="text" placeholder="" class="form-control input-md">
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I think I have to use the below snippet, but I'm not sure where to place within my code:
document.getElementById('textinput-2').value = markersOnMap[i].Name;