Hi all.
I guess I can consider myself a beginner when it comes to Javascript,
so I'm having a bit of a difficulty trying to put a little mashup
together...
I'm using a code example from Econym as a base for my application.
I created a custom XML in oppose to the one used in the example and
everything works fine in Mozilla and IE, however Chrome is giving me
an error.
I understand that Chrome is still in beta stages, however I think my
issue has something to do with Javascript errors more than with
browser implementation of it.
Here is a quick snippet from the code that I'm using:
[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]
And the example of the xml is below:
[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>
[/CODE]
The error that I receive is: "uncaught exception TypeError: Cannot
call method 'getElementsByTagName' of undefined"
Can anyone help? Its driving me off the wall :)
Thank you!
Nick
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Maps API" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/Google-Maps-API?hl=en
-~----------~----~----~----~------~----~------~--~---
