Javascript & Google Maps error.

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Nike1984
    New Member
    • Apr 2009
    • 5

    Javascript & Google Maps error.

    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:
    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>
    And my XML file looks like this:
    Code:
    <?xml version="1.0" encoding="utf-8" standalone="no"?>
    <markers>
      <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" />
    </markers>
    The error that Javascript debugger throws at me is:
    "uncaught exception TypeError: Cannot call method 'getElementsByT agName' of undefined"
    Any help would be appreciated!
  • Nike1984
    New Member
    • Apr 2009
    • 5

    #2
    Javascript Google Maps Errors... Can anyone help?

    I posted a dupe somehow...

    Comment

    • Nike1984
      New Member
      • Apr 2009
      • 5

      #3
      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

      Comment

      • acoder
        Recognized Expert MVP
        • Nov 2006
        • 16032

        #4
        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.

        Comment

        • Nike1984
          New Member
          • Apr 2009
          • 5

          #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

          Comment

          • acoder
            Recognized Expert MVP
            • Nov 2006
            • 16032

            #6
            You're welcome. Glad you got it working :)

            Comment

            Working...