Btukfyl

I would like to place the Google Maps search box inside of the gray navbar at the top of my page. However, I can't seem to figure out the balance between styling and Google Maps API to pull the search box away from the map.

Here's what I have for my JavaScript

 //Initialize map function

 function initAutocomplete() {



//setting variable for location of Portland, ME by latitude and longitude coordinates

var portland = {

    lat: 43.6591,

    lng: -70.2568

};



//Centering map in portland

map = new google.maps.Map(document.getElementById('map'), {

    center: portland,

    zoom: 15,

    mapTypeId: 'roadmap'

});



//Links searchbox in UI to javascript functionality

var input = document.getElementById("mapSearch");

var searchBox = new google.maps.places.SearchBox(input); map.controls[google.maps.ControlPosition.TOP_LEFT].push(input)



//Biases searchBox results towards map's viewport (centered at portland)

map.addListener('bounds_changed', function() {

    searchBox.setBounds(map.getBounds());

});



var markers = ;

//Listener for when user selects a predicted text to get more details

searchBox.addListener('places_changed', function() {

    var places = searchBox.getPlaces();

    if (places.length == 0) {

        return;

    }



    //Clears out old markers

    markers.forEach(function(marker) {

        marker.setMap(null);

    });

    markers = ;



    //For each result, get the name of each location

    var bounds = portland;

    places.forEach(function(place) {

        if (!place.geometry) {

            console.log("No results available at this time");

            return;

        }



        //Creates Marker for each place

        markers.push(new google.maps.Marker({

            map: map,

            label: place.name,

            position: place.geometry.location

        }));

    });

    //fits map within bias bounds

    map.fitBounds(bounds)

 })

}

Here's what I have for HTML:

    <div class="container-fluid">

    <nav class="navbar navbar-light bg-light">

        <a class="navbar-brand" href="#">Where you want to eat</a>

        <form class="form-inline">

            <input id="mapSearch" class="controls" type="text" placeholder="Search">

        </form>

    </nav>



    <!--div holding google maps-->

    <div id="map"></div>

</div>

I know the issue lies in this portion of the code:

var input = document.getElementById("mapSearch");

var searchBox = new google.maps.places.SearchBox(input); map.controls[google.maps.ControlPosition.TOP_LEFT].push(input)

I've tried all of the following methods to no avail. Some of these methods move the search box to the navbar as I want it to, but then that throws an "Uncaught (in promise) TypeError" in the console which then stops the entire thing from functioning:

• commenting out "var input" altogether


• passing the "mapSearch" element ID through the push function


• removing the "[google.maps.ControlPosition.TOP_LEFT]" portion of the code, as well as changing with the position property if not eliminating it altogether


• identifying the "mapSearch" element through jQuery instead of using document.getElementById
  -CSS styling the #mapSearch ID through relative and absolute positions, and changing the top and left/right properties with those
  -removing the entire "map.controls[google.maps.ControlPosition.TOP_LEFT].push(input)" altogether

I apologize if my wording isn't correct. I'm a relatively new coder, and this is something I'm building out in the second round of an interview for a jr. dev position. I've tried searching through Stack Overflow and through the Google API over the last few days and I'm completely stuck.