CODEWITHSUNDEEP
jquerygoogle-maps
SalmonMode
SalmonMode

Reputation: 269

Google Map API map there but cut off

On my site, my map is getting cut off. But im not sure why. I can still interact but only in a limited sense. Can anyone take a look and give me some insight?

here is the site http://people.rit.edu/~ctn9382/536/assignment3/

in order to get to the map you have to click "show results" and then click a hospital's name and it should create a bunch of stuff on the top of the page.

Upvotes: 2

Views: 3358

Answers (4)

chourobin
chourobin

Reputation: 4114

I got it working this way:

var map;
function initialize() {
var pos = new google.maps.LatLng(<%[email protected]%>, <%[email protected]%>);
var mapOptions = {
  zoom: 15,
  center: pos,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById('listing_map'),
    mapOptions);
var marker = new google.maps.Marker({
    position: pos,
    map: map
});
google.maps.event.trigger(map, 'resize');
}

Now when you switch tabs, use setTimeout to delay the map initialization:

<a href="" onclick="setTimeout(function(){ initialize() }, 100);">

Upvotes: 2

Philll_t
Philll_t

Reputation: 4437

Had the same issue, got it fixed though thanks to some helpful folks here on the forum.

Solved my issue.

Upvotes: 0

Allan Wintersieck
Allan Wintersieck

Reputation: 873

Whenever the user switches to the Locations tab, force a resize event by firing this:

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

Since you're initializing the map while the div is hidden, it can't figure out how big to make itself, so you need to force it to check the size again. This is also why it fixes itself when you open the developer console, as Daan noticed, since that resizes the window which fires that resize event.

Upvotes: 14

Matt T
Matt T

Reputation: 511

It looks to me like the map applet hasn't been "told" to fill the container. Without code examples I can't offer concrete changes but I suggest that you look into the CSS style for the map applet. You may need to set the width and height to a specific size (the width and height of the container) or it may be as simple as telling it to take 100% of available space.

Best of luck to you.

Upvotes: 1

Related Questions