By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,701 Members | 1,938 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,701 IT Pros & Developers. It's quick & easy.

Javascript & Google Maps error.

P: 5
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:
Expand|Select|Wrap|Line Numbers
  1. <div>
  2.         <div id="search" align="center">
  3.             <table border="1">
  4.                 <tr>
  5.                     <td>
  6.                         <div id="map" style="width: 690px; height: 450px">
  7.                         </div>
  8.                     </td>
  9.                     <td width="250" valign="top" style="color: #4444ff;">
  10.                         <!-- =========== side_bar with scroll bar ================= -->
  11.                         <div id="side_bar" style="overflow: auto; height: 450px;">
  12.                         </div>
  13.                         <!-- ===================================================== -->
  14.                     </td>
  15.                 </tr>
  16.             </table>
  17.             <noscript>
  18.                 <b>JavaScript must be enabled in order for you to use Google Maps.</b> However,
  19.                 it seems JavaScript is either disabled or not supported by your browser. To view
  20.                 Google Maps, enable JavaScript by changing your browser options, and then try again.
  21.             </noscript>
  22.  
  23.             <script type="text/javascript">
  24.                 //<![CDATA[
  25.                 if (GBrowserIsCompatible()) 
  26.                 {
  27.                     var side_bar_html = "";
  28.                     var gmarkers = [];
  29.                     var htmls = [];
  30.                     var i = 0;
  31.  
  32.                     // A function to create the marker and set up the event window
  33.  
  34.                     function createMarker(point,name,html,address,phone) 
  35.                     {
  36.                         var marker = new GMarker(point);
  37.                         GEvent.addListener(marker, "click", function() 
  38.                             {
  39.                                 marker.openInfoWindowHtml(html);
  40.                             }
  41.                         );
  42.                         gmarkers[i] = marker;
  43.                         htmls[i] = html;
  44.  
  45.                         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>';
  46.                         i++;
  47.                         return marker;
  48.                     }
  49.  
  50.                     //Function to proccess the click on the navigation slider
  51.  
  52.                     function myclick(i) 
  53.                     {
  54.                         gmarkers[i].openInfoWindowHtml(htmls[i]);
  55.                     }
  56.  
  57.                     // create the map
  58.  
  59.                     var map = new GMap2(document.getElementById("map"));
  60.                     map.addControl(new GLargeMapControl());
  61.                     map.addControl(new GMapTypeControl());
  62.                     map.setCenter(new GLatLng(40.000000,-79.359741), 13);
  63.  
  64.                     GDownloadUrl("http://localhost:64109/WebSite28/XMLportland.xml", function(doc) {
  65.                     var xmlDoc = GXml.parse(doc);
  66.                     var markers = xmlDoc.documentElement.getElementsByTagName("marker");
  67.                     for (var i = 0; i < markers.length; i++) 
  68.                     {
  69.  
  70.                         // obtain the attribues of each marker
  71.  
  72.                         var lat = parseFloat(markers[i].getAttribute("lat"));
  73.                         var lng = parseFloat(markers[i].getAttribute("lng"));
  74.                         var point = new GLatLng(lat,lng);
  75.                         var html = markers[i].getAttribute("html");
  76.                         var label = markers[i].getAttriEconym bute("label");
  77.                         var address = markers[i].getAttribute("address");
  78.                         var phone = markers[i].getAttribute("phone");
  79.                         var marker = createMarker(point,label,html,address,phone);
  80.                         map.addOverlay(marker);
  81.                     }
  82.  
  83.                     document.getElementById("side_bar").innerHTML = side_bar_html;
  84.                 });
  85.             }
  86.         else {
  87.             alert("Sorry, the Google Maps API is not compatible with this browser");
  88. }
  89.             </script>
  90.  
  91.         </div>
  92.     </div>
  93.  
And my XML file looks like this:
Expand|Select|Wrap|Line Numbers
  1. <?xml version="1.0" encoding="utf-8" standalone="no"?>
  2. <markers>
  3.   <marker lat="43.6281251" lng="-70.2947086" html="&lt;div id='desc'&gt;&lt;h3&gt;Facility Name&lt;/h3&gt;&lt;p&gt;&lt;span&gt;Address: &lt;/span&gt;380 Main Street&lt;br /&gt;South Portland, ME, 04106&lt;br /&gt;&lt;span&gt;Phone: &lt;/span&gt;(555) 555-5555&lt;br&gt;&lt;span&gt;Hours: &lt;/span&gt;Monday - Friday: 7:30AM-5PM&lt;br /&gt;&lt;span&gt;Saturday: &lt;/span&gt;8AM-12PM&lt;br /&gt;&lt;span&gt;Sunday: &lt;/span&gt;Closed&lt;/p&gt;&lt;img src='images/AARLogo.jpg' alt='Approved Auto Repair' width='100px' height='66px' align='right' id='Logo' /&gt;&lt;h4&gt;Available Services&lt;/h4&gt;&lt;div id='col1'&gt;&lt;table class='services'&gt;&lt;tr&gt;&lt;td&gt;&lt;img src='images/check.jpg' width='13px' height='13px' alt='Yes' /&gt;&lt;/td&gt;&lt;td&gt;Engine Tune Up&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;img src='images/check.jpg' width='13px' height='13px' alt='Yes' /&gt;&lt;/td&gt;&lt;td&gt;Minor Engine Repair&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;img src='images/check.jpg' width='13px' height='13px' alt='Yes' /&gt;&lt;/td&gt;&lt;td&gt;Brakes&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;img src='images/check.jpg' width='13px' height='13px' alt='Yes' /&gt;&lt;/td&gt;&lt;td&gt;Electrical Systems&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;img src='images/check.jpg' width='13px' height='13px' alt='Yes' /&gt;&lt;/td&gt;&lt;td&gt;Tires, Steering, Suspension&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;img src='images/check.jpg' width='13px' height='13px' alt='Yes' /&gt;&lt;/td&gt;&lt;td&gt;Heating/Cooling &amp; AC&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;img src='images/check_empty.jpg' width='13px' height='13px' alt='Yes' /&gt;&lt;/td&gt;&lt;td&gt;Major Engine repair&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;&lt;div id='col2'&gt;&lt;table class='services'&gt;&lt;tr&gt;&lt;td&gt;&lt;img src='images/check_empty.jpg' width='13px' height='13px' alt='Yes' /&gt;&lt;/td&gt;&lt;td&gt;Automatic Transmission&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;img src='images/check.jpg' width='13px' height='13px' alt='Yes' /&gt;&lt;/td&gt;&lt;td&gt;Manual Transmission&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;img src='images/check_empty.jpg' width='13px' height='13px' alt='Yes' /&gt;&lt;/td&gt;&lt;td&gt;Diagnostic Services&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;img src='images/check_empty.jpg' width='13px' height='13px' alt='Yes' /&gt;&lt;/td&gt;&lt;td&gt;Smog Check&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;img src='images/check_empty.jpg' width='13px' height='13px' alt='Yes' /&gt;&lt;/td&gt;&lt;td&gt;Brake Certification&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;img src='images/check_empty.jpg' width='13px' height='13px' alt='Yes' /&gt;&lt;/td&gt;&lt;td&gt;Lamp Certification&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;img src='images/check_empty.jpg' width='13px' height='13px' alt='Yes' /&gt;&lt;/td&gt;&lt;td&gt;Automotive Diesel Repairs&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;&lt;/div&gt;" label="Facility Name" address="380 Main Street&lt;br /&gt;Boston, MA" phone="(555) 555-5555" distance="2 mi" />
  4. </markers>
  5.  
The error that Javascript debugger throws at me is:
"uncaught exception TypeError: Cannot call method 'getElementsByTagName' of undefined"
Any help would be appreciated!
Apr 6 '09 #1
Share this Question
Share on Google+
5 Replies


P: 5
I posted a dupe somehow...
Apr 6 '09 #2

P: 5
I put the files online, so it might be a little easier to troubleshoot.
Here is the URL: http://nike1984.brinkster.net/Map.aspx
Thank you,
Nick
Apr 6 '09 #3

acoder
Expert Mod 15k+
P: 16,027
Looking at the page source, perhaps the problem is that the Google Maps code is included outside the head and there's no html tag.
Apr 7 '09 #4

P: 5
That's correct acoder.
I just fixed the following problem by simply moving the first script link within the header section and also adding the doctype and validating the html.
Thank you so much!
Nick
Apr 7 '09 #5

acoder
Expert Mod 15k+
P: 16,027
You're welcome. Glad you got it working :)
Apr 7 '09 #6

Post your reply

Sign in to post your reply or Sign up for a free account.