CODEWITHSUNDEEP
javascriptjquerygoogle-maps-api-3geolocation
Dadou
Dadou

Reputation: 1008

Geolocation possible, but inactive

I'm using Modernizr to help detect different things on a browser. Now, I know most recent browsers support geolocation (caniuse chart here), but what if it is turned off by the user preferences? In that case, Modernizr returns true with the geolocation class on the html tag since it does have support.

I've been using geolocation support to make a "get directions" type of map. Here's the gist of it:

What works

Where I'am stuck

I've been looking around and can't seem to find any documentation on how to deal with a browser (mobile or not) which does support geolocation but has it disabled by user preferences.

What I've been working with

CSS

I'm working off of this here post which shows a working solution where the user is shown a map with directions to the proper destination if geolocation is supported. In the case where geolocation is not supported, I have an alternate content div ready to show.

/* geo location is supported */
html.geolocation #regular-map {
    display: block;
}
html.geolocation #alternate-map {
    display: none;
}
/* geo location is NOT supported, show alternate map */
html.no-geolocation #regular-map {
    display: none;
}
html.no-geolocation #alternate-map {
    display: block;
}

What I've tried

Permission denied error code

I've tried using this type of detection to see if the user has blocked geolocation (based on this post), but when I test it on a browser where I did block it, I get the notification of "supported":

if(navigator.geolocation)
{
    alert("supported");
}
else
{
    function errorCallback(error)
    {
        if (error.code = error.PERMISSION_DENIED)
        {
            alert("blocked");
        }   
        else
        {
            alert("not supported");
        }
    }
}

Bottom Line

Bottom line, what I need is to see if the browser supports geolocation, but the user has chosen to Deny using geolocation services.

Edit

The general idea is like this. I'm more comfortable with PHP, so here's the idea:

<?php
    if($hasgeosupport)
    {
?>
        <script src="hassupport.js"></script>
        <div id="geolocation"></div>
<?php
    }
    else
    if($hasgeosupport)
    {
?>
        <script src="fallback.js"></script>
        <div id="fallback"></div>
<?php
    }
?>

Edit 2

Here's where I'm at, this morning. I have the code creating the proper HTML structure. However, the map is not loading.

if (navigator.geolocation)
{
    $(document).ready(function() { 
        // Does not create HTML without the above line
        $.getScript('js/maps.js'); // includes required scripts and variables needed
        var regular_map = '<div data-role="content"><div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;"><div id="map_canvas" style="height:350px;"></div></div><div id="results" style="display:none;"><div id="directions"></div></div></div>';
        $("#basic-map").prepend(regular_map);
    }
}
else
{
    // fallback here
}

I don't know why this is not working for me. I have the proper scripts, the HTML is generated.

Same goes for the fallback. My HTML is generated, yet the maps never show.

Upvotes: 1

Views: 559

Answers (2)

Dadou
Dadou

Reputation: 1008

I've found a working solution.

Notes

  • I still want to show directions (E.g. Turn left on Road 4, etc.).

Code

HTML

<div id="basic-map" class="mymap" data-role="page">
    <div id="regularmap" data-role="content"></div>

    <div id="fallback">
        <div id="map" style="width: 100%; height: 350px"></div>
        <div class="infobox-wrapper">
            <div id="infobox">
                <h3>My Business</h3>
                <p>
                    123, Fake Street <br />
                    City (Province) A1B 2C3 <br /> <br />
                    <a href="tel:+15555551234">555 555-1234</a>
                </p>
             </div>
        </div>
    </div>
</div>

CSS

/* Regular ------------------------------------- */
html.geolocation #basic-map {
    margin-top: 20px;
    border: 5px solid #fff;
    min-height: 0 !important;
    border: 1px solid #000;
}
html.geolocation #basic-map #regularmap {
    height: 350px;
}
html.geolocation #basic-map #fallback {
    display: none !important;
    border: 1px solid #000;
}
/* Fallback ------------------------------------ */
html.no-geolocation #regularmap {
    display: none;
}
    html.no-geolocation #basic-map {
        position: relative;
    }
    html.no-geolocation #infobox {
        border:2px solid black;
        margin-top:8px;
        background:#333;
        color:#FFF;
        font-family:Arial, Helvetica, sans-serif;
        font-size:14px;
        padding:10px;
        padding:1rem;
        -webkit-border-radius:4px;
        -moz-border-radius:4px;
        border-radius:4px;
        text-shadow:0 -1px #000;
        -webkit-box-shadow:0 0 8px #000;
        box-shadow:0 0 8px #000;
        line-height:120%;
        position:absolute;
        top: 25px;
        left: 32px;
        padding-right: 20px;
    }
    html.no-geolocation #infobox:after {
        content: "";
        width: 147px;
        height: 8px;
        position: absolute;
        bottom: -9px;
        right: 35px;
        background: url(../img/tipbox.gif) top right no-repeat;
    }
    html.no-geolocation #infobox a {
        color:#fff !important;
        font-size:14px
    }
    html.no-geolocation #infobox a:hover {
        color:#e2e2e2 !important
    }
    html.no-geolocation #infobox h3 {
        color:#fff !important;
        font-weight:bold;
        margin-top:0
    }
    html.no-geolocation #infobox #infoBox img {
        position:absolute;
        top:15px;
        right:5px;
        z-index:5
    }

JavaScript

<script src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).ready(function()
{
if(navigator.geolocation)
{
    navigator.geolocation.getCurrentPosition(function(position)
    {  
        var gps = (position.coords.latitude+position.coords.longitude);  
        window.GlobalVar = gps;

        window.myLatt = position.coords.latitude;
        window.myLong = position.coords.longitude;

        initialize();
    });

    var Center=new google.maps.LatLng(46.327256,-72.560813);
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;

    function initialize()
    {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var properties =
        {
            center:Center,
            zoom:16,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };

        map=new google.maps.Map(document.getElementById("regularmap"), properties);
        directionsDisplay.setMap(map);

        var marker=new google.maps.Marker(
        {
            position:Center
        });

        marker.setMap(map);
        Route();
    }

    function Route()
    {
        startLat  =     window.myLatt;
        startLong =  window.myLong;

        var start = new google.maps.LatLng(startLat, startLong);
        var end =new google.maps.LatLng(46.327254,-72.560813);
        var request =
        {
            origin:start,
            destination:end,
            travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function(result, status)
        {
            if (status == google.maps.DirectionsStatus.OK)
            {
                directionsDisplay.setDirections(result);
            }
        });
    }

    google.maps.event.addDomListener(window,'load',initialize);
} // if(navigator.geolocation)
else
{
    $.getScript('http://maps.google.com/maps/api/js?sensor=true');
    $.getScript('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js');
    function initialize()
    {
        /* ----- Variables ---------------------------------- */
        var myLat = 46.327269;
        var myLong = -72.560779;
        var iconURL = 'img/logo-map-marker-large.png';
        var myClose = "http://www.google.com/intl/en_us/mapfiles/close.gif";
        var bbl_bg = "url('img/tipbox.gif') no-repeat";
        /* ----- Scripted ----------------------------------- */
        var loc,map,marker,infobox;loc=new google.maps.LatLng(myLat,myLong);map=new google.maps.Map(document.getElementById("map"),{zoom:15,center:loc,mapTypeId:google.maps.MapTypeId.ROADMAP});marker=new google.maps.Marker({map:map,position:loc,icon:iconURL,visible:true});infobox=new InfoBox({content:document.getElementById("infobox"),disableAutoPan:false,maxWidth:150,pixelOffset:new google.maps.Size(-140,0),zIndex:null,boxStyle:{background:bbl_bg,opacity:0.75,width:"320px"},closeBoxMargin:"2px 2px 2px 2px",closeBoxURL:myClose,infoBoxClearance:new google.maps.Size(1,1)});google.maps.event.addListener(marker,"click",function(){infobox.open(map,this);map.panTo(loc)});
    }
    google.maps.event.addDomListener(window, 'load', initialize);
} // else
}); // $(document).ready(function()
</script>

images

toolbox.gif

Tipbox

logo-map-marker-large.png (smaller version also created, not used in this example, though)

"We Are Here" icon

Upvotes: 0

adeneo
adeneo

Reputation: 318172

This has always worked for me

if(navigator.geolocation) { // it's supported

    navigator.geolocation.watchPosition(function(position) {
         console.log('Geolocation is enabled, and the user approved');
    }, function (error) { 
         if (error.code == error.PERMISSION_DENIED) {
             console.log('The user declined');
         }else{
             console.log('Either turned of, or another error occurred ?');
         }
    });
}

EDIT:

based on the edited question, you can load those scripts and insert the elements dynamically based on the result from the geolocation:

if(navigator.geolocation) { // it's supported
    navigator.geolocation.watchPosition(function(position) {
        $('body').append( $('<div />', {id : 'geolocation'}) );
        $.getScript('hassupport.js', function() {
            // script loaded
        });
    }, function (error) { 
         if (error.code == error.PERMISSION_DENIED) {
             console.log('The user declined');
         }else{
             console.log('Either turned of, or another error occurred ?');
         }
        //either way
        $('body').append( $('<div />', {id : 'fallback'}) );
        $.getScript('fallback.js', function() {
            // script loaded
        });
    });
}

Upvotes: 2

Related Questions