<div class="modal fade" id="customer_map_modal" data-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header text-left">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="pg-close fs-20"></i>
                </button>
                <h5 class="bold"><?php echo CommonLanguage::getMessage('map');?></h5>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12" id="map" style="width:100%;height:450px;background:#95a5a6">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal"><?php print CommonLanguage::getMessage('Close'); ?></button>
                <button class="btn btn-primary" id="submit_long_lat"><?php print CommonLanguage::getMessage('Save'); ?></button>
            </div>
        </div>
    </div>
</div>
<script>
    var current_map,markers = [],longitude,latitude;
    var inital_lng_val = <?php echo json_encode(smc_session()['default_setting']['customer_map_lng']); ?>,
     inital_lat_val = <?php echo json_encode(smc_session()['default_setting']['customer_map_lat']); ?>,
     inital_lng =  inital_lng_val != '' ? inital_lng_val : '33.5571',
     inital_lat =  inital_lat_val != '' ? inital_lat_val : '35.3729';
     
    $(function(){
        $('#customer_map_modal').on('shown.bs.modal',function(){
            initMap();
            deleteMarkers();
        });

        $('#submit_long_lat').on('click',function(){
            $('#Customer_Lng').val(longitude);
            $('#Customer_Lat').val(latitude);
            $('#customer_map_modal').modal('hide');
        });

    });
    function initMap(){
        var mapOptions = {
            center: new google.maps.LatLng(inital_lng,inital_lat),
            zoom: 11,
            mapTypeId: google.maps.MapTypeId.MAP
        };
        current_map =  new google.maps.Map(document.getElementById("map"), mapOptions);
        google.maps.event.addListener(current_map, 'click', function(event) {
            deleteMarkers();
            placeMarker(event.latLng);
        });
    }
    function placeMarker(location){
        console.log(location)
        var marker = new google.maps.Marker({
            position: location,
            map: current_map
        });
        longitude = location.lng();
        latitude = location.lat();
        markers.push(marker);
    }

    // Sets the map on all markers in the array.
    function setMapOnAll(map) {
        for (var i = 0; i < markers.length; i++) {
            markers[i].setMap(map);
        }
    }
    // Removes the markers from the map, but keeps them in the array.
    function clearMarkers() {
        setMapOnAll(null);
    }
    // Deletes all markers in the array by removing references to them.
    function deleteMarkers() {
        clearMarkers();
        markers = [];
    }
</script>