Google Maps API 3 & jQTouch

Question

I'm having a problem displaying a map (API 3) in jQTouch. In a browser when first loaded it only shows part of the map but if I resize the window it is fine. I'm trying to use the google.maps.event.trigger(map_canvas, 'resize'); function but don't think I am putting it in the right place or is there something else wrong with my code? All help would be much appreciated.

       <div id="locations">
            <div class="toolbar">
                <h1>Locations</h1>
                <a class="back" href="#">Home</a>
            </div>

   <div id="map_canvas" style="width:100%;height:240px"></div>

   <script type="text/javascript">

   function initialize() {
     var myOptions = {
       zoom: 11,
       center: new google.maps.LatLng(50.451820688650656, -4.2572021484375),
       mapTypeId: google.maps.MapTypeId.ROADMAP,
       panControl: false,
       zoomControl: false,
       mapTypeControl: false,
       scaleControl: false,
      streetViewControl: false

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

     setMarkers(map, localities);

   }

   var localities = [
     ['Devonport', 50.370095229957016, -4.169440269470215, 3],
     ['John Bull Building', 50.41588787780982, -4.1097986698150635, 2],
       ['Portland Square', 50.375110980041484, -4.138498306274414, 1]
   ];

   function setMarkers(map, locations) {

     var image = new google.maps.MarkerImage('http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag.png',

         new google.maps.Size(20, 32),

         new google.maps.Point(0,0),

         new google.maps.Point(0, 32));
     var shadow = new google.maps.MarkerImage('http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag_shadow.png',

         new google.maps.Size(37, 32),
         new google.maps.Point(0,0),
         new google.maps.Point(0, 32));

     var shape = {
         coord: [1, 1, 1, 20, 18, 20, 18 , 1],
         type: 'poly'
     };
     for (var i = 0; i < locations.length; i++) {
       var location = locations[i];
       var myLatLng = new google.maps.LatLng(location[1],location[2]);
       var marker = new google.maps.Marker({
           position: myLatLng,
           map: map,
           shadow: shadow,
           icon: image,
           shape: shape,
           title: location[0],
           zIndex: location[3]
       });
     }
   }
   </script>

      <?php
        include( 'includes/bottom-nav.php' );
      ?>
        </div>

Arie

I'm having the same problem, have you gotten any solution yet?? – Deafmute

Answer 1

This is due to the api not knowing how big the map view is because jqtouch hides the page div.

In v2 of the api you could specify a size in the map constructor but alas, this is not possible yet in v3. I've seen many posts around the internet all having problems, all due to this omission.

google.maps.event.trigger(map_canvas, 'resize') does not seem to do anything to solve this.

Anyway, the answer is to delay constructing your map until the div it is contained in is visible. I'm doing this once, on 'pageAnimationEnd'.

You'll also need to have fixed the size of the map div in CSS (but this was required in v2 also).

Confuse

I can confirm that the same problem exists if you embed a Google Map inside a jQueryUI tab, and can be solved in the same way - instead of placing the initialisation function for the Google Map in the page footer, it has to be placed in the show event for the tab. If you don't do this, it behaves in exactly the same way, placing only part of the map in the div. – Rusel