title: Displaying a Google map in a BlackBerry WebWorks application
body: <p>I'm trying to display a Google map from within a WebWorks app. Here is the complete HTML of that page in the app (note that it works fine in the browser):</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
    &lt;head&gt;
  
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
      &lt;meta name="viewport" id="viewport" content="height=device-height,width=device-width,user-scalable=no" /&gt;
  
      &lt;title&gt;Waste Management Service Request&lt;/title&gt;
  
      &lt;style type="text/css"&gt;
        body {
          min-height: 500px;
        }
        .center {
          text-align: center;
        }
        #page {
          font-family: Arial, sans-serif;
          font-size: 85%;
          width: 408px;
          margin: 0 auto;
          padding: 0 30px;
        }
        h3 {
          color: #006A3C;
        }
        #map-canvas {
          height: 300px;
        }
      &lt;/style&gt;
  
      &lt;script type="text/javascript" src="jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt; 
      &lt;script type="text/javascript"&gt;
  
        if (typeof(blackberry) != "undefined") {
          blackberry.system.event.onHardwareKey(blackberry.system.event.KEY_BACK, function() {
            history.back(); 
          });
        }
  
        $(document).ready(function(){
  
          var geocoder, map;
          geocoder = new google.maps.Geocoder();
          var latlng = new google.maps.LatLng(-34.397, 150.644);
          var mapOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          }
          map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
  
          address = '100 1st St., New York City, NY'; // Hardcoded for testing.
          geocoder.geocode( {'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
              map.setCenter(results[0].geometry.location);
              var marker = new google.maps.Marker({
                  map: map, 
                  position: results[0].geometry.location
              });
            } else {
              alert("The map failed because: " + status);
            }
          });
  
        })
      &lt;/script&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
  
      &lt;div id="page"&gt;
        &lt;h3&gt;Local Map&lt;/h3&gt;
        &lt;div id="map-canvas"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>From within the application, it just shows a gray box where the app should appear. </p>
  
  <p>Note that the code is mostly yanked from the source of <a href="http://code.google.com/apis/maps/documentation/javascript/examples/geocoding-simple.html" rel="nofollow">this example page</a>, which is linked to from <a href="http://code.google.com/apis/maps/documentation/javascript/examples/index.html" rel="nofollow">here</a>.</p>
  
  <p>Any ideas? Is my best bet here to resort to having Google deliver static images rendered dynamically (i.e., <a href="http://code.google.com/apis/maps/documentation/staticmaps/" rel="nofollow">this technique</a>) or is there something I'm missing to get the real thing?</p>
  
  <p>By the way, I tried to crawl through the JS call stack for gmaps and add each domain to the list of the app's permissions. I have permission entries (both http and https) for gmaptiles.co.kr, google.com, googleapis.com, and gstatic.com. </p>