Google Maps API V3 Gray Areas

Question

I installed the Google Maps V3 API, but I had problems with the resize function working correctly. I put a script to display the map in a division that crashes when a link is clicked, however it shows gray areas on the sides. I read the instances in which you should have a resize function in a script that displays division, from what I can understand, but I am having problems with its implementation.

The code that causes the separation is displayed here (class = "content"):

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

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

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

I’ve been working on other parts of the site all night and am currently pretty scattered. Sorry if I forgot to post something necessary to allow this.

Thanks in advance, Bc.

Answer 1

You need to manually reset the even resizing on 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 go 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

Hi, I quickly realized 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 a page div called "map" and a div div called "map-canvas".

This seems to be like initializing a map when a page is displayed. This makes your application slower loading the map when the user opens it, but this avoids the errors caused by dom and whatnot. This completely fixes the problem with corner maps / gray areas on my phone + jquery mobile + app for Google Maps!