0

Could someone please have a look at my code and tell me what I'm doing wrong? I have spend so much time now trying out different things but haven't been successful. Tanks to everybody who can help me!

  • calling this page directly works
  • calling this page from the previous page with link type "external" works
  • calling this side normally from one jQueryMobile page to this one, doesn't work and shows the map Empty, after clicking Reload, everything is perfect

The code:

<html> 
<head>
    <meta charset="UTF-8">  
          <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"  />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=places"></script> 
</head>
<body>
<div data-role="page" id="basic_map">
        <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: 12,
                        center: latlng,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                };

            var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

 </script>

    <div data-role="header" data-theme="b" data-position="fixed" data-inset="false">
            <h1>My</h1>
        <a href="index.html" data-icon="home" class="ui-btn-right" data-iconpos="notext" >Home</a>
        </div>  

    <div data-role="content">

            <h4>Map</h4>

        <div class="ui-bar-c ui-corner-all " >
            <div id="map_canvas" style="height:300px;"></div>
        </div>
    </div>
    </div>  
</body>
</html>
Kevin Bedell
  • 13,254
  • 10
  • 78
  • 114
Reinhard
  • 1
  • 4

2 Answers2

0

--edit-- Forget what I said. You are right that it does not solve the problem. :)

It seems you've forgotten to close your initialize() function on line 34! Don't forget to place the doctype by the way, then it would be line 35.

I see the map right away now on my machine (Chrome 19)

Sephie
  • 331
  • 1
  • 3
  • 15
  • 1.)i tried to move my existing java script just right before the

    --> no change, same issue like before 2.) I changed the function to start as you described above in that case even if i reload the page, the map is not shown anymore :-) i am completely confused and have no idea,....;-)

     – Reinhard Jun 07 '12 at 12:41
  • You're right. I've updated my answer! Thanks by the way for the snippet. I am actually working on a JQM app right now and just needed some info on the user's location. Your example is perfect Now that I've got it working. :D – Sephie Jun 07 '12 at 13:01
  • i know its working well,.... the close, its a copy error, i have the close in my source as i said, it works ,nice, except you come from another JQuery page before that then the java script doesn't load – Reinhard Jun 07 '12 at 18:03
0

Ok, so this question turns out to be an exact duplicate of the answer given to this question. I'm not sure why it's not working at your side, because I'm using the same code as you now.

I did run into the glitch where my map is off-center, but that was fixed by replacing pageinit with pageshow. For me reloading the page or even changing my browser's window width fixed it as well.

Is your map entirely invisible, or can you see something in the top-left corner?

Community
  • 1
  • 1
Sephie
  • 331
  • 1
  • 3
  • 15