1

I put Google Map inside a div, and made a slideToggle onto the div. the Google Map doesn't display correctly.

enter image description here

Once the div expanded, it doesn't look right like the map below

Please check the code on jsFiddle Sample

<div class="click">
  <div class="hide">
    <div id="map" style="width:300px;height:140px;"></div>
  </div> 
</div>
olo
  • 5,225
  • 15
  • 52
  • 92
  • possible duplicate of [jQuery SlideToggle Google Maps Issue](http://stackoverflow.com/questions/13733482/jquery-slidetoggle-google-maps-issue) – Jonathan Aug 23 '13 at 02:34

2 Answers2

2

You could wait until the map is loaded by adding an event listener for idle. This event will fire once the map is fully loaded and ready.

google.maps.event.addListenerOnce(map, 'idle', function() {
    $('.hide').hide();
});

Here's the JSFiddle.

EDIT:

For anyone with a similar problem, here is the updated JSFiddle with the map positioned offscreen so it remains hidden without using display:none.

user1234
  • 7,860
  • 4
  • 27
  • 36
  • Thanks! The map has to be loaded first? As the page looks bit odd at the first open. – olo Aug 23 '13 at 03:17
  • 1
    Yeah unfortunately if it has `display:none` the marker won't load. However there is probably a way to hide it with positioning so you don't have to see the map pop open at first, you might want to check this answer out: http://stackoverflow.com/a/4700611/1091751. – user1234 Aug 23 '13 at 03:20
  • I don't quite understand from that answer, I don't think `position: absolute; left: -10000px;` works with `slideToggle` ? is that right? Thanks – olo Aug 23 '13 at 03:31
  • offscreen is a nice solution. Thanks! – olo Aug 23 '13 at 11:59
1

you need to wait until map finished render then you set hide a map because map div was toggle when div on hiding and that make map looking wrong location init function should look like this

function initialize() {
  var latlng = new google.maps.LatLng(48.89376,2.33742); 
    var settings = {
    zoom: 15,
      center: latlng,
      disableDefaultUI: true,
        zoomControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map"), settings);
  var marker=new google.maps.Marker({
    position:latlng,
  });

  marker.setMap(map);

  // on map idle set div hide
  google.maps.event.addListenerOnce(map, 'idle', function() {
      $('.hide').hide();
  });
}
Kotzilla
  • 1,333
  • 18
  • 27
  • Thanks for your answer, but if I enable "hide", it doesn't work. – olo Aug 23 '13 at 02:46
  • thanks for the updated answer, there is a bit issue, it really depends on how fast the pageload is. Is there a better way to fix way? – olo Aug 23 '13 at 02:59