FloatBackOfffice/application/views/admin/view_gas_station_map.php

<div class="row">
    <div class="container-fluid">
        <h2 class="text-center" style="background-color: #1E88E5;color: white; padding: 10px;">Gas station Map</h2>
        <div class="row">
            <div class="col-md-7">
                <div class="panel panel-default">
                    <div class="panel-heading">Map</div>
                    <div class="panel-body">
                        <div id="map" style="border:1px;border-style: dotted; height:750px;"></div>
                    </div>
                </div>

            </div>
            <div class="col-md-5">
                <form action="" class="form-horizontal">
                    <div class="panel panel-default">
                        <div class="panel-heading">Station list</div>
                        <div class="panel-body">
                            <div class="form-group">
                                <label for="start_location" class="col-sm-3 control-label text-right">Start
                                    localtion</label>
                                <div class="col-sm-9">
                                    <input type="search" class="form-control" id="start_location" name="start_location"
                                           placeholder="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="end_location" class="col-sm-3 control-label text-right">End
                                    localtion</label>
                                <div class="col-sm-9">
                                    <input type="search" class="form-control" id="station_location"
                                           name="station_location" placeholder="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="end_location" class="col-sm-3 control-label text-right">Order by</label>
                                <div class="col-sm-9">
                                    <select class="form-control" id="order_by" name="order_by">
                                        <option value="title">Name</option>
                                        <option value="distance">Distance</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-12 text-center">
                                <button type="button" id="btn_search" onclick="fn_search();" class="btn btn-primary">Search</button>
                            </div>

                            <div class="clearfix"></div>
                            <table id="tbl_gas" class="table table-bordered table-striped" style="margin-top: 10px">
                                <thead>
                                <tr>
                                    <th>Brand</th>
                                    <th>Distance (miles)</th>
                                    <th>Price (regular)</th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    window.locations = [
        // ['Bondi Beach', -33.890542, 151.274856, 4],
        // ['Coogee Beach', -33.923036, 151.259052, 5],
        // ['Cronulla Beach', -34.028249, 151.157507, 3],
        // ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
        // ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];
    window.center = {
        lat: 52.5228,
        lng: 13.41
    };
    let geocoder;

    function initMap() {
        geocoder = new google.maps.Geocoder();
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            center: new google.maps.LatLng(window.center.lat, window.center.lng),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var infowindow = new google.maps.InfoWindow();

        var marker, i;

        for (i = 0; i < window.locations.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map
            });

            google.maps.event.addListener(marker, 'click', (function (marker, i) {
                return function () {
                    infowindow.setContent(locations[i][0]);
                    infowindow.open(map, marker);
                }
            })(marker, i));
        }
    }
    function codeLatLng(lat, lng, fcallback) {
        var latlng = new google.maps.LatLng(lat, lng);
        geocoder.geocode({
            'latLng': latlng
        }, function (results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                if (results[1]) {
                    console.log(results);
                    fcallback(results[0]);
                } else {
                    fcallback(false);
                }
            } else {
                fcallback(false);
            }
        });
    }
    const $tbl_gas = $("#tbl_gas");
    const $tbody = $tbl_gas.find('tbody');
    const $btn_search = $("#btn_search");

    function fn_search() {
        $tbody.html('');
        $btn_search.attr('disabled','disabled').text('Searching...');
        const start_location = $("#start_location").val();
        let start_location_split = start_location.split(',');

        let lat = start_location_split[0].trim();
        let lng = start_location_split[1].trim();
        window.center = {
            lat: 52.5228,
            lng: 13.41
        };
        codeLatLng(lat, lng, fn_call_api_search);
        //52.5228,13.41
    }
    function fn_call_api_search(results){
        console.log(results);
        let is_sg = false;
        if(results !== false){
            results.address_components.every(function(item, index){
                if(item.short_name == 'Sg' || item.short_name == 'Singapore'){
                    is_sg = true;
                    return false; //break;
                }
                return true; //next
            });
        }
        const start_location = $("#start_location").val();
        const order_by = $("#order_by").val();
        var settings = {
            //https://goldenowl.intg01-dev.float.sg
            url: `https://goldenowl.intg01-dev.float.sg/search-gas-stations?start=${start_location}&order_by=${order_by}&is_sg=${is_sg}`,
            method: "GET",
            timeout: 0,
            crossDomain: true,
            dataType: "json",
        };
        $.ajax(settings).done(function (response) {
            fill_tbl_gas(response.results.locations);
        }).always(function(){
            $btn_search.removeAttr('disabled').text('Search');
        });
    }

    function fill_tbl_gas(data_locations) {
        if (data_locations.length === 0) {
            $tbody.html(`
                <tr>
                    <td colspan="3">Empty data</td>
                </tr>
            `);
            return;
        }
        window.center = {
            lat: data_locations[0].position.lat,
            lng: data_locations[0].position.lng,
        };
        window.locations = data_locations.map(function (item, index) {
            return [item.title, item.position.lat, item.position.lng];
        });
        initMap();
        $tbody.html('');
        data_locations.forEach(function (item) {
            $tbody.append(`
                <tr>
                    <td>${item.title}</td>
                    <td>${item.distance}</td>
                    <td>${item.price || ''}</td>
                </tr>
            `);
        });
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvjiRTxngOQyBP4zpqFlZuiquc0ROvo9c&callback=initMap" async
        defer></script>