Google Maps API doesn't work on IOS safari

Question

UPDATE: it doesn't work only on safari mobile (chrome for ios works correctly).

I am trying to get user location using google maps API.

It works correctly on desktop FF and Chrome (shows city and country) but it doesn't show anything on iOS safari (iOS 11). Also it seems that it doesn't work properly on some other mobile devices.

Note that I am using HTTPS so there are no problems with security.

Here's javascript code:

function getLocation(){
    if (navigator.geolocation){
        navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
    else{
        document.getElementById("userlocation").innerHTML="Geolocation is not supported by this browser.";
    }
}

function showPosition(position){
    lat=position.coords.latitude;
    lon=position.coords.longitude;
    displayLocation(lat,lon);
}

function showError(error){
    switch(error.code){
        case error.PERMISSION_DENIED:
            document.getElementById("userlocation").innerHTML="User denied the request for Geolocation."
        break;
        case error.POSITION_UNAVAILABLE:
            document.getElementById("userlocation").innerHTML="Location information is unavailable."
        break;
        case error.TIMEOUT:
            document.getElementById("userlocation").innerHTML="The request to get user location timed out."
        break;
        case error.UNKNOWN_ERROR:
            document.getElementById("userlocation").innerHTML="An unknown error occurred."
        break;
    }
}

function displayLocation(latitude,longitude){
    var geocoder;
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(latitude, longitude);

    geocoder.geocode(
        {'latLng': latlng}, 
        function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[0]) {
                    var add= results[0].formatted_address ;
                    var  value=add.split(",");

                    count=value.length;
                    country=value[count-1];
                    state=value[count-2];
                    city=value[count-3];
                    document.getElementById("userlocation").innerHTML = city + ", " + country;
                }
                else  {
                    document.getElementById("userlocation").innerHTML = "address not found";
                }
            }
            else {
                document.getElementById("userlocation").innerHTML = "Geocoder failed due to: " + status;
            }
        }
    );
}

And here's HTML:

<body onload="getLocation()">
  <p id="userlocation">Getting your location ...</p>
</body>

Thanks in advance.

Answer 1

In your mobile device, you have to enabled the geolocation for safari in the settings. If the geolocation is disabled, nothing will append.

Try this manipulation:

Go to settings.
Next, go to the confidentiality (with a hand in the left of the scroll menu).
Then, click to the location service bar.
Scroll down and accept the location's service for safari.

Tell me if you have some questions

Google Maps API doesn't work on IOS safari

Question

1 answers

solution1
0 2017-10-02 09:27:57

Google Maps API doesn't work on IOS safari

Question

1 answers

solution1 0 2017-10-02 09:27:57

solution1
0 2017-10-02 09:27:57