I'm fairly new to Javascript and it's more of a guessing game for me...
I'm trying to build an app for Google Maps and just had some issues recently.
First off I just wanted to say that everything works fine in FF and IE. It's Chrome I'm having issues with.
I understand that Chrome is still somewhat in beta stages, so some bugs might occur. However this seems like something I might have done.
So...
I used a code that I found on Econym as a base and modified it slightly. Here is what I have:
And my XML file looks like this:
The error that Javascript debugger throws at me is:
"uncaught exception TypeError: Cannot call method 'getElementsByT agName' of undefined"
Any help would be appreciated!
I'm trying to build an app for Google Maps and just had some issues recently.
First off I just wanted to say that everything works fine in FF and IE. It's Chrome I'm having issues with.
I understand that Chrome is still somewhat in beta stages, so some bugs might occur. However this seems like something I might have done.
So...
I used a code that I found on Econym as a base and modified it slightly. Here is what I have:
Code:
<div> <div id="search" align="center"> <table border="1"> <tr> <td> <div id="map" style="width: 690px; height: 450px"> </div> </td> <td width="250" valign="top" style="color: #4444ff;"> <!-- =========== side_bar with scroll bar ================= --> <div id="side_bar" style="overflow: auto; height: 450px;"> </div> <!-- ===================================================== --> </td> </tr> </table> <noscript> <b>JavaScript must be enabled in order for you to use Google Maps.</b> However, it seems JavaScript is either disabled or not supported by your browser. To view Google Maps, enable JavaScript by changing your browser options, and then try again. </noscript> <script type="text/javascript"> //<![CDATA[ if (GBrowserIsCompatible()) { var side_bar_html = ""; var gmarkers = []; var htmls = []; var i = 0; // A function to create the marker and set up the event window function createMarker(point,name,html,address,phone) { var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); } ); gmarkers[i] = marker; htmls[i] = html; side_bar_html += '<p id="location"><a href="javascript:myclick(' + i + ')">' + name + '<\/a><br><em><strong>Address: </strong>' + address + '<br><strong>Phone: </strong>' + phone + '</em></p>'; i++; return marker; } //Function to proccess the click on the navigation slider function myclick(i) { gmarkers[i].openInfoWindowHtml(htmls[i]); } // create the map var map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(40.000000,-79.359741), 13); GDownloadUrl("http://localhost:64109/WebSite28/XMLportland.xml", function(doc) { var xmlDoc = GXml.parse(doc); var markers = xmlDoc.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { // obtain the attribues of each marker var lat = parseFloat(markers[i].getAttribute("lat")); var lng = parseFloat(markers[i].getAttribute("lng")); var point = new GLatLng(lat,lng); var html = markers[i].getAttribute("html"); var label = markers[i].getAttriEconym bute("label"); var address = markers[i].getAttribute("address"); var phone = markers[i].getAttribute("phone"); var marker = createMarker(point,label,html,address,phone); map.addOverlay(marker); } document.getElementById("side_bar").innerHTML = side_bar_html; }); } else { alert("Sorry, the Google Maps API is not compatible with this browser"); } </script> </div> </div>
Code:
<?xml version="1.0" encoding="utf-8" standalone="no"?> <markers> <marker lat="43.6281251" lng="-70.2947086" html="<div id='desc'><h3>Facility Name</h3><p><span>Address: </span>380 Main Street<br />South Portland, ME, 04106<br /><span>Phone: </span>(555) 555-5555<br><span>Hours: </span>Monday - Friday: 7:30AM-5PM<br /><span>Saturday: </span>8AM-12PM<br /><span>Sunday: </span>Closed</p><img src='images/AARLogo.jpg' alt='Approved Auto Repair' width='100px' height='66px' align='right' id='Logo' /><h4>Available Services</h4><div id='col1'><table class='services'><tr><td><img src='images/check.jpg' width='13px' height='13px' alt='Yes' /></td><td>Engine Tune Up</td></tr><tr><td><img src='images/check.jpg' width='13px' height='13px' alt='Yes' /></td><td>Minor Engine Repair</td></tr><tr><td><img src='images/check.jpg' width='13px' height='13px' alt='Yes' /></td><td>Brakes</td></tr><tr><td><img src='images/check.jpg' width='13px' height='13px' alt='Yes' /></td><td>Electrical Systems</td></tr><tr><td><img src='images/check.jpg' width='13px' height='13px' alt='Yes' /></td><td>Tires, Steering, Suspension</td></tr><tr><td><img src='images/check.jpg' width='13px' height='13px' alt='Yes' /></td><td>Heating/Cooling & AC</td></tr><tr><td><img src='images/check_empty.jpg' width='13px' height='13px' alt='Yes' /></td><td>Major Engine repair</td></tr></table></div><div id='col2'><table class='services'><tr><td><img src='images/check_empty.jpg' width='13px' height='13px' alt='Yes' /></td><td>Automatic Transmission</td></tr><tr><td><img src='images/check.jpg' width='13px' height='13px' alt='Yes' /></td><td>Manual Transmission</td></tr><tr><td><img src='images/check_empty.jpg' width='13px' height='13px' alt='Yes' /></td><td>Diagnostic Services</td></tr><tr><td><img src='images/check_empty.jpg' width='13px' height='13px' alt='Yes' /></td><td>Smog Check</td></tr><tr><td><img src='images/check_empty.jpg' width='13px' height='13px' alt='Yes' /></td><td>Brake Certification</td></tr><tr><td><img src='images/check_empty.jpg' width='13px' height='13px' alt='Yes' /></td><td>Lamp Certification</td></tr><tr><td><img src='images/check_empty.jpg' width='13px' height='13px' alt='Yes' /></td><td>Automotive Diesel Repairs</td></tr></table></div></div>" label="Facility Name" address="380 Main Street<br />Boston, MA" phone="(555) 555-5555" distance="2 mi" /> </markers>
"uncaught exception TypeError: Cannot call method 'getElementsByT agName' of undefined"
Any help would be appreciated!
Comment