title: Google map have a grey border/padding around it
body: <p>According to the screenshot below, I have a grey border/padding around the Google map, did someone know how to remove it?</p>
  
  <p>Thanks</p>
  
  <p><img src="https://i.stack.imgur.com/zuYu6.png" alt="enter image description here"></p>
  
  <p>Here is my code:</p>
  
  <pre><code>var map;
    function initialize(canvas,lat,lng) {
      var myOptions = {
              zoom: 16,
              center: new google.maps.LatLng(lat,lng),
              disableDefaultUI: true,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              panControl: false,
              zoomControl: true,
              zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL,
                  position: google.maps.ControlPosition.LEFT_TOP
              },
              scaleControl: false,
              streetViewControl: false,
              scrollwheel: false
      };
      map = new google.maps.Map(document.getElementById(canvas),myOptions);
    }
  </code></pre>
  
  <p>I have 3 page to embed the Google map, and I added the code below to call Google map</p>
  
  <pre><code>$(document).ready(function() {
          initialize("causewayBayMapCanvas","22.281001", "114.186375");
  });
  </code></pre>
  
  <p><strong>UPDATE:</strong></p>
  
  <pre><code>&lt;div style="width:300px; height:200px; border: 1px solid #0051B9"&gt;
              &lt;div id="&lt;?php echo $mapId;?&gt;" class="map rounded"&gt;&lt;/div&gt;
  &lt;/div&gt;  
  </code></pre>