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:
Expand|Select|Wrap|Line Numbers
- <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>
Expand|Select|Wrap|Line Numbers
- <?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 'getElementsByTagName' of undefined"
Any help would be appreciated!