jQuery-ui-map not working with jQuery Mobile

StackOverflow https://stackoverflow.com/questions/12922584

Question

I just check out the demos for jquery-ui-map here http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#basic_map

This is exactly what I am trying to implement, its very basic, I just did as they did in the example but it doesn't seems working, I tested it on Chrome Desktop browser.

Here is the source: 

<!DOCTYPE html >
<html >
<head>
    <title>Map Search Page</title>
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.0.1.min.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.0.1.min.css" />    
    <style type="text/css">
        html { height: 100% }
            body { height: 100%; margin: 0px; padding: 0px }
            #map { height: 100%; width:100%; }
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.ui.map.full.min.js"></script>       
    <script type="text/javascript" src="js/jquery.ui.map.services.min.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.0.1.min.js"></script>            
    <script type="text/javascript" src="js/script.js"></script>
    <script type="text/javascript">

        var mobileDemo = { 'center': '57.7973333,12.0502107', 'zoom': 10 };
        $('#home').live("pageinit", function () {

            $('#map').gmap({ 'center': mobileDemo.center, 'zoom': 17 });
            //$('#map').gmap('addMarker', { 'position': mobileDemo.center, 'animation': google.maps.Animation.DROP });
        });

        $('#home').live('pageshow', function () {
            $('#map').gmap('refresh');
        });
    </script>
</head>
<body>
    <section id="home" data-role="page">
        <header data-role="header">
            <h1>Multi Color Rating</h1>
        </header>
        <div class="content"  style="width:100%; height:100%; " data-role="content">
          <div id="map">

          </div>
        </div>
        <footer data-role="footer">
       <h2>     All Rights Reserved &copy; 2012</h2>
        </footer>
    </section>

    <script type="text/javascript" src="js/script.js"></script>
</body>
</html>

This shows only header and footers for now.

There is one important thing, when I give some height to the map div, it shows Static map image.

Was it helpful?

Solution

Just got it working now, Source code is fine. There was a problem because jQuery Mobile Map respond to Touch event.

In Chrome touch event are not enabled by default, so just turn on the Touch event in Chrome Console.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top