0

I have been having an issue with Google Maps and trying to have it display properly after page load so it doesn't display half or even quarter of a map, but the full map.

I have yet to be able to do this despite having a look around the internet and on a couple of questions on here.

The question I have been looking at is here: Google map API doesn't display correctly jQuery slideToggle

I have been having a look at the fiddle here: http://jsfiddle.net/fXsjb/8/

I have tried to replicate this on my own page and it seemed to be loading the map, but not toggling it with the slideToggle function.

Also, my fiddle doesn't seem to be working either. You can find that here: http://jsfiddle.net/wilcochris/fXsjb/13/

I have been using the following code to try and get this to work:

$('.mapme').click(function()
{
    var $this = $(this);
    $this.find('.mapit').slideToggle(500);
    $(this).text($(this).text() == 'Show Map' ? 'Hide Map' : 'Show Map');
});
    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);

        google.maps.event.addListenerOnce(map, 'idle', function()
        {
            $('.mapit').hide();
        });
    }
google.maps.event.addDomListener(window, 'load', initialize);

These are the divs that I have too

<div class='mapme'>Show Map</div>
    <div class="mapit">
    <div id="map" style="width:300px;height:140px;"></div>
  </div> 
</div>

Any pointers would be much appreciated. I have a feeling I am missing something obvious that it's just too obvious for me to figure out.

Thanks in advance

Community
  • 1
  • 1
Chris
  • 431
  • 1
  • 5
  • 16

1 Answers1

1

Change your html code like below :

<div class='mapme'>Show Map</div>
 <div class = "toggle">
  <div class="mapit">
    <div id="map" style="width:300px;height:140px;"></div>
  </div> 
</div>

DEMO

Ramesh Kotha
  • 8,266
  • 17
  • 66
  • 90