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