Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 140161

Pass gmaps infowindow value to form

$
0
0

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;

Viewing all articles
Browse latest Browse all 140161

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>