Google map display error after asynchronous AJAX call

Question

- Introduction

Hello, I have a separate project for my course, where I have to place all the events of the festival on one page. This is a javascript course, so most tasks need to be handled with javascript.

The problem is to provide a good website that I am using a bootable gif file with the message that the user needs to wait for the data from AJAX to be received and processed.

This is my HTML snippet.

<!-- showing loading screen --> <div id="startup"> <h3>Please wait until the data is done with loading</h3> <img src="images/ajax_load.gif" alt="loading icon" id="load_icon" /> </div> <!-- actual content (will be displayed after loading phase) --> <div id="siteContent"> <div id="top"> <label><input type="checkbox" name="cbDisabilities" id="cbDisabilities">Accessible for disabilities</label> <label><input type="checkbox" name="cbFree" id="cbFree">for free</label> <select id="selectCat"> <option selected="selected">&nbsp;</option> </select> </div> <div id="mapBox"></div> <div id="dateBox" class="layout"></div> <div id="eventBox" class="layout borders"></div> </div> <footer> <p>Gentse Feesten Infos &ndash; &copy; name here TODO</p> </footer> 

With the above, I also have the following CSS for both divs,

 div#siteContent { display: none; } /* style google map box */ div#mapBox { display: block; height : 500px; width : 500px; margin-top : 5px; } 

As you can see, the actual content is hidden, so the boot image with h3 text is only visible. Now that the AJAX call is complete, I have to add event location markers to the map. Meanwhile, I also process the received JSON data. Once this is done, I want to remove the div with the load.gif animation and display the actual content.

There is also an image of how the data is processed (initialize map = read GPS location + place the current location marker + load map);

I need to initialize the map BEFORE calling AJAX, because I have to add some markers to the map when I process the data. Without a map, there will be an error when adding google map markers.

Here is a javascript snippet at boot. There are two loadData () methods that calls AJAX and placeMap (currentLocation) to initialize the google map.

 window.addEventListener('load', function() { // get json data - going to call AJAX loadData(); // getting current location by geocoder var getGeoLocation = new google.maps.Geocoder(); var currentPosition; if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { currentPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); placeMap(currentPosition); }, function() { handleError(100); }); } else { handleError(200); } // other tasks omitted }); 

This is how the map is initialized and displayed (currentMap is a global variable for storing a link to a google map object),

 var placeMap = function(location) { var mapOptions = { zoom : 18, center : location, disableDefaultUI : true, // remove UI scaleControl : true, zoomControl : true, panControl : true, mapTypeId : google.maps.MapTypeId.ROADMAP }; currentMap = new google.maps.Map($("mapBox"), mapOptions); // current position var mapMarker = new google.maps.Marker({ position : location, map : currentMap, zIndex : 255 }); google.maps.event.addListenerOnce(currentMap, 'idle', setActive); } 

- My problem

But my problem is that the map window does not display well if I use the display: no when loading. When I switch it to the built-in (default browser display style), a gray area appears in the field, and the map is partially displayed.

- already tested solutions

I have already tried the solutions found on this site;

• here is the result: I get the same display result as this questionnaire, this is a gray area. But that did not solve my problem.
• here is the result: lack of rendering (the box crashed).
• here is the result: the same as (2).

- The best solution so far BUT

So far I have had the best result with the following command

 // display content $("startup").style.display = "none"; $("siteContent").style.display = "inline"; google.maps.event.trigger(currentMap, 'resize'); 

(startup = div with loading gif-image and siteContent = actual content).

This displays the map correctly after displaying the visible. BUT here the map - unfortunately - is not focused on GPS position. The GPS marker is located in the upper left corner.

If I display the site without using display = "none" on the div # siteContent, then everything works as intended (the google map is displayed correctly with the GPS position in the center of the map).

Does anyone know how to solve this little rendering problem? Preferably without using jQuery.

Answer 1

 // display content $("startup").style.display = "none"; $("siteContent").style.display = "inline"; google.maps.event.trigger(currentMap, 'resize'); 

(startup = div with loading gif-image and siteContent = actual content).

Now your only problem seems to be:

BUT here the map - unfortunately - is not focused on GPS position. The GPS marker is located in the upper left corner.

then you should:

 google.maps.event.trigger(currentMap, 'resize'); currentMap.setCenter(location); 

Google Maps API

Most likely, you set the center of the points before resizing the map. When it resizes, it just fills the space to the right and down, the center does not change when the map is resized.

Answer 2

You can create your map after receiving an AJAX response from the server. I do not know how you make AJAX requests, the following simple example (without jquery):

 function loadData(callback) { var oReq = new XMLHttpRequest(); oReq.open("GET", '/some/url', true); oReq.onload = callback; oReq.send(); } 

This function accepts a callback that will be executed after the AJAX request completes. Then your code:

 window.addEventListener('load', function() { // get json data - going to call AJAX loadData(function(oReq) { var response = oReq.response; // parse ajax response .... (code omitted) // getting current location by geocoder var getGeoLocation = new google.maps.Geocoder(); var currentPosition; if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { currentPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); // Now you can hide loading gif show your site content document.getElementById('startup').style.display = 'none'; document.getElementById('siteContent').style.display = 'block'; // Create map. placeMap(currentPosition); // .... add markers here. }, function() { handleError(100); }); } else { handleError(200); } // other tasks omitted }); }); 

It would be even better to show the widget loading directly above the map using a custom overlay.

Answer 3

I don't speak Spanish, but still understood this answer, and since it fixed the error in my script, I will try to translate it here and hope this can help:

---

i dangerously discovered a solution to this problem. I created a function called Mapa () to initialize Google maps. in my case, I use only ajax and load the information dynamically.

1) add a resize event: google.maps.event.trigger(currentMap, 'resize');

2) execute Mapa function using jquery onload (not working yet)

3) I started by executing the function after 1 second, then less, less and ... it worked fine for 0 milisecond, so here is the solution: setTimeout(Mapa,0);

which is working!