CODEWITHSUNDEEP
jquery-mobilegoogle-maps-api-3
porque_no_les_deux
porque_no_les_deux

Reputation: 479

Why can't I load my google map in jquery mobile?

I'm doing rel="external" on the link that opens this page, so the DOM reloads which should rule out a lot of problems.

Nevertheless, with the following code I get a huge red background with a nice header and footer-- the map just doesn't initialize despite that the function is being called. Can anyone spot the problem? This bug has been holding me up forever; I've tried a million things including redesigning it as a multipage template without rel="external", but that didn't work either.

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
        <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">
            $(function(){initializeMap(42,-73);});

            function initializeMap(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);
            var crosshairLayer = new google.maps.KmlLayer('http://freezoo.alwaysdata.net/justcrosshair2.kml',
            {preserveViewport: true});

            crosshairLayer.setMap(map);

            google.maps.event.trigger(map, 'resize');
            map.setZoom( map.getZoom() );
            }
        </script>
    </head>
    <body>
        <div data-role="page" data-theme="e" data-add-back-btn="true" class="map1" id="testing">
            <div data-role="header"><h1>Map Page</h1></div>
            <div id="content" style="position:absolute; bottom:40px; top:40px; left:0px; right:0px; background:green;"> 
                <div id="map_canvas" style="position:absolute; top:0px; bottom:0px; width:100%; background:red;"></div>
            </div>
            <div data-role="footer" style="position:absolute; bottom:0px; width:100%;">
                <h1>Working!</h1>
            </div>
        </div>
    </body>
</html>

Upvotes: 0

Views: 523

Answers (1)

WojtekT
WojtekT

Reputation: 4775

Your code doesn't load the google maps script. Like this for example:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Upvotes: 2

Related Questions