Question

I am needing to clear a DIV that is created from Google maps function.
There are two HTML DIVs. The DIV I am having trouble with is MarkerCount

 <div id="sidebar"></div>
 <div id="MarkerCount"></div>

 function createMarkerCount(count) {
 var div = document.createElement('div');
 var html = "Results: " + count + " Facilities";
 div.innerHTML = html;
 div.style.marginBottom = '5px'; 
 return div;
 }

This is created when markers are returned to the Google Map. This is basically performing a count on the amount of records currently displayed on the map. This function works fine.

Here is my function to reset the map and clear the markers and another innerhtml DIV called sidebar:

function clearLocations() {
infoWindow.close();
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers.length = 0; 
sidebar.innerHTML = "";
 map.setCenter(new google.maps.LatLng(36.1611, -116.4775), 6);
}

This function works just fine. Now when I want to clear the MarkerCount,
I tried to add the following line to the function clearLocations()

MarkerCount.innerHTML = "";

However when the page first loads, and you perform a search, the clearLocations() function is called before the search is started, because there is not currently an innerhtml created for the CreateMarker function. this throws back an error which states that CreateMarker is NULL as there is nothing there.

So the skinny is, sidebar.innerhtml gets cleared just fine, but when I add the line of code to clear the CreateMarker.innerhtml DIV, I receive an error. Not sure why this might be happening….

EDIT — Function To Show How CountMarker Gets Count

var markercountEntry = createMarkerCount(markerNodes.length);
MarkerCount.appendChild(markercountEntry); 

Answer 1

It sounds like you are having problems with setting an innerHTML on an element that is not defined yet, in your clearLocations() function. I suggest you just handle the case where CreateMarker or MarkerCount is not defined yet.

Something like:

function clearLocations() {
   if(CreateMarker && CreateMarker.innerHTML)
      CreateMarker.innerHTML = "";
   infoWindow.close();
   for (var i = 0; i < markers.length; i++) {
     markers[i].setMap(null);
   }
   markers.length = 0; 
   sidebar.innerHTML = "";
   map.setCenter(new google.maps.LatLng(36.1611, -116.4775), 6);
}