A week or so ago, when I was working on styling for Mobile on Safari, the google map was not loading.

The root cause issue was on the map page is a drop down that was defaulted to “My Current Location”.

This drop down causes the software to ask the visitor for permission to capture the visitors’s geo-location on the planet.

If the user says “sure go ahead” then the map that is shown to the user centers at the users location and an automatic database search shows the jobs, companies and candidates in a 50 mile radius from the visitors location and so the visitor has a better user experience.

If the visitor says “no don’t capture my location” then the map does not know where the user is on the plant and so shows the user a default map centered on Mapertunity world headquarters in Miami Florida. This is ok but the visitor then has to go through some additional steps to center the map on their current location in the world, still a good visitor experience but not the ideal best user experience.

Also a lot of times, if people are like me, they close the permission request popup without even reading it. It only asks you once, unless you clear your browser cache or come in incognito.

This all worked great, and has been working great, since at least December 2019 on Chrome.

However, on Safari, it spit the dummy and when visitors visited the site with an iPhone that also runs the Safari browser, the user never saw a map because an error was thrown and it was a terrible user experience.

The issue was, Safari does not support the command for “navigator.permissions.query” which is what the browser uses to ask for user permissions.

For Chrome however, this is a requirement.

So the issue is, I need one set of commands for Chrome and a different set of commands for Safari.

Sounds like an “IF” statement to me.

But the new issue is I needed a way to detect if the user was visiting from Chrome or if the user was visiting on Safari.

And luckily there is a build in browser command that works on both Safari and Chrome for determining just such a question: “navigator.userAgent”.

Buried in the userAgent method is the information I needed to determine which browser type as well as version numbers and a whole shopping list of other useful or not so useful information.

I have tested it out on both Chrome and Safari and it worked ok.

I re-enabled the code for the user drop down “My Current Location” on Chrome and I will re-work the “IF” statement code so that it also works on Safari browsers which will also mean it will work on iPhones as well.

Then test, test, test.

Doug