0

I have been using Open infoWindow of specific marker from outside Google Maps (V3) to try and implement a sidebar into one of my map pages. I've put together the following code (see below) but I'm getting an error when I try and open the page. The error is 'document.getElementById(...)' is null or not an object' and it is pointing to this line : 

document.getElementById("locationslist").innerHTML = locationslist;

I've been looking at this now for quite some time and I just can't see what the error is. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>All Locations</title>
        <link rel="stylesheet" href="css/alllocationsstyle.css" type="text/css" media="all" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>


<div id="map"></div> 
<div id="locationslist"></div> 

<body onload="showLocations()"> 

<script type="text/javascript"> 

var map; 
var gmarkers = new Array();
var locationslist;

function showLocations() { 
  map = new google.maps.Map(document.getElementById("map"), { 
    center: new google.maps.LatLng(54.312195845815246,-4.45948481875007), 
            zoom:6, 
            mapTypeId: 'terrain' 
  }); 
  var infoWindow = new google.maps.InfoWindow; 

  // Change this depending on the name of your PHP file 
  downloadUrl("phpfile.php", function(data) { 
    var xml = data.responseXML; 
    gmarkers = xml.documentElement.getElementsByTagName("marker"); 
    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0; i < gmarkers.length; i++) { 
      var locationname = gmarkers[i].getAttribute("locationname"); 
      var address = gmarkers[i].getAttribute("address"); 
      var locationid = gmarkers[i].getAttribute("locationid"); 
      var point = new google.maps.LatLng( 
          parseFloat(gmarkers[i].getAttribute("osgb36lat")), 
          parseFloat(gmarkers[i].getAttribute("osgb36lon"))); 
      var html = "<b>" + locationname + "</b> <br/>" + address; 
      bounds.extend(point);  
      var marker = new google.maps.Marker({ 
        map: map, 
        position: point, 
        locationid: locationid 
      }); 
      bindInfoWindow(marker, map, infoWindow, html);  
      locationslist += "<div onclick=scrollToMarker(" + i + ")>"+locationname+"</div>"; 
    }        
    map.setCenter(bounds.getCenter()); 
    map.fitBounds(bounds);  
    //display company data in html 
    document.getElementById("locationslist").innerHTML = locationslist; 
  }); 

} 

function scrollToMarker(index) { 
    map.panTo(gmarkers[index].getPosition()); 
} 

function bindInfoWindow(marker, map, infoWindow, html) { 
  google.maps.event.addListener(marker, 'click', function() { 
    infoWindow.setContent(html); 
    infoWindow.open(map, marker); 
  }); 
} 

function downloadUrl(url, callback) { 
  var request = window.ActiveXObject ? 
      new ActiveXObject('Microsoft.XMLHTTP') : 
      new XMLHttpRequest; 

  request.onreadystatechange = function() { 
    if (request.readyState == 4) { 
      request.onreadystatechange = doNothing; 
      callback(request, request.status); 
    } 
  }; 

  request.open('GET', url, true); 
  request.send(null); 
} 
function doNothing(){ 
} 

            </script> 
            </head>    
            </body> 
            </html>
Community
  • 1
  • 1
IRHM
  • 1,326
  • 11
  • 77
  • 130
  • You're missing a bracket from here:
    . Is that just a typo on here, or is it the same on your actual page?
     – Craig A Rodway Sep 10 '11 at 18:06
  • Hi, many thanks for replying to my post and pointing out one of the mistakes. I've now put the bracket in, but I'm now getting the following error: 'gmarkers[...]' is null or not an object' and it is pointing to this line map.panTo(gmarkers[index].getPosition());. I don't suppose you've any ideas please where I'm going wrong now? Many thanks once again and kind regards. Chris – IRHM Sep 10 '11 at 18:12
  • "var gmarkers = xml.documentElement...." . You are re-declaring the variable as local to that function. Try removing 'var' from the beginning of that line. – Craig A Rodway Sep 10 '11 at 18:25
  • Hi, many thnaks for bearing with me on this. I've made the change but I'm now getting the error: 'Object doesn't support this property or method' and it's highlighting the following line as the problem: map.panTo(gmarkers[index].getPosition());. I've got to admit I'm not sure where to start because from what I can see the markers are defined at the beginning. Many thanks and kind regards. Chris – IRHM Sep 10 '11 at 18:46

1 Answers1

1

The problem is that gmarkers is just a bunch of XML data, and there are no functions (like getPosition()) defined on it.

The map.panTo() method takes one parameter (source), that is of the type LatLng. So you need to make an instance of the google.maps.LatLng class first. You already do this in the main function, so copy it here too:

function scrollToMarker(index) { 
    var point = new google.maps.LatLng(
        parseFloat(gmarkers[index].getAttribute("osgb36lat")), 
        parseFloat(gmarkers[index].getAttribute("osgb36lon"))
    );
    map.panTo(point); 
}
Craig A Rodway
  • 675
  • 3
  • 7
  • Hi, apologies for not getting back to you sooner. I've added the code & it works a treat. I admit to being out of my depth, but I've tried to add to your code so when the list item is clicked the infowindow opens on the appropriate marker, but I've not had a great deal of success. I just wondered whether it would be possible that you could show me please how I should set the infobox & how to change the mouse icon to the default arrow when clicking on the list item. I include a link to my page for ease http://www.mapmyfinds.co.uk/alllocationssidebar.html. Sincere thanks & kind regards. Chris – IRHM Sep 11 '11 at 15:01
  • The page isn't working at the moment due to you having the bindInfoWindow() function declared *within* the scrollToMarker() function. – Craig A Rodway Sep 11 '11 at 19:54
  • Many thanks for your continued help.I've amended thescrolltoMarker function.I've been working on this for a while & there are a few issues that I've tried to sort out, without any luck.When hovering over the list,the icon indicates these are text boxes rather than links.When I click on the link, the map correctly pans & centres on the marker,but I just can't get the InfoWindow to open. Lastly the list title is shown as undefined,I've tried changing the div & element name but this doesn't change.I just wondered whether you could perhaps provide a little more help please?.Kind regards Chris – IRHM Sep 13 '11 at 16:00