My Google Map javascript code displays on desktop browser but not my mobile phone browser

Question

Okay, so I already looked this up and only found one page on it.

(Google Maps API GeoLocation not working for mobile)

My issue is that that I have some javascript code that calls the google maps API and displays just fine when I view it using my browser on my desktop, the browser I'm using is google chrome, but when I try to view it using my android phone it doesn't display at all. I am not sure what the issue is, I had it running a couple of days, but the map crashed and stopped displaying. Since then i have had to re-do the code to get it to display again. I finally got it working, but now I have this new problem. Here is the code I'm using.

    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <link rel="Stylesheet" type="text/css" href="css/drop.css" />
        <link rel="Stylesheet" type="text/css" href="css/login.css" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?   sensor=false"></script>
        <script type="text/javascript">
            function getLocation() {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(getMap, showError);
                }
                else {
                   alert("Geolocation is not supported by this browser.");
                }
            }

           function initialize( lat, lon ) {
               pLatitude = lat;
               pLongitutde = lon;

           var mapOptions = {
              center: new google.maps.LatLng(lat, lon),
              zoom: 14,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              mapTypeControl: true
           }

           var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
           var marker = new google.maps.Marker({
              position: new google.maps.LatLng(lat, lon),
              map: map,
              title: "Current Location"
           });
        }

        function getMap(position) {
             lat = position.coords.latitude;
             lon = position.coords.longitude;

             google.maps.event.addDomListener(window, 'load', initialize(lat, lon));
        }

        function showError(error) {
             switch (error.code) {
                 case error.PERMISSION_DENIED:
                    alert("User denied the request for Geolocation.");
                    break;
                case error.POSITION_UNAVAILABLE:
                    alert("Location information is unavailable.");
                    break;
                case error.TIMEOUT:
                    alert("The request to get user location timed out.");
                    break;
                case error.UNKNOWN_ERROR:
                    alert("An unkown error occurred.");
                    break;
        }
    }
</script>
</head>
<body onload="getLocation()">
   <div id="map-canvas"></div>
</body>
</html>

Is there additional code you haven't included? For example, when is getMap() and getLocation() called? Also, you're calling initialize(), when you should instead be passing it as a callback to google.maps.event.addDomListener. — Kai
– Kai, Commented Apr 16, 2013 at 5:24
I'm gonna trying adding all my code. I didn't have much luck last time. — Razpiento
– Razpiento, Commented Apr 16, 2013 at 5:34
Kai I'm still unsure where you meant that I was calling initialize() instead of passing it as a callback to the addDomListener. — Razpiento
– Razpiento, Commented Apr 16, 2013 at 5:45

Kai · Accepted Answer · 2013-04-16 06:06:23Z

3

You made a few mistakes. I updated your code and added comments for an explanation: http://jsfiddle.net/cj5xF/1/

There's also a fullscreen view (test on mobile): http://jsfiddle.net/cj5xF/1/embedded/result/

Snippet from the fixed code:

    // When the page has loaded, call the getLocation function.
    // Be sure not to use parenthesis after getLocation, or you will
    // call it, instead of passing a reference to it to be called later (callback)
    google.maps.event.addDomListener(window, 'load', getLocation);

This will call the getLocation function when the page has loaded. The getLocation function will perform its geolocation checks, and if available, call initialize and pass into it the position object, which contains coordinates. initialize will then use those coords to create a google map.

answered Apr 16, 2013 at 6:06

Kai

9,4185 gold badges30 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Razpiento Over a year ago

Hey thanks for the help. That made my code better and its set up more correctly. The only issue now is that the map still won't load on my phone, but its loading just fine for others. Now I just need to figure out what the issue is with my phone. Oh and I even couldn't view the link that you gave me for the full screen view of the working code. My phone is the issue.

Razpiento Over a year ago

Hey Kai thanks a bunch for the help. I finally got my map to display on my phone's browser. After battling with it for a while, with setting and what not, what finally fixed it was a reboot of the phone. Gotta love technology.

Collectives™ on Stack Overflow

My Google Map javascript code displays on desktop browser but not my mobile phone browser

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related