how to set save lat long on maps?

when i select driver it shows me saved position in map but i want to draw polygon on map with saved lat Long on that position. how i can draw saved polygon on map? I am saving lat long in db like:
"[33.10225218323796,74.11554111433361,33.10225218323796,74.11554111433361]" I have shared my script and controller.

My Script:

    $('#driver_name').change(function (id) {
        $.ajax({
            url: '' +'/'+ $(this).val(),
            type: 'get',
            datatype: 'json',
            success: function (response) {
                var map = new google.maps.Map(document.getElementById('map'), {
                    center: {lat: JSON.parse(response)[0], lng: JSON.parse(response)[1]},
                    zoom: 6
                });
                var i;
                var arrCoords = [];

                for (i = 0; i < arrCoords.length; i++) {
                    arrCoords = [
                        new google.maps.LatLng(arrCoords.getPath(response)[i], arrCoords.getPath(response)[i + 1]),
                        // new google.maps.LatLng(30.3753, 66.3451),
                        // new google.maps.LatLng(30.3753, 65.3451),
                        // new google.maps.LatLng(29.3753, 63.3451),
                        // new google.maps.LatLng(51.477654, -0.002192)
                    ];
                }
                console.log(arrCoords);

                var polygon = new google.maps.Polygon({
                    editable: true,
                    paths: arrCoords,
                    strokeColor: "#FF0000",
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: "#FF0000",
                    fillOpacity: 0.35,
                    map: map,
                    draggable: true,
                    geodesic: true,
                });
                polygon.setMap(map);

                google.maps.event.addListener(polygon, 'dragend', function (evt) {
                    console.log(evt.latLng.lat(), '--', evt.latLng.lng());
                });

                // google.maps.event.addListener(polygon.getPath(), 'insert_at', function(index, obj) {
                //     console.log('Vertex removed from inner path.');
                //     console.log(obj.lat() ,'--',  obj.lng() );
                // });

                google.maps.event.addListener(polygon.getPath(), 'set_at', function (index, obj) {
                    console.log('Vertex moved on outer path.');
                    console.log(obj.lat(), '--', obj.lng());

                    var Array = [];

                    Array.push(obj.lat(), obj.lng(), obj.lat(), obj.lng());

                    $('#lat_long').val(JSON.stringify(Array));

                    var value = $('#lat_long').val();
                    value = JSON.parse(value);
                });

            }
        });
    });


</script>

Controller:

    public function getDriverLatLong($id)
{
    $getDriverLatLong = (new Zones())->where('driver_id', '=', $id)->get(['lat_long']);
    if(count($getDriverLatLong)>0){
        $getDriverLatLong = json_decode($getDriverLatLong[0]->lat_long);
    }else{
        $getDriverLatLong = [];
    }

    return $getDriverLatLong;
}

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2UjteeG
via IFTTT