Strange AJAX conflict not allowing Google Maps to render

Problem:

I have an AJAX driven web site that does not display Google Maps.
The web page will only display a fixed Google Map image.

Created Test Page:

Google Multiple Maps stand alone web page works fine and thoroughly tested.

AJAX Conflict

The Test page was incorporated into the AJAX web page and will not display the maps.

The “latest” web page is called from this Home page. To see the problem please scroll until DEBUG appears. The blank DIVs should have images but they are all blank.

A link is supplied which calls STAND ALONE GOOGLE MAPS WORK OK

I think the problem is that AJAX is creating a PHP server-side web page and it does not integrate with the web page DOM.

I have also tried using AJAX to create the Google Maps on the “Gateways used” page and can only get the Google fixed image maps to work. When using the JavaScript Google Maps the wrong maps appear.

Can anyone suggest why the Google Maps do not render.

As a last resort I will remove AJAX just to make the Google Maps display correctly.

Hey John,

I don’t see any occurrence of “DEBUG” on that page, However, when I open the console, I see the error:

Uncaught TypeError: Cannot read property 'addEventListener' of null (index):331

Which refers to:

document.getElementById("test_oops")      .addEventListener("click", test_oops);

I’d start by sorting that out (and lose the spaces, FWIW).

Ajax is just a combination of technologies that allow web apps are able to make quick, incremental updates to the UI without reloading the entire browser page. It doesn’t really create anything.

Currently I have AJAX configured (incorrectly?) so it only opens “index.php”.

  1. the “Latest” button at the top activates AJAX
  2. AJAX calls Server side PHP
    a. downloads and parses a JSON file
    b. formats data
    c. sends latitude and longitude, etc go Google Maps
    d. returns all data to “Latest” partial web page
    e. “index.php” receives data and displays results

Scrolling down the “Latest” page reveals DEBUG. The link standaone link works fine but Google Maps do not appear in the “Latest” page.

I have removed the relevant script and the error no longer appears.

I think I am pushing AJAX to the limit and having problems with converting the PHP syntax to be compatible with AJAX.

I will try a fresh approach and try to simplify the convoluted scripts.

Ah I see, when you hit the Latest button, you’re firing off the Ajax call, then replacing the contents of the ajaxOutput div with whatever is returned from the server.

You can use your browser’s dev tools to inspect what is returned and inserted into the page. If you right click on (or just above) the Google map that does work, Gateway Location: 54.34076, -1.4352344, and choose Inspect, you see:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2325.917857464678!2d-1.4352344!3d54.34076!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNTTCsDIwJzI2LjciTiAxwrAyNicwNi44Ilc!5e0!3m2!1sen!2sth!4v1538709168428" width="600" height="450" frameborder="0" style="border:0" allowfullscreen=""></iframe>

Whereas, if you do the same for any of the maps that don’t work, you see an empty div:

<div class="block-item">
  <div id="mapCanvas_0" class="map-item">
  </div>
</div>

Which would indicate that the problem lies with whatever the server is returning—in this case several empty <div> elements instead of <iframe> elements containing maps.

Switching to the Network tab in your browser’s dev tools, then hitting the Latest button once more allows you to inspect what is being sent back across the wire. This makes debugging a little easier.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.