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:
- <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>
-
And my XML file looks like this:
-
<?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>
-
The error that Javascript debugger throws at me is:
"uncaught exception TypeError: Cannot call method 'getElementsByTagName' of undefined"
Any help would be appreciated!
