Google Maps API V3灰色区域

Question

I installed the Google Maps API V3, but I'm having trouble getting the resize function to work properly. I've put the script to display the map in a division that drops down when a link is clicked, however, it shows gray areas on the sides. I've read instances where you have to have the resize function in the script that displays the division, from what I can understand, but I'm having trouble implementing it properly.

Here's the code that causes the division (class="content") to be revealed:

    $(function() {
$('.action').click(function() {          
    var name = $(this).attr("name");
    var content = $('.content[name=' + name + ']');
    $('.content').not(content).hide('fast');
    content.slideToggle('fast');
});

I have the map inside of a div with the id "map".

  <div class="map">
      <div id="map_canvas""></div>
  </div>

I've been up all night working on other portions of the site and am fairly scatterbrained at the moment. sorry if I forgot to post something necessary to resolve this.

Thanks in advance, Bc.

Answer 1

You need to manually throw the even resize on the google map.

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

Reference .

Update

<script type="text/javascript"> 
// Global Variable
var map;

// This is a global Function
function initialize() 
{ 
  // This variable is scoped only for the initialize function,
  // it is not available to other functions scoped globally
  var myOptions = 
  { 
    center: new google.maps.LatLng(-34.397, 150.644), 
    zoom: 8, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
  };

  // Instead of a function scoped map variable this should be global
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  google.maps.event.trigger(map, 'resize') 
} 
</script>

Then you can change to the following code:

$(function() 
{
  $('.action').click(function() 
  {          
    var name = $(this).attr("name");
    var content = $('.content[name=' + name + ']');
    $('.content').not(content).hide('fast');
    // this uses the callback functionality
    // to only throw the trigger after the
    // animation finishes.
    content.slideToggle('fast',
      function() 
      {
        google.maps.event.trigger(map, 'resize');
      });
  });
});

Answer 2

Hey I realized a quick easy fix to this:

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(42.365885, -71.258658),
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    google.maps.event.trigger(map,'resize');
}

$(document).on("pageshow", "#map", function () {
    initialize();
});

with the page div called "map" and the map div called "map-canvas".

What this seems to do is initialize the map when the page is shown. THis makes your app slower by loading the map when the user opens it, but it avoids errors caused by the dom and whatnot. This totally fixes the cornered map/ gray areas problem on my phonegap+jquery mobile + google map app!