0 Replies - 137 Views - Last Post: 17 April 2013 - 10:34 AM

#1 SarasotaTim  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 16-January 13

JQuery Mobile Google Map Not Working

Posted 17 April 2013 - 10:34 AM

Hey guys!

I have been working with this for over a week, and I'm STILL stuck....cannot get a simple map to load in my jquery mobile app (output with PhoneGap).

I have a 5 tab app built with JQuery mobile and converted to an .apk by PhoneGap, all content works fine...static stuff, RSS, JSON data.....the last tab is a map/location pin, and it simply comes up blank. I've tried dozens of iterations of code, and looked at tons of examples online. Still nothing.

Here are the vital parts I have coded...all paths to JS and CSS are correct and working. I would be eternally grateful if anyone could point me in the right direction as to what I'm screwing up here.

I have the following included in the HEAD section:
<link href="jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css">
<link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css">
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>



In my HTML, this is the page template for the page in question:

<div data-role="page" id="location">

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>    
<script type="text/javascript" src="jquery-mobile/jquery-ui-map-3.0-rc/ui/jquery.ui.map.js"></script>
 <script type="text/javascript" src="jquery-mobile/jquery-ui-map-3.0-rc/ui/jquery.ui.map.services.js"></script>
 <script type="text/javascript" src="jquery-mobile/jquery-ui-map-3.0-rc/ui/jquery.ui.map.extensions.js"></script>
 <script type="text/javascript">
        $("div:jqmData(role='page'):last").bind('pageinit', function() {
            if(navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position){
                    initialize(position.coords.latitude,position.coords.longitude);
                });
            }
        });
        function initialize(lat,lng) {
            var latlng = new google.maps.LatLng(lat, lng);
            var myOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
        }
    </script>
    <div id="map_canvas" style="height: 100%; width: 100%;"></div>
</div>




Thanks in advance for any help guys, I appreciate it!

Is This A Good Question/Topic? 0
  • +

Page 1 of 1