如何在响应式视图中定位谷歌地图

I have a google maps page in my website ,so everything is fine normal browser view but when I try to look at this page from responsive view (Mobile) the map is at the exact same location as the checkboxes ,I would like it to be under the checkboxes so it is not in the way ,how could position it when it is in responsive view ?

Normal view

Mobile view

Googlemaps.js

var map;
var infowindow;
var lat;
var lng;
var types = [];
var service;

$('#details').hide();

initGeolocation();

function initGeolocation()
{
    if( navigator.geolocation )
    {
        // Call getCurrentPosition with success and failure callbacks
        navigator.geolocation.getCurrentPosition( success, fail );
    }
    else
    {
        alert("Sorry, your browser does not support geolocation services.");
    }
}

function success(position)
{

    lng = position.coords.longitude;
    lat = position.coords.latitude;
    initMap();
}

function fail()
{
    alert("Could not obtain location");
}


function initMap() {
    //var pyrmont = {lat: -33.867, lng: 151.195};
    var pyrmont = {lat: lat, lng: lng};

    map = new google.maps.Map(document.getElementById('map'), {
        center: pyrmont,
        zoom: 15
    });

    infowindow = new google.maps.InfoWindow();
    service = new google.maps.places.PlacesService(map);
    if(types.length > 0) {
        $.each( types, function( key, value ) {
            service.nearbySearch({
                location: pyrmont,
                radius: 8000,
                type: [value]
            }, callback);
        });
    }
}

function callback(results, status) {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {
            createMarker(results[i]);
        }
    }
}

function createMarker(place) {
    var placeLoc = place.geometry.location;

    var marker = new google.maps.Marker({
        map: map,
        position: place.geometry.location,
        types: place.types
    });


    google.maps.event.addListener(marker, 'click', function() {

        service.getDetails({
                placeId: place.place_id
            }, function (place, status) {
                /*
                 var marker = new google.maps.Marker({
                 name: place.name,
                 map: map,
                 position: place.geometry.location,
                 types: place.types
                 });

                 markers.push(marker);
                 */

                if (status === google.maps.places.PlacesServiceStatus.OK) {
                    var review = [];
                    if (undefined !== place.reviews && place.reviews.length) {
                        for (var i = 0; i < place.reviews.length; i++) {
                            if (place.reviews[i].text) {
                                review.push('<b>Author Name:</b>&nbsp;' + place.reviews[i].author_name + '</br>' + '<b>Review:</b>&nbsp;' + place.reviews[i].text + '</br>');
                            }
                        }
                    } else {
                        review.push('Not Available');

                    }
                    $('#details').show();
                    $('#name').html(place.name);
                    $('#rating').html(place.rating + ' ' + 'Star(s)');
                    $('#address').html(place.adr_address);
                    $('#review').html(review);

                }
            }
        );
        infowindow.setContent(place.name);
        infowindow.open(map, this);
    });
}

function gymMarkers() {
    var check = $('#gym').is(':checked');
    if (check) {
        types.push('gym');
        initGeolocation();
    } else {
        var removeItem = 'gym';

        types = jQuery.grep(types, function(value) {
            return value != removeItem;
        });

        initGeolocation();


    }
    $('#details').hide();
}

//Park markers
function parkMarkers() {
    var check = $('#park').is(':checked');
    if (check) {
        types.push('park');
        initGeolocation();
    } else {
        var removeItem = 'park';

        types = jQuery.grep(types, function(value) {
            return value != removeItem;
        });

        initGeolocation();

    }

    $('#details').hide();
}

//Store markers
function storeMarkers() {
    var check = $('#store').is(':checked');
    if (check) {
        types.push('store');
        initGeolocation();
    } else {
        var removeItem = 'store';

        types = jQuery.grep(types, function(value) {
            return value != removeItem;
        });

        initGeolocation();


    }

    $('#details').hide();
}

//Museum markers
function museumMarkers() {
    var check = $('#museum').is(':checked');
    if (check) {
        types.push('museum');
        initGeolocation();
    } else {
        var removeItem = 'museum';

        types = jQuery.grep(types, function(value) {
            return value != removeItem;
        });

        initGeolocation();


    }

    $('#details').hide();
}

//Zoo markers
function zooMarkers() {
    var check = $('#zoo').is(':checked');
    if (check) {
        types.push('zoo');
        initGeolocation();
    } else {
        var removeItem = 'zoo';

        types = jQuery.grep(types, function(value) {
            return value != removeItem;
        });

        initGeolocation();


    }

    $('#details').hide();
}

//Cafe markers
function cafeMarkers() {
    var check = $('#cafe').is(':checked');
    if (check) {
        types.push('cafe');
        initGeolocation();
    } else {
        var removeItem = 'cafe';

        types = jQuery.grep(types, function(value) {
            return value != removeItem;
        });

        initGeolocation();

    }

    $('#details').hide();
}

function atmMarkers() {
    var check = $('#atm').is(':checked');

    if (check) {
        types.push('atm');
        initGeolocation();
    } else {
        var removeItem = 'atm';

        types = jQuery.grep(types, function(value) {
            return value != removeItem;
        });

        initGeolocation();

    }

    $('#details').hide();
}

function bankMarkers() {
    var check = $('#bank').is(':checked');
    if (check) {
        types.push('bank');
        initGeolocation();
    } else {
        var removeItem = 'bank';

        types = jQuery.grep(types, function(value) {
            return value != removeItem;
        });

        initGeolocation();


    }

    $('#details').hide();
}

function barMarkers() {
    var check = $('#bar').is(':checked');
    if (check) {
        types.push('bar');
        initGeolocation();
    } else {
        var removeItem = 'bar';

        types = jQuery.grep(types, function(value) {
            return value != removeItem;
        });

        initGeolocation();


    }

    $('#details').hide();
}

function meal_takeawayMarkers() {
    var check = $('#meal_takeaway').is(':checked');
    if (check) {
        types.push('meal_takeaway');
        initGeolocation();
    } else {
        var removeItem = 'meal_takeaway';

        types = jQuery.grep(types, function(value) {
            return value != removeItem;
        });

        initGeolocation();


    }

    $('#details').hide();
}

function night_clubMarkers() {
    var check = $('#night_club').is(':checked');
    if (check) {
        types.push('night_club');
        initGeolocation();
    } else {
        var removeItem = 'night_club';

        types = jQuery.grep(types, function(value) {
            return value != removeItem;
        });

        initGeolocation();


    }

    $('#details').hide();
}

function parkingMarkers() {
    var check = $('#parking').is(':checked');
    if (check) {
        types.push('parking');
        initGeolocation();
    } else {
        var removeItem = 'parking';

        types = jQuery.grep(types, function(value) {
            return value != removeItem;
        });

        initGeolocation();


    }

    $('#details').hide();
}

front.blade.php

@extends('layouts.master')

<style>

    div#searchBar{
        height:65px;
        width:400px;
        float:right;
        padding-right:40px;
    }
    div#map{

        float:left;
        padding-right:50px;
    }

</style>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


</head>
@section('content')
    <div class="container">

    <!-- This is a *view* - HTML markup that defines the appearance of your UI -->

    <div id='searchBar'>
        <div class="panel panel-default">
            <div class="panel-body">

                <blockquote> <p> <h2>Search: </h2></blockquote><strong data-bind="text: location"></strong></p><br>
        <p><input type='checkbox' onclick="gymMarkers();" id='gym'> Gyms
        <input type='checkbox' onclick="parkMarkers();" id='park'>Parks <input type='checkbox' onclick="barMarkers();" id='bar'> Bar  </p><br>
        <p><input type='checkbox' onclick="storeMarkers();" id='store'> Stores <input type='checkbox' onclick="museumMarkers();" id='museum'> Museums  <input type='checkbox' onclick="meal_takeawayMarkers();" id='meal_takeaway'> Meal takeaway</p><br>

        <p><input type='checkbox' onclick="zooMarkers();" id='zoo'> Zoos
       <input type='checkbox' onclick="cafeMarkers();" id='cafe'> Cafes <input type='checkbox' onclick="night_clubMarkers();" id='night_club'> Night club</p><br>
        <p><input type='checkbox' onclick="atmMarkers();" id='atm'> ATM <input type='checkbox' onclick="bankMarkers();" id='bank'> Bank  <input type='checkbox' onclick="parkingMarkers();" id='parking'> Parking  </p><br>
    </div>
    </div>
        </div>


        {{--Google maps--}}
        <div id="map"></div>
    </div>
    <div class="container">
        {{--Cafe details--}}
        <div id="details" style="visibility:false">

            <table class="table table-bordered table-hover" style="width: 800px; margin-top: 10px;">

                <thead>
                <tr><th scope="row">
                    <td colspan="2" style="text-align: center;"><b>Description</b></td>
                </tr>
                <tr>
                </thead>

                    <td width="150"><b>Name</b></td>
                    <td id="name"></td>
                </tr>
                <tr>
                    <td width="150"><b>Rating</b></td>
                    <td id="rating"></td>
                </tr>
                <tr>
                    <td width="150"><b>Address</b></td>
                    <td id="address"></td>
                </tr>
                <tr>
                    <td width="150"><b>User Review</b></td>
                    <td id="review"></td>
                </tr>
            </table>
            </table>

    </div>
        {{--Review--}}
        <div>
            <ul class="reviews"></ul>
        </div>
        {{--Example--}}
        <div>
            <ul class="example"></ul>
        </div>
    </div>
    </div>

@endsection

master.blad.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>
        Laramap
    </title>

    </meta>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <link href="{{asset('css/style.css')}}" rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="{{asset('css/main.css')}}">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet"  type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"  />
    </link>

</head>
<body>
<div id="app">
    <nav class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="navbar-header">
            @if (Auth::guest())

            @else

            @endif
            <!-- Collapsed Hamburger -->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
                    <span class="sr-only">Toggle Navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <!-- Branding Image -->
                <a class="navbar-brand" href="{{ url('/') }}">
                    {{ config('app.name', 'Laravel') }}
                </a>
            </div>

            <div class="collapse navbar-collapse" id="app-navbar-collapse">
                <!-- Left Side Of Navbar -->
                <ul class="nav navbar-nav">
                    &nbsp; @if (Auth::guest())

                    @else

                    @endif
                    <li>
                        <div class="for-group" style="padding-top:10px;">
                            <input type="text" id="searching_for" placeholder="Search for a user" style="width: 300px;" class="form-control">

                        </div>

                    </li>

                </ul>


                <a class="navbar-brand" href="{{ url('/front') }}">
                    {{ config('front', 'Nearby') }}

                </a>

                <a class="navbar-brand" href="{{ url('/suggest') }}">
                    {{ config('suggest', 'Suggest Me') }}

                </a>

                <a class="navbar-brand" href="{{ url('/calendar') }}">
                    {{ config('calendar', 'Events') }}

                </a>

                <a class="navbar-brand" href="{{ url('/home') }}">
                    {{ config('home', 'Home') }}

                </a>
                <!-- Right Side Of Navbar -->
                <ul class="nav navbar-nav navbar-right">

                    <!-- Authentication Links -->
                    @if (Auth::guest())

                        <li><a href="{{ route('login') }}">Login</a></li>
                        <li><a href="{{ route('register') }}">Register</a></li>

                    @else
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                                {{ Auth::user()->name }} <span class="caret"></span>
                            </a>

                            <ul class="dropdown-menu" role="menu">
                                <li><a href="{{url('/home')}}"><i class="fa fa-btn fa-cogs"></i>Home</a></li>

                                <li><a href="{{url('/profile/'.Auth::user()->id)}}"><i class="fa fa-btn fa-user"></i>My Profile</a></li>
                                <li><a href="{{url('/settings')}}"><i class="fa fa-btn fa-cogs"></i>Settings</a></li>
                                <li><a href="{{url('/front')}}"><i class="fa fa-btn fa-cogs"></i>Map</a></li>

                                <li>
                                    <a href="{{ route('logout') }}"
                                       onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                        Logout
                                    </a>



                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                        {{ csrf_field() }}
                                    </form>
                                </li>







                            </ul>
                        </li>
                    @endif
                </ul>
            </div>
        </div>
    </nav>

    @yield('content')
    <script crossorigin="anonymous" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" src="https://code.jquery.com/jquery-3.1.0.min.js">
    </script>
    {{-- Google map api  --}}

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4NNeHbNb1_nFhKnckNxMKpxXeQUecenM&libraries=places&sensor=false" async defer></script>


    <script src="{{asset('js/googleMaps.js')}}"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="{{ URL::to('src/js/app2.js') }}"></script>
@yield('js')

</body>
</html>

its a matter of CSS what you have here, i see some bootstrap classes in the HTML, so you can try something like this:

<div id="row">
   <div id="col-xs-12">
      <div id="map"></div>
   </div>
</div>

Anyway, you should read the grid section of bootstrap page, to learn more about it

https://getbootstrap.com/docs/4.0/layout/grid/

Hope it helps

You're using Bootstrap, so just make use of their grid system. For example, you should not need any inline styles for #searchBar. For #map, all you need is a height:

div#map {
    height:500px;
}

Next use this in your front.blade.php:

<div class="row">
    <div class="col-sm-6">
        <div id="map"></div>
    </div>

    <div class="col-sm-6">
        <div class="panel panel-default">
            ... Your search panel ... 
        </div>
    </div>
</div>

The map will display to the left of the search panel until the browser is less than 768px wide, at which point the search panel will drop below the map. You can read up about the grid system in the Bootstrap 3 docs (note it looks like the main Bootstrap site now shows Bootstrap 4 info, but your CSS is for Bootstrap 3).

Also, I noticed a problem in your code - the <head>...</head> in your front.blade.php will not work. The <head> html has already been generated in your master.blade.php layout, appending another one later on won't work and might break some browsers. In this particular case it seems to be unnecessary anyway - you're already bootstrap.min.css in master.blade.php.