1

According to the screenshot below, I have a grey border/padding around the Google map, did someone know how to remove it?

Thanks

enter image description here

Here is my 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);
  }

I have 3 page to embed the Google map, and I added the code below to call Google map

$(document).ready(function() {
        initialize("causewayBayMapCanvas","22.281001", "114.186375");
});

UPDATE:

<div style="width:300px; height:200px; border: 1px solid #0051B9">
            <div id="<?php echo $mapId;?>" class="map rounded"></div>
</div>
Charles Yeung
  • 36,649
  • 27
  • 83
  • 130

2 Answers2

1

Looks like a zero size div problem. You didn't provide the code that sets the size of the map div. You need to make sure the size is defined when your initialize function is called. If you are using percentage heights and widths, see this (v2) tutorial from Mike Williams' that addresses percentage sizes for maps: The Basics - Part 20 Using a percentage height for the map div

geocodezip
  • 147,872
  • 13
  • 194
  • 222
  • I have already added width and height to the div tag, please check the updated on my question again, thanks – Charles Yeung Jul 05 '12 at 03:49
  • Then perhaps [this](http://stackoverflow.com/questions/4395780/difference-bw-onload-and-document-readyfunction) might be relevant. – geocodezip Jul 05 '12 at 04:04
0

I've had this problem before too.

The way I fixed was to resize the map by using this code after initializing the map:

google.maps.event.trigger(map, 'resize');

If you have the map showing up on multiple pages, you may need to do this whenever the user goes to the page.

Dustin
  • 156
  • 3