Question

I'm unsure how to explain this properly, but I basically want to display markers via Google API on a map and have a link on them to directions to that location. However, currently it only works if the user allows their location to be tracked.

What I want to do is to have basically those markers in both situations, where user does and does not allow their location to be tracked, but just the link would be changed.

So if the user allows their location to be tracked, the link would be

var reittiohjeet = "https://www.google.fi/maps/dir/"+pos+"/"+osoite;

And if the user rejects their location to be tracked, the link would be

var reittiohjeet2 = "https://www.google.fi/maps/dir/current+location/"+osoite;

I tried creating alternative function that would be ran in the if(navigator.geolocation)'s else clause, but that didn't seem to do anything at all.

function initialize() {
    var mapOptions =  {
        center: new google.maps.LatLng(60.174,24.927),
        zoom: 8
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            var pos = new google.maps.LatLng(position.coords.latitude,
                                             position.coords.longitude);

            // Luo marker
            var image = 'user-location.png';
            var userMarker = new google.maps.Marker({
                position: pos,
                map: map,
                icon: image
            });

            map.setCenter(pos);

            setMarkers(map, shops, pos);
        }, function() {
            handleNoGeolocation(true);
        });
    } else {
        handleNoGeolocation(false);
    }
}

function setMarkers(map, locations, pos) {

    for (var i = 0; i < locations.length; i++) {
        var shop = locations[i];
        var myLatLng = new google.maps.LatLng(shop[1], shop[2]);
        var nimi = shop[0];
        var osoite = shop[5];
        var puhelinnumero = shop[3];
        var verkkosivu = shop[4];
        var reittiohjeet = "https://www.google.fi/maps/dir/"+pos+"/"+osoite;
        var content = "<div class='content'><h3>"+nimi+"</h3><strong>Osoite:</strong> "+osoite+"<br /><strong>Puhelinnumero:</strong> "+puhelinnumero+"<br /><strong>Verkkosivu:</strong> <a href='"+verkkosivu+"' target='_blank'>"+verkkosivu+"</a><br /><br /><a href='"+reittiohjeet+"'>Reittiohjeet</a></div>";
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: shop[0]
        });

        var infowindow = new google.maps.InfoWindow()

        google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
            return function() {
                infowindow.setContent(content);
                infowindow.open(map,marker);
            };
        })(marker,content,infowindow));  
    }
}
Was it helpful?

Solution

The statement in the else-clause will only be executed when the browser doesn't support geolocation.

When the user denies access the function defined as 2nd argument of getCurrentPosition will be executed.

Note: in Firefox this will not work as expected, see: Firefox 11 and GeoLocation denial callback

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top