how to refresh maps with ajax request?

I want to reload map in ajax call.This code is reloading whole page when i change status it reloads whole page.I want after 10 seconds only map reloads not whole page. if i select on change available then map reloads after every 10 seconds in available option.

i have drivers if i select status of driver available then map shows the drivers which are available. i want to refresh map after 10 sec so that i can see if there is any other driver available. if available then it will show on map without reloading whole page. This is what i want.

i am refreshing content in some div of the page by using jQuery load() function but its not working.

Html:

                <div class="row">
                    <div class="col-md-12">
                        <div id="map" style="height: 550px;">
                            <div id="time">
                                <?php echo date('H:i:s');?>
                            </div>
                        </div>
                    </div>
                </div>

Script:

     $('#status').change(function () {
                var job_status = $(this).val();
                $.ajax({
                    url: '' + '/' + $(this).val(),
                    type: 'get',
                    datatype: 'json',
                    success: function (response) {
                        setInterval("my_function();", 10000);

                        function my_function() {
                            $('#map').load(location.href + ' #time');
                        }


                        var map = new google.maps.Map(document.getElementById('map'), {
                            zoom: 10,
                            center: {lat: 31.5204, lng: 74.3587},
                            mapTypeId: 'roadmap'
                        });

                        var infowindow = new google.maps.InfoWindow({});
                        var marker, i;
                        ';--}}


                        if (gmarkers.length > 0) {
                            for (i = 0; i < gmarkers.length; i++) {
                                if (gmarkers[i].getMap() != null) {
                                    gmarkers[i].setMap(null);
                                } else {
                                    gmarkers[i].getMap();
                                    gmarkers[i].setMap(map);
                                }
                            }
                            gmarkers = [];
                        }


                        for (i = 0; i < locationData.length; i++) {

                            if (job_status == 8) {

                                if (job_status === '') {
                                    gmarkers = [];
                                }
                                else {
                                    for (i = 0; i < locationData2.length; i++) {

                                        marker = new google.maps.Marker({
                                            position: new google.maps.LatLng(locationData2[i]['driver_lat'], locationData2[i]['driver_long']),
                                            map: map,
                                            optimized: false,
                                            icon: ''

                                        });

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

                                            return function () {
                                                infowindow.setContent('<h6><b>' + locationData2[i]['first_name'] + '</h6>');
                                                infowindow.open(map, marker);
                                            }
                                        })(marker, i));


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

                                            return function () {
                                                infowindow.setContent();
                                                infowindow.close(marker);

                                            }
                                        })(marker, i));

                                        // Push your newly created marker into the array:
                                        gmarkers.push(marker);

                                        var myoverlay = new google.maps.OverlayView();
                                        myoverlay.draw = function () {
                                            // add an id to the layer that includes all the markers so you can use it in CSS
                                            this.getPanes().markerLayer.id = 'markerLayer';
                                        };
                                        myoverlay.setMap(map);


                                    }
                                }
                            }
                       });

from how to refresh maps with ajax request?