Google Maps Javascript API v3 map displays on desk

Question

I'm developing an app that displays a map using Google Maps Javascript API v3, and it displays the way it's supposed to on my desktop browser, but it doesn't on my mobile's browser.

So, I've checked this: My Google Map javascript code displays on desktop browser but not my mobile phone browser

And this: Javascript Google Maps API loading in Web Browser but not Android Browser

It was everything I could find relating to my issue, but both of these had a similar problem which was that they were passing navigator.geolocation.getCurrentPosition() as a parameter to their initialize function or something like that, instead of passing initialize as the callback for getCurrentPosition(). I've also seen someone with the same issue that was being caused because they were asking for the current position before the document had loaded, which is also not my issue, for I'm calling getCurrentPosition() from jQuery's $(document).ready().

Here's my code, any help is greatly appreciated:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        
    <script type="text/javascript" 
            src="http://maps.googleapis.com/maps/api/js?sensor=true">            
    </script>
<script type="text/javascript">
  function initialize(location) {
      console.log(location);
    var currentLocation= new google.maps.LatLng(location.coords.latitude, location.coords.longitude);
    var mapOptions = {            
      center: currentLocation,
      zoom: 17,
      disableDefaultUI:true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
       mapOptions);
    var marker= new google.maps.Marker({
        position:currentLocation,
        map: map
    });
  }    

  $(document).ready(function(){
     navigator.geolocation.getCurrentPosition(initialize);
  });
</script>

Answer 1

I also encountered the same problem using navigator.geolocation which seem to work well on PC. I tried accessing it on my phone but keeps showing error. I finally resolved the issue by adding https:// to the address I was visiting on my mobile. Even if you don't have an SSL on your site, just add https:// to the url and everything will be fine.