Google Maps API V3 Gray Areas

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.

enter image description here

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.

Erik Philips · Accepted Answer · 2012-06-26T20:15:28.947

8

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');
      });
  });
});

edited Jun 26 '12 at 20:15

answered Jun 26 '12 at 19:37

Erik Philips

53,428
11
128
150

Thanks for the quick response. I'm sure I'm doing something wrong, but this is how I have it at the moment. `` – itsbc Jun 26 '12 at 19:41
1

Here are two possible issues; first your map variable appears not to be global, so no other functions can use it, and secondly, after the `slideToggle()` finishes, you need to trigger the resize. – Erik Philips Jun 26 '12 at 19:47
I'm very beginner to jquery and I'm not 100% clear on how to fix the global issue regarding the map variable. Do I just declare it by var map="map" ? Thanks again for the help. – itsbc Jun 26 '12 at 19:53
Just tried it and it works. Thank you so much for the quick help. – itsbc Jun 26 '12 at 19:55
I also put up a possible complete solution with documentation why. – Erik Philips Jun 26 '12 at 19:57
Thanks for doing that. It must have been a fluke. It worked after a few refreshes, but now it's creating gray areas again and I'm not sure why. Here's what I have so far. I put it in a fiddle for better formatting: http://jsfiddle.net/itsbc/RA2Nv/ – itsbc Jun 26 '12 at 20:06
I updated the code to correct the problem I believe is happening. – Erik Philips Jun 26 '12 at 20:15
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/13077/discussion-between-itsbc-and-erik-philips) – itsbc Jun 26 '12 at 20:21

score 0 · Answer 2 · edited Jul 25 '13 at 01:35

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!

Google Maps API V3 Gray Areas

2 Answers2

Linked