Search jQuery

jQuery Forum

Google Maps How To

in jQuery Mobile • 11 months ago

I have read and read online about how to display a google map in Jquery mobile but I can not et it to display.

I have an ios app I am making with Jquery Mobile and PhoneGap and I can not get a map displayed.

anyone know how to do this. What are the steps?
Thanks much

Replies(4)

Shibbir A..

Re: Google Maps How To

11 months ago

Here is the complete working code:

<!DOCTYPE html>
<html lang=en>
    <head>
        <meta charset=utf-8>
        <title>jQueryMobile Google Map</title>

        <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script src="jquery.ui.map.js"></script>
        <script>
            $(document).ready(function () {
                $('#map_canvas').gmap('addMarker', {'position': '57.6969943,11.9865', 'bounds': true}).click(function() {
                    $('#map_canvas').gmap('openInfoWindow', {'content': 'Swedens second largest city'}, this);
                });
            });
        </script>

        <style>
            .content { padding:1.5em; margin:0 0 1.5em; }
            .dark { background:#2a3333; }
            .light { background:#fff; }

            .map { width: 100%; height:400px; }
            .streetview { width:100%; height:300px; }
            .lt { float:left; }
            .rt { float:right; }
            .clear { clear:both; }
            .hidden { display:none; }
            .txt-shadow-w { text-shadow: 1px 1px 1px #fff; }
            .txt-shadow-b { text-shadow: 1px 1px 1px #222; }
            .rounded { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; }
            .shadow { -moz-box-shadow: 0px 2px 4px #999; -webkit-box-shadow: 0px 2px 4px #999; box-shadow: 0px 2px 4px #999; }
            .item { padding:1em; margin:0 0 2em; }
        </style>
    </head>
    <body>
        <div class="item rounded dark">
            <div id="map_canvas" class="map rounded"></div>
        </div>
    </body>
</html>

and of course don't forgot to include jquery.ui.map.js file.

Here is the main link that describes everything:
http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html

Good luck :)

mokesmokes

Re: Google Maps How To

11 months ago

Hi,

I'm not sure how jquery.ui.map.js actually helps, since the Google map API is rather straight-forward and already geared for mobile. There is only one gotcha that JQM developers seem to fall on - and that is that the map can only be loaded when the page is in view. Attempts to load the map when the page is out of view result in small, distorted maps which is a "bug" reported here constantly. So using the standard Google examples as written, and hooking the map load on the JQM "pageshow" event works like a charm.

roclimb

Re: Google Maps How To

11 months ago

Thnaks for replying to this. I added the js map file and added the code provided above and tested in iOS with the iOS simulated in Xcode and I get a blank screen with nothing on it. THe rest of my app works fine but when I click a link to my map page it is blank. I have tried several tutorials online and get eth same blank result. Any idea why this would happen? I literally copied and pasted your code to test it and also included the js map file.

Thanks