https://charlotteclerk.com/js/googleMaps.js

1$(document).ready(() => {
2
3    // DISABLE GET ROUTE SCRIPT
4    let disableGetRouteBtn = () => $("#txtSource").val() === "" ? $("#idGetRoute").prop('disabled', true) : $("#idGetRoute").prop('disabled', false);
5
6    $("#CharlotteClerkMapModal").on('shown.bs.modal', function () {
7        disableGetRouteBtn()
8    });
9
10    $("#txtSource").on("input", () => {
11        disableGetRouteBtn()
12        initAutocomplete()
13
14    })
15
16    // LOCATION AUTOCOMPLETE
17
18    let placeSearch;
19    let autocomplete;
20    function initAutocomplete() {
21        autocomplete = new google.maps.places.Autocomplete(
22            document.getElementById("txtSource"),
23            { types: ["geocode"] }
24        );
25        autocomplete.setFields(["address_component"]);
26    }
27
28    directionsService = new google.maps.DirectionsService();
29    directionsDisplay = new google.maps.DirectionsRenderer({ draggable: true });
30    initMap();
31
32    $("#idParkingOnMap").hide();
33    setTimeout(function () {
34        $("#txtSource").focus();
35    }, 1000);
36
37    function initMap() {
38        var geocoder = new google.maps.Geocoder();
39
40        var e = document.getElementById("ddlCourtAddresses");
41
42        destination = e.options[e.selectedIndex].value;
43        var mapOptions = {
44            mapTypeId: google.maps.MapTypeId.TERRAIN,
45            center: new google.maps.LatLng(54.0, -3.0),
46            disableDefaultUI: true,
47            zoom: 17,
48        };
49
50        var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
51
52        geocoder.geocode({ address: destination }, function (results, status) {
53            if (status == google.maps.GeocoderStatus.OK) {
54                result = results[0].geometry.location;
55                map.setCenter(result);
56            }
57        });
58    }
59
60    $("#ddlCourtAddresses").on("change", function () {
61        GetDestination();
62        initMap();
63
64        if (document.getElementById("txtSource").value.length > 0) {
65            source = document.getElementById("txtSource").value;
66            GetRoute();
67        }
68    });
69    let switchBuildingSelect = (place) => {
70        switch (place) {
71            case 'Murdock':
72                return $(
73                    "#CharlotteClerkMapModal select option[value='18500 Murdock Circle, Port Charlotte, FL 33948']"
74                ).prop("selected", true);
75            case 'Justice Center':
76                return $(
77                    "#CharlotteClerkMapModal select option[value='350 East Marion Avenue, Punta Gorda, FL 33950']"
78                ).prop("selected", true);
79            case 'Mac V. Horton West County Annex':
80                return $(
81                    "#CharlotteClerkMapModal select option[value='6868 San Casa Blvd, Englewood, Florida 34224']"
82                ).prop("selected", true);
83            case 'Charlotte County Tax Collector':
84                return $(
85                    "#CharlotteClerkMapModal select option[value='410 Taylor Street, Punta Gorda, Florida 33950']"
86                ).prop("selected", true);
87            case 'Charlotte County Fire Station 13':
88                return $(
89                    "#CharlotteClerkMapModal select option[value='6868 San Casa Drive, Englewood, Florida 34224']"
90                ).prop("selected", true);
91            case 'AAA Port Charlotte':
92                return $(
93                    "#CharlotteClerkMapModal select option[value='21229 Olean Blvd, Port Charlotte, Florida 33952']"
94                ).prop("selected", true);
95        }
96    }
97
98    $(".CharlotteClerkMapModal").click((e) => {
99        switchBuildingSelect($(e.target).data("map"))
100        $("#ddlCourtAddresses").trigger("change");
101    });
102
103    $("#txtSource").keyup((e) => {
104        if (e.which == 13)
105            // Enter key
106            GetRoute();
107    });
108
109    function GetDestination() {
110        var e = document.getElementById("ddlCourtAddresses");
111        var destination = e.options[e.selectedIndex].value;
112
113        if (destination.indexOf("Select") > -1) {
114            destination = "350 East Marion Avenue, Punta Gorda, FL 33950";
115        }
116
117        return destination;
118    }
119
120    function delayLoad() {
121        document.getElementById("idGetRoute").click();
122    }
123
124    function successCallback(position) {
125        document.getElementById("txtSource").value =
126            position.coords.latitude + "," + position.coords.longitude;
127    }
128
129    $("#idPrint").click(() => {
130        $("#idParkingOnMap").show();
131        $("#idGetRoute").hide();
132        $("#idPrint").hide();
133        var startingWidth = $("#dvMap").width();
134        $("#dvMap").width(900);

135
136        var prtContent = document.getElementById("idMapPrint");
137        var WinPrint = window.open(
138            "",
139            "",
140            "left=2000,top=2000,width=800,height=900,toolbar=0,scrollbars=0,status=0"
141        );
142        WinPrint.document.write(prtContent.innerHTML);
143        WinPrint.document.close();
144        WinPrint.focus();
145        WinPrint.print();
146        WinPrint.close();
147
148        $("#idParkingOnMap").hide();
149        $("#idGetRoute").show();
150        $("#idPrint").show();
151        $("#dvMap").width(startingWidth);
152    });
153
154    $("#idGetRoute").click(() => {
155        GetRoute();
156    });
157
158    function GetRoute() {
159        source = document.getElementById("txtSource").value;
160
161        var mapOptions = {
162            zoom: 7,
163            disableDefaultUI: true,
164        };
165        map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
166        directionsDisplay.setMap(map);
167        directionsDisplay.setPanel(document.getElementById("dvPanel"));
168
169        //*********DIRECTIONS AND ROUTE**********************//
170
171        destination = GetDestination(); //document.getElementById("txtDestination").value;
172
173        var request = {
174            origin: source,
175            destination: destination,
176            travelMode: google.maps.TravelMode.DRIVING,
177        };
178        directionsService.route(request, function (response, status) {
179            if (status == google.maps.DirectionsStatus.OK) {
180                directionsDisplay.setDirections(response);
181            }
182        });
183
184        //*********DISTANCE AND DURATION**********************//
185        var service = new google.maps.DistanceMatrixService();
186        service.getDistanceMatrix(
187            {
188                origins: [source],
189                destinations: [destination],
190                travelMode: google.maps.TravelMode.DRIVING,
191                unitSystem: google.maps.UnitSystem.IMPERIAL,
192                avoidHighways: false,
193                avoidTolls: false,
194            },
195            function (response, status) {
196                if (
197                    status == google.maps.DistanceMatrixStatus.OK &&
198                    response.rows[0].elements[0].status != "ZERO_RESULTS"
199                ) {
200                    var distance = response.rows[0].elements[0].distance.text;
201                    var duration = response.rows[0].elements[0].duration.text;
202                    var dvDistance = document.getElementById("dvDistance");
203                    dvDistance.innerHTML = `<pre>Distance: ${distance} ${window.innerWidth < 500 ? "<br>" : "  "
204                        }Duration: ${duration}</pre>`;
205                } else {
206                }
207            }
208        );
209    }
210})