title: Google map not displaying properly with Corona SDK
body: <p>I am using Google Maps in the Corona SDK, but I am having problems while the map is loaded. It's not zooming or is not clearly visible, just like below:</p>
  
  <p><img src="https://i.stack.imgur.com/zMTVS.png" alt="image"></p>
  
  <p>Here is my code block which is in HTML file:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  html,
  body {
  height: 100%; margin: 0; padding: 0 ;
  }
  #mapContainer {
  height: 100% ;
  
  
  }
  &lt;/style&gt;
  
  &lt;script type="text/javascript" src="&lt;script type="text/javascript"
              src="http://maps.googleapis.com/maps/api/js?key=]]..APIkey..[[&amp;sensor=true"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="mapContainer"&gt;
  &lt;/div&gt;
  
  
      &lt;div id="mapContainer"&gt;
      &lt;/div&gt;
  
      &lt;script type="text/javascript"&gt;
          var mapContainer = $( "#mapContainer" );
  
          map = new google.maps.Map(
                                    mapContainer[ 0 ],
                                    {
                                    zoom: 20,
                                    center: new google.maps.LatLng(
                                                                   -22.902145,
                                                                   -43.177049
                                                                   ),
  
                                    mapTypeId: google.maps.MapTypeId.ROADMAP
                                    }
                                    );
          function addMarker( latitude, longitude, label ){
              var im = "http://www.robotwoods.com/dev/misc/bluecircle.png"
  
              var marker = new google.maps.Marker({
                                                  map: map,
                                                  position: new google.maps.LatLng(
                                                                                   latitude,
                                                                                   longitude
                                                                                   ),
                                                  icon: im
                                                  });
              return( marker );
          }
  
          function updateMarker( marker, latitude, longitude, label ){
  
              marker.setPosition(
                                 new google.maps.LatLng(
                                                        latitude,
                                                        longitude
                                                        )
                                 );
  
              if (label){
  
                  marker.setTitle( label );
  
              }
          }
  
          if (navigator.geolocation) {
  
              var locationMarker = null;
  
              navigator.geolocation.getCurrentPosition(
                                                       function( position ){
  
                                                       if (locationMarker){
                                                       return;
                                                       }
  
                                                       locationMarker = addMarker(
                                                                                  position.coords.latitude,
                                                                                  position.coords.longitude,
                                                                                  "Initial Position"
                                                                                  );
  
                                                       },
                                                       function( error ){
                                                       },
                                                       {
                                                       timeout: (5 * 1000),
                                                       maximumAge: (1000 * 60 * 15),
                                                       enableHighAccuracy: true
                                                       }
                                                       );
  
              var positionTimer = navigator.geolocation.watchPosition(
                                                                      function( position ){
  
                                                                      updateMarker(
                                                                                   locationMarker,
                                                                                   position.coords.latitude,
                                                                                   position.coords.longitude,
                                                                                   "Updated / Accurate Position"
                                                                                   );
  
                                                                      }
                                                                      );
  
  
              setTimeout(
                         function(){
                         navigator.geolocation.clearWatch( positionTimer );
                         },
                         (1000 * 60 * 5)
                         );
  
  
  var uri
  
  if(]]..chk..[[)
  uri ="http://192.168.1.202/streetculture/images/1/img1.png"
  var image = new google.maps.MarkerImage(uri,
                                          new google.maps.Size(50, 70),
                                          new google.maps.Point(0,0),
                                          new google.maps.Point(20, 28)
                                          );
                ]]..markerString..[[
  
  
  if(]]..chk2..[[)
   uri ="http://192.168.1.202/streetculture/images/1/img_map_pin_pink.png"
      var image = new google.maps.MarkerImage(uri,
                                              new google.maps.Size(50, 70),
                                              new google.maps.Point(0,0),
                                              new google.maps.Point(20, 28)
                                              );
     ]]..markerString..[[
  
  
  
  }
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I am loading this HTML file in my web view.</p>