0

Yes this problem is common and I have seen numerous solution on this site but none of them were helpful. I know that re-sizing will fix the problem. Not a jQuery expert and I don't know how to re-size the map after the page has been loaded and Headline 3 is active. I have created a JFiddle example. Any help is appreciated.

http://jsfiddle.net/KhwZS/1300/

Thanks

Ignore the top comment and the links provided by @Dr.Molle as these links do not provide the solution that I have been looking for, check out the solution I have accepted.

java_dude
  • 4,038
  • 9
  • 36
  • 61
  • why negative points? Did I not say that in my question? Did I not do the ground work? If I would have understood what people are talking I would have fixed it. Since I did not get a solution I posted this question. – java_dude Jun 30 '13 at 17:54
  • Should we answer this question each new day again? I don't think so(therefore the downvote) . It takes about 30 seconds to fix your fiddle with the solution suggested in the duplicate: http://jsfiddle.net/KhwZS/1310/ – Dr.Molle Jun 30 '13 at 19:06
  • @Dr.Molle, Your 30 second solution is not even the right solution. The map is not even centered? So that's what you though the solution is? Please look at the solution I approved. – java_dude Jun 30 '13 at 19:27
  • Your question is not about centering the map, I would give you 1 more downvote if I could – Dr.Molle Jun 30 '13 at 19:47
  • @Dr Who? You kidding me? Whats the point of a solution that's not even taking the existing code into consideration? Now you are blaming the question? Vow.. You have lot of negative energy. You need to do something constructive with it. – java_dude Jun 30 '13 at 20:04
  • Accepting another solution doesn't make your question better, also the offScreen-canvas-solution has been discussed here in the past. I better live with my negative energy, if you had any kind of energy you had not asked this question. – Dr.Molle Jun 30 '13 at 21:52

2 Answers2

4

The "single-tile" condition is generally caused by initializing a Google map on a hidden canvas, which appears to be the case here.

If the map is to be initially hidden and you don't want to resize, then your two main options are :

  • initialise on a visible canvas then immediately hide it - and hope that the map doesn't flash-display.

  • initialize the map on first display. I do this in one of my applications and find the delay not at all unacceptable, despite some heavyweight layering.

I suppose you might also consider the following possibility, though I've never tried it :

  • initialize the map on a "visible" off-screen canvas, then reposition it on-screen at first view. Thereafter the canvas may be conventionally hidden/shown.

Edit

Yes, a map can be initialized off-screen then moved on-screen.

HTML:

<div id="off_screen">
    <div class="googleMapContainer" id="map-canvas"></div>
</div>

...

<div class="tab">
    <h3>Headline 3</h3>
    <div id="map-placeholder"></div>
</div>

CSS:

#off_screen {
    position: absolute;
    left: -1000px;
    top: -1000px;
}

Javascript:

var $mapCanvas = $("#map-canvas");
map = new google.maps.Map($mapCanvas.get(0), myOptions);
var listenerHandle = google.maps.event.addListener(map, 'idle', function() {
    $mapCanvas.appendTo($("#map-placeholder"));
    google.maps.event.removeListener(listenerHandle);
});

See updated fiddle

Beetroot-Beetroot
  • 18,022
  • 3
  • 37
  • 44
  • Perfect solution. Initialize off screen then moving to third tab. Exactly what I wanted as it takes the centering of the map into account. Thanks!! – java_dude Jun 30 '13 at 22:08
  • Also, make sure that you're initializing your map with events, not directly after dom load `google.maps.event.addDomListener(window, "load", function(){...});` – Artjom Kurapov Aug 26 '13 at 13:25
1

One way to fix this is to trigger a resize event on the map after the tab is selected. If you move your var map; to the global scope, then you can change this line:

$( ".tabs" ).tabs();

to:

$( ".tabs" ).tabs({
    activate: function( event, ui ) {
        google.maps.event.trigger( map, 'resize' );
    }
});

You could improve on that further, perhaps by checking the specific tab and only triggering the resize when the map tab is selected, but this should get you started. Here's an updated fiddle.

Michael Geary
  • 28,450
  • 9
  • 65
  • 75