Javascript 如何将搜索框放入GMAP中？

我有问题。。我有画布上的gmaps，我添加了一些输入文本，用于在gmaps画布上搜索标记。问题是这个位于gmaps画布外的“搜索输入文本”，如何在gmaps画布内移动“搜索输入文本”？
下面是HTML和maps.JS
HTML:

JavaScript:

函数初始化（）{
var mapOptions、地图、标记、搜索框、城市、，
信息窗口=“”，
addressEl=document.querySelector（“#地图搜索”），
latEl=document.querySelector（'.latitude'），
longEl=document.querySelector（'.longitude'），
element=document.getElementById（'map canvas'）；
城市=document.querySelector（“.reg输入城市”）；
if（$（'#latspan'）.val（）==null）{
var latCar=-6.175350；
}否则{
var latCar=$（'#latspan'）.val（）；
}
if（$（'#lngspan'）.val（）==null）{
var longCar=106.827164；
}否则{
var longCar=$（'#lngspan'）.val（）；
}
映射选项={
//地图放大了多远。
缩放：800，
//销的当前车床和长位置/
中心：新google.maps.LatLng（latCar，longCar），
//中心：{
//lat:-34.397，
//液化天然气：150.644
// },
disableDefaultUI:false，//如果设置为true，则禁用地图上的缩放控件等控件
scrollWheel:true，//如果设置为false，则禁用地图上的滚动。
draggable:true，//如果设置为false，则无法移动地图。
//mapTypeId:google.maps.mapTypeId.HYBRID，//如果设置为在sat和ROADMAP之间混合，也可以设置为SATELLITE。
//maxZoom:11，//不允许您缩放超过此值
//minZoom:9//不允许你再往上爬。
};
/**
*通过传递canvas的id和
*我们刚才创建的mapOptions对象作为其参数。
*
*/
//使用构造函数map（）创建对象映射
map=new google.maps.map（element，mappoptions）；//直到这类代码加载到地图。
/**
*在地图上创建标记
*
*/
marker=新的google.maps.marker({
位置：mapOptions.center，
地图：地图，
//图标：'http://pngimages.net/sites/default/files/google-maps-png-image-70164.png',
真的，
动画：google.maps.animation.DROP
});
/**
*创建搜索框
*/
searchBox=newgoogle.maps.places.searchBox（addressEl）；
/**
*当在搜索框中更改位置时，它会将标记带到搜索位置。
*/
google.maps.event.addListener（搜索框，'places\u changed'，函数（）{
var places=searchBox.getPlaces（），
bounds=新的google.maps.LatLngBounds（），
i、 地点、纬度、长度、结果射线、，
addresss=places[0]。格式化的\u地址；
for（i=0；place=places[i]；i++）{
边界.延伸（place.geometry.location）；
marker.setPosition（place.geometry.location）；//设置新的标记位置。
}
map.fitBounds（bounds）；//适合边界
setZoom（15）；//此函数将缩放设置为15，表示缩放到15级。
//log（map.getZoom（））；
lat=marker.getPosition（）.lat（）；
long=marker.getPosition（）.lng（）；
latEl.value=lat；
longEl.value=long；
resultArray=places[0]。地址\组件；
//获取城市并将城市输入值设置为所选值
对于（var i=0；i<div class="form-group ">
   <input id="map-search" class="controls" type="text" placeholder="Search Box" size="50%" >
   <div id="map-canvas"></div>
</div>

function initialize() {

    var mapOptions, map, marker, searchBox, city,
        infoWindow = '',
        addressEl = document.querySelector( '#map-search' ),
        latEl = document.querySelector( '.latitude' ),
        longEl = document.querySelector( '.longitude' ),

        element = document.getElementById( 'map-canvas' );
    city = document.querySelector( '.reg-input-city' );

    if($('#latspan' ).val() == null){
        var latCar = -6.175350;
    } else { 
        var latCar =  $('#latspan').val();
    }

    if($('#lngspan').val() == null){
        var longCar = 106.827164;
    } else { 
        var longCar =  $('#lngspan').val();
    }

    mapOptions = {
        // How far the maps zooms in.
        zoom: 800,
        // Current Lat and Long position of the pin/

        center: new google.maps.LatLng( latCar, longCar ),
        // center : {
        //  lat: -34.397,
        //  lng: 150.644
        // },
        disableDefaultUI: false, // Disables the controls like zoom control on the map if set to true
        scrollWheel: true, // If set to false disables the scrolling on the map.
        draggable: true, // If set to false , you cannot move the map around.
        // mapTypeId: google.maps.MapTypeId.HYBRID, // If set to HYBRID its between sat and ROADMAP, Can be set to SATELLITE as well.
        // maxZoom: 11, // Wont allow you to zoom more than this
        // minZoom: 9  // Wont allow you to go more up.

    };

    /**
     * Creates the map using google function google.maps.Map() by passing the id of canvas and
     * mapOptions object that we just created above as its parameters.
     *
     */
    // Create an object map with the constructor function Map()
    map = new google.maps.Map( element, mapOptions ); // Till this like of code it loads up the map.

    /**
     * Creates the marker on the map
     *
     */
    marker = new google.maps.Marker({
        position: mapOptions.center,
        map: map,
        // icon: 'http://pngimages.net/sites/default/files/google-maps-png-image-70164.png',
        draggable: true,
        animation: google.maps.Animation.DROP
    });

    /**
     * Creates a search box
     */
    searchBox = new google.maps.places.SearchBox( addressEl );

    /**
     * When the place is changed on search box, it takes the marker to the searched location.
     */
    google.maps.event.addListener( searchBox, 'places_changed', function () {
        var places = searchBox.getPlaces(),
            bounds = new google.maps.LatLngBounds(),
            i, place, lat, long, resultArray,
            addresss = places[0].formatted_address;

        for( i = 0; place = places[i]; i++ ) {
            bounds.extend( place.geometry.location );
            marker.setPosition( place.geometry.location );  // Set marker position new.
        }

        map.fitBounds( bounds );  // Fit to the bound
        map.setZoom( 15 ); // This function sets the zoom to 15, meaning zooms to level 15.
        // console.log( map.getZoom() );

        lat = marker.getPosition().lat();
        long = marker.getPosition().lng();
        latEl.value = lat;
        longEl.value = long;

        resultArray =  places[0].address_components;

        // Get the city and set the city input value to the one selected
        for( var i = 0; i < resultArray.length; i++ ) {
            if ( resultArray[ i ].types[0] && 'administrative_area_level_2' === resultArray[ i ].types[0] ) {
                citi = resultArray[ i ].long_name;
                city.value = citi;
            }
        }

        // Closes the previous info window if it already exists
        if ( infoWindow ) {
            infoWindow.close();
        }
        /**
         * Creates the info Window at the top of the marker
         */
        infoWindow = new google.maps.InfoWindow({
            content: addresss
        });

        infoWindow.open( map, marker );
    } );


    /**
     * Finds the new position of the marker when the marker is dragged.
     */
    google.maps.event.addListener( marker, "dragend", function ( event ) {
        var lat, long, address, resultArray, citi;

        console.log( 'i am dragged' );
        lat = marker.getPosition().lat();
        long = marker.getPosition().lng();

        var geocoder = new google.maps.Geocoder();
        geocoder.geocode( { latLng: marker.getPosition() }, function ( result, status ) {
            if ( 'OK' === status ) {  // This line can also be written like if ( status == google.maps.GeocoderStatus.OK ) {
                address = result[0].formatted_address;
                resultArray =  result[0].address_components;

                // Get the city and set the city input value to the one selected
                // for( var i = 0; i < resultArray.length; i++ ) {
                //  if ( resultArray[ i ].types[0] && 'administrative_area_level_2' === resultArray[ i ].types[0] ) {
                //      citi = resultArray[ i ].long_name;
                //      console.log( citi );
                //      city.value = citi;
                //  }
                // }
                //addressEl.value = address;
                latEl.value = lat;
                longEl.value = long;

            } else {
                console.log( 'Geocode was not successful for the following reason: ' + status );
            }

            // Closes the previous info window if it already exists
            if ( infoWindow ) {
                infoWindow.close();
            }

            /**
             * Creates the info Window at the top of the marker
             */
            infoWindow = new google.maps.InfoWindow({
                content: address
            });

            infoWindow.open( map, marker );
        } );
    });


}

 var searchBox = new google.maps.places.SearchBox(document.getElementById('map-search'));
 map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('map-search'));