Not sure if this has something to do with a recently past ios update, but my GoogleMaps api does not display and is just blank gray until you search for an address. It was working before and the code has not changed. This happens on any browser on tablet/phone (works fine on desktop mac). The only error I can retrieve on the inspector console is "SyntaxError: Expected an identifier but found 'self' instead". This has been an issue for a while, and has been hard to troubleshoot as I do not have a personal mac to inspect. To be clear, it works on everything else. Windows laptop, and any Android device. Lastly the api is being used on a website and not on an app.
var myService = myService || {};
locationFinder.Service.js: 2SyntaxError: Expected an identifier but found 'self' instead
myService.locationFinder = myService.locationFinder || {};
myService.locationFinder.service = myService.locationFinder.service || (function Init() {
let self = this;
self.currentRequest = null;
self.updatesEnabled = true;
self.serviceUrls = {
base: "/api/Locations",
};
self.mapMarkers = [];
self.locations = null;
self.infowindow = null;
self.currentBranchFilters = [];
self.allBranchFilters = [];
self.currentAtmFilters = [];
self.allAtmFilters = [];
self.branchesSelected = true;
self.atmSelected = false;
self.zoomLevel = 7;
self.setCanUpdate = (enable) => {
self.updatesEnabled = enable;
}
self.getEmptyLocaitonSearchRequestObject = () => {
return {
"street": "",
"city": "",
"state": "",
"postalCode": "",
"serviceId": "00000000-0000-0000-0000-000000000000",
"type": "all",
"radius": 200,
"branchServices": {},
"atmServices": {},
"resetCache": false
};
}
self.selectBranch = (selected) => {
self.branchesSelected = selected;
if (self.currentBranchFilters.length > 0) {
self.updateCurrentSearchRequest({
branchServices: self.currentBranchFilters
});
}
else if (self.branchesSelected) {
self.updateCurrentSearchRequest({
branchServices: self.allBranchFilters
});
}
else {
self.updateCurrentSearchRequest({
branchServices: []
});
}
}
self.selectBranchFilters = (selectedFilters) => {
self.currentBranchFilters = selectedFilters;
if (self.currentBranchFilters.length > 0) {
self.updateCurrentSearchRequest({
branchServices: self.currentBranchFilters
});
}
else if (self.branchesSelected) {
self.updateCurrentSearchRequest({
branchServices: self.allBranchFilters
});
}
else {
self.updateCurrentSearchRequest({
branchServices: []
});
}
}
self.selectAtm = (selected) => {
self.atmSelected = selected;
if (self.currentAtmFilters.length > 0) {
self.updateCurrentSearchRequest({
atmServices: self.currentAtmFilters
});
}
else if (self.atmSelected) {
self.updateCurrentSearchRequest({
atmServices: self.allAtmFilters
});
}
else {
self.updateCurrentSearchRequest({
atmServices: []
});
}
}
self.selectAtmFilters = (selectedFilters) => {
self.currentAtmFilters = selectedFilters;
if (self.currentAtmFilters.length > 0) {
self.updateCurrentSearchRequest({
atmServices: self.currentAtmFilters
});
}
else if (self.atmSelected) {
self.updateCurrentSearchRequest({
atmServices: self.allAtmFilters
});
}
else {
self.updateCurrentSearchRequest({
atmServices: []
});
}
}
self.clearFilters = () => {
self.currentBranchFilters = [];
self.currentAtmFilters = [];
self.branchesSelected = true;
self.atmSelected = false;
self.updateCurrentSearchRequest({
branchServices: self.allBranchFilters,
atmServices: []
});
}
self.getCurrentSearchRequest = () => {
if (self.currentRequest == null) {
self.currentRequest = self.getEmptyLocaitonSearchRequestObject();
}
return self.currentRequest;
}
self.updateCurrentSearchRequest = (update) => {
if (self.currentRequest == null) {
self.getCurrentSearchRequest();
}
Object.assign(self.currentRequest, update);
}
self.getLocations = async (reload) => {
//post current request object and update
if (reload || self.location === null) {
let request = self.getCurrentSearchRequest();
request.latitude = self.map.center.lat();
request.longitude = self.map.center.lng();
self.locations = await self.postToApi("/", request);
}
return self.locations;
};
self.getAtmFilters = async () => {
return await self.getFromApi("/atmoptions", {});
}
self.getBranchFilters = async () => {
return await self.getFromApi("/branchoptions", {});
}
self.map = null;
self.setGoogleMap = (map) => {
self.map = map;
}
self.getGoogleMap = () => {
return self.map;
}
self.getGoogleDirectionLink = (location) => {
return "https://www.google.com/maps/dir/?api=1&destination=" + encodeURI(location.address.street + " " + location.address.city + ", " + location.address.state + " " + location.address.postalCode);
}
self.iconBase = "/ResourcePackages/Bootstrap4myService/assets/dist/images/";
self.icons = ["icon--map-pin-atm.png", "icon--map-pin-branch.png", "icon--map-pin-atm.png", "icon--map-pin-atm.png"]
self.addMarkerToMap = (latlng, location) => {
let icon = self.iconBase;
if (location) {
if (location.pinType == 'Branch') {
icon += self.icons[1]
}
if (location.pinType == 'ATM') {
icon += self.icons[2]
}
if (location.pinType == 'Surcharge ATM') {
icon += self.icons[3]
}
}
else {
icon += self.icons[0]
}
const marker = new google.maps.Marker({
position: latlng,
map: self.map,
icon: icon
});
self.mapMarkers.push(marker);
marker.setVisible(true);
if (location) {
marker.title = location.name
let locationName = location.title;
if (location.displayTitle != null && location.displayTitle.length > 0) {
locationName += " - " + location.displayTitle;
}
let contentString =
"<div class='marker__title'>" + locationName + "</div> " +
"<div class='marker__address'>" + location.address.street + " " + location.address.city + ", " + location.address.state + location.address.postalCode + "</div> " +
"<a class='marker__link' href='" + self.getGoogleDirectionLink(location) + "'>Directions</a>";
marker.addListener("click", () => {
var $location = $('#location' + self.mapMarkers.indexOf(marker));
var $locationToggle = $location.find('.location__toggle');
var $locationContent = $locationToggle.next();
var $list = $location.parent();
if (!$locationToggle.hasClass('active')) {
if (self.infowindow) {
self.infowindow.close();
}
self.infowindow = new google.maps.InfoWindow({
content: contentString
});
// close any existing location toggles and close all info windows from other markers
$('.location__content.show').collapse('hide').prev().removeClass('active');
// scroll to location in list
setTimeout(function () {
var locationScroll = $location.offset().top - $list.offset().top + $list.scrollTop();
$list.animate({
scrollTop: locationScroll
}, 500, function () {
$locationContent.collapse('show');
$locationToggle.addClass('active');
});
}, 200);
self.infowindow.open(self.map, marker);
}
});
}
};
self.clearAllMapMarkers = () => {
for (let i = 0; i < self.mapMarkers.length; i++) {
self.mapMarkers[i].setMap(null);
}
self.mapMarkers = [];
};
self.getMapMarkers = (index) => {
var marker = self.mapMarkers[index];
return marker;
};
self.getInfoWindow = () => {
return self.infowindow;
};
self.setInfoWindow = (infowindow) => {
self.infowindow = infowindow;
};
//helpers
self.getFromApi = (endpoint, params) => {
let url = self.formatServiceUrl(endpoint, params)
// Fetch results and return promise
return fetch(url)
.then(data => data.json())
.catch(err => console.log(err));
};
self.postToApi = (endpoint, payload) => {
let url = self.formatServiceUrl(endpoint, {})
// Fetch results and return promise
return fetch(url, {
method: 'POST',
mode: 'cors',
cache: 'no-cache',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(payload)
})
.then(data => data.json())
.catch(err => console.log(err));
};
self.formatServiceUrl = (endpoint, params) => {
//remove empty params
Object.keys(params).forEach(
key =>
(params[key] == null || params[key] == "" || params[key] == []) &&
delete params[key]
);
let url = self.serviceUrls.base + endpoint;
// Format query string on API endpoint
if (params && Object.keys(params).length) {
let query = Object.keys(params)
.map(k => {
if (Array.isArray(params[k])) {
return params[k]
.map(v => encodeURIComponent(k) + "=" + encodeURIComponent(v))
.join("&");
} else {
return encodeURIComponent(k) + "=" + encodeURIComponent(params[k]);
}
})
.join("&");
url += (url.indexOf("?") === -1 ? "?" : "&") + query;
}
return url;
};
self.getBranchFilters().then(data => {
self.allBranchFilters = data;
self.selectBranch(true);
});
self.getAtmFilters().then(data => {
self.allAtmFilters = data;
});
return {
getLocations: self.getLocations,
updateCurrentSearchRequest: self.updateCurrentSearchRequest,
getCurrentSearchRequest: self.getCurrentSearchRequest,
getAtmFilters: self.getAtmFilters,
getBranchFilters: self.getBranchFilters,
setGoogleMap: self.setGoogleMap,
getGoogleMap: self.getGoogleMap,
clearAllMapMarkers: self.clearAllMapMarkers,
addMapMarker: self.addMarkerToMap,
getGoogleDirectionLink: self.getGoogleDirectionLink,
setCanUpdate: self.setCanUpdate,
getMapMarkers: self.getMapMarkers,
setInfoWindow: self.setInfoWindow,
getInfoWindow: self.getInfoWindow,
selectBranch: self.selectBranch,
selectAtm: self.selectAtm,
selectBranchFilters: self.selectBranchFilters,
selectAtmFilters: self.selectAtmFilters,
clearFilters: self.clearFilters,
getSelected: () => { return { branchesSelected: self.branchesSelected, atmSelected: self.atmSelected } },
hasLoaded: () => { return self.allAtmFilters.length > 0 && self.allBranchFilters.length > 0 },
updatesEnabled: () => { return self.updatesEnabled },
getZoomLevel: () => { return self.zoomLevel },
setZoomLevel: (newZoomLevel) => { self.zoomLevel = newZoomLevel }
};
})();