Home/ Questions/Q 7444417
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T11:30:29+00:00

I fixed the problem below by updating the Google maps API version in this

  • 0

I fixed the problem below by updating the Google maps API version in this line of code:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.9
&sensor=false"> </script>

But now I have the same problem again! I updated the version again (to the 3.9 you see above), but the content is once again not displaying in the sidebar div (see below). I haven’t done a thing to this code, which has been online since December 2011. Any ideas about why it would suddenly stop working?

I’ve got an application that uses Google maps v3 with php and mysql to display markers on a map. The markers connect to info window content on mouseover (drawn from the database) and then display new content (also drawn from the database) in a side div on click. See it at: http://www.corkmemorymap.org

All of this was working fine and then suddenly it wasn’t. The sidebar no longer displays on click. Nothing happens at all. If you use the topic search above the map, you can see what is supposed to happen (click on one of the stories that drop down over the map when you choose a topic).

The code for this page is based on the Google maps doc here:
http://code.google.com/apis/maps/articles/phpsqlajax_v3.html
I’m using the php echo function for the XML file (this is because the hosting organization has an old version of php).

I added this function to get the sidebar content to come up on click:

function contentBox(marker, map, sidebar, winHtml, infoWindow) {
    google.maps.event.addListener(marker, 'click', function() {
    document.getElementById('sidebar').innerHTML=winHtml;
    /*closes the info window when users clicks the marker 
    and launches the content*/
    infoWindow.close(map, marker);

    });
}

It is within the larger ajax function, and is also called within that function.

oh, and this is the winHtml variable:

var winHtml =
      '<!DOCTYPE html>' +
      '<head>' +
      '<link rel="stylesheet" href="mapstyle4.css">' +
      '</head>' +
      '<body>' +
      '<div id="sidebar">' + '<h2>' + ph_title + '</h2>' 
        + '</header>' +
      '<div id="photos">' +
      '<img width="220" src="'+ph_web+'"/>' +
      '</div>' +
      '<div id="trans">' + trans_xcrpt +
      '</div>' +
      '<div id="audio">' +
      '<audio autoplay="autoplay" controls="controls">' +
      '<source src="'+audio_ogg+'" type="audio/ogg">' +
      '<source src="'+audio_mp3+'" type="audio/mpeg">' +
      '</audio>' +
      '</div>' +
      '</body>' +
      '</html>';

I’ve tested this locally as well (on my MAMP), and it doesn’t work there either, which suggests it is something that has changed at Google. But what? How do I find out what has changed so I can adjust my code? Has this happened to anyone else? With no error messages and a code that has worked fine for 6 months then suddenly doesn’t I am at a bit of a loss for troubleshooting.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There is an error in your DOM reference on line 128 of your page, which yields the following JS error:

    TypeError: 'null' is not an object (evaluating 'document.getElementById('infoWindow').parentNode')

    There is also a line break in your code in line 128.

    I suggest removing the reference to parentnode, so that your code looks like this:

    document.getElementById('infoWindow').style.overflow = 'visible';

    I was able to get the sidebar to come up on marker click once I set the JS as described.

    • 0