Google Maps gray area

Question

I implemented Google maps in my application (in modal), however, as you can see in the images below, there is a gray area, which of course I want to get rid of. You can move the map so that the gray area disappears, but this is not necessary.

The fact is that the map is shown inside a modal block containing a lot of content dynamically created when a button is pressed to show the modality. It seems that the problem may be that the contents of the map do not load completely before loading the modal, but I'm not sure ...

HTML:

... <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Test</h3> </div> <div id="modal-left" class="modal-body left"></div> <div class="modal-body right"> <div id="map"></div> </div> </div> ... 

JS:

  function initializeMap(latitude, longitude) { var place = new google.maps.LatLng (latitude, longitude); var myOptions = { zoom: 10, center: place, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map"), myOptions); var marker = new google.maps.Marker({ position: place, map: map, title: "" }); }; $('.modal-btn').click(function(){ var producerId = $(this).attr('id'); GetProducer(producerId, function(data) { // <--- data retrieved through ajax initializeMap(data.latitude, data.longitude); var titel = data.name; var content = "<p><img class='modal-img' src='" + data.imgurl + "' /></p>" + "<p>" + data.name + ", " + data.address + "<br/>" + data.zipcode + " " + data.town + "</p>" + "<p><a href='" + data.url + "' >" + data.url + "</a></p>"; $('#myModalLabel').html(titel); $('#modal-left').html(content); }); }); 

Image 1:

Image 2:

Answer 1

The usual reason this happens is because the size of the map changes after the initialization of the map. If for some reason you resize the div with id = "map", you need to raise the "resize" event

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

You can simply try to fire the event in the javascript console and see if it helps.

Please note that this answer is a hunch, as there is nothing in this question, so please let me know if this does not help.

Answer 2

Put google.maps.event.trigger (map, "resize"); in the setTimeout function so that it fires AFTER the event fires.

Answer 3

I was looking for some solution. I had the same problems, and I'm not the only one. The line of code above is not enough, but I noticed that manually resizing my browser fixes the problem. If he solves yours, then this is how I solve mine:

1) Add this at the end of your function to initialize your map. It will add a listener to it and call the function when loading the map. It will mainly simulate resizing.

 google.maps.event.addListenerOnce(map, 'idle', function(){ $(window).resize(); map.setCenter(yourCoordinates); }); 

I had to re-place the card after resizing

2) Create a resize listener, raising the google map resize event as follows:

 $(window).resize(function() { if ($("#map_canvas").children().length > 0){ if (map) google.maps.event.trigger(map, 'resize'); }}); 

I also had to put the card outside of my initialization function ... I know this is not the best solution, but now it works. Do not worry about calling resize ().

This seems to be due to a hidden div containing a google map. I also found a similar solution on this jfyi website . Good luck

Answer 4

This worked for me:

  var center = map.getCenter(); // . . . your code for changing the size of the map google.maps.event.trigger(map, "resize"); map.setCenter(center); 

taken from the link that @Bruno mentioned