Embedding Google Maps Problem

Discussion in 'Web Design and Development' started by CANEHDN, Jun 18, 2008.

  1. CANEHDN macrumors 6502a

    CANEHDN

    Joined:
    Dec 12, 2005
    Location:
    Eagle Mountain, UT
    #1
    I'm creating a page on our site that embeds a google map of our location. The code works fine in Firefox and Safari. When loading the page in IE, I get an error "Internet Exploer cannot open the Internet site. http://www.... Operation aborted." I've located the line of code that generates the error. If I comment the line out it opens the map. The line is adding the bubble that has the address of our location. Even if I do a straight map.openInfoWindow instead of map.openInfoWindowHtml I still get the error.

    I have searched everywhere and can't find anything. Any help would be much appreciated. Here is the URL to the page. Currently, I've got the line uncommented to you can see the error in IE. http://www.motorsportsland.com/locate.php

    Code:
    function addMap() {
          if (GBrowserIsCompatible()) {
            var map = new GMap2(document.getElementById("map_canvas"),{ size: new GSize(540,500) });
    		
    		//Sets the object of MSL location
    		var mslLocation = new GLatLng(40.684500, -111.888108);
    		
    		//Centers Map to MSL location
           	map.setCenter(mslLocation, 13);
    		
    		//Adds the Zoom and View Controls
    		var mapControl = new GMapTypeControl();
    		map.addControl(mapControl);
    		map.addControl(new GLargeMapControl());
    		
    		//Adds the Pointer to MSL
    		map.addOverlay(new GMarker(mslLocation));
    		
    		//Sets the Info that will display in the popup bubble in the map
    		var bubbleText = "<img width='75' src='http://www.motorsportsland.com/css/mslLogo.gif'<br /><b>Motor Sportsland</b><br /><br />4001 So. State<br />Salt Lake City, UT<br />84107";
    		
    		//Creates the Message Window pointing to MSL
    		//THIS LINE GENERATES THE ERROR!!!
                    map.openInfoWindowHtml(mslLocation, bubbleText);
    		
    		//Zooms in Once on the map
    		map.zoomIn();
          }
        }
    
     
  2. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #2
    Find:

    Change to:

    You didn't close the img tag properly based on your code example above (missing ">" on the end). As an aside I also added border=0, a proper alt text for 508 compliancy and replaced <B> with <strong> which is not deprecated.

    -jim
     
  3. CANEHDN thread starter macrumors 6502a

    CANEHDN

    Joined:
    Dec 12, 2005
    Location:
    Eagle Mountain, UT
    #3
    Good catch on the closing of the image tag. Still doesn't work though. I added <strong> over the <b>. Although not the problem, I did add alt and border tags.
     
  4. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #4
    Okay, only one other thing I can suggest. I viewed your page source via FF3 on my Mac and noticed a JavaScript block is above your DOCTYPE which should be the first line, always. It's the script that starts with "checkFields();" as the first command, I'm referring to that whole block of code including script tags. Move that inside the head tags, I am guessing MSIE freaks out at the placement based on the body onLoad.

    In the future if you want to ensure the best possible cross browser compatibility validate your page at http://validator.w3.org/ and fix any errors

    -jim
     
  5. CANEHDN thread starter macrumors 6502a

    CANEHDN

    Joined:
    Dec 12, 2005
    Location:
    Eagle Mountain, UT
    #5
    I had a little block of php before the DOCTYPE tag. I've moved that into the head tag. The problem I'm having is if I comment out this line "map.openInfoWindowHtml(mslLocation, bubbleText);" It loads the page.
     
  6. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #6
    Another strong suggestion...

    You're using strict mode and your page still isn't validating with two major errors. I know this seems I am sending you off course but this is the proper debugging technique by allowing us to sensibly rule out DTD errors which IS a common cause for browser weirdness in this mode (compared to transitional) -- before we look at the Google code.

    If you're going to use strict, please use this syntax to define your page:

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    ... and so on...
    But aside from that, here are other things to try related to their code...
    • Others had some issues with the map function, refer to: http://groups.google.no/group/Google-Maps-API/browse_thread/thread/b7fc9c63c8e5da1b?hl=en and try the advice there
    • Try setting bubbleText to "Hello World" (no html) and change the function being called to openInfoWindow instead of openInfoWindowhtml to see if the latter has issues. I say this because there might be a bug in Google's map class, assuming you're using the latest version and copy/pasted without issue.
    I am outta ideas after this!

    -jim
     
  7. CANEHDN thread starter macrumors 6502a

    CANEHDN

    Joined:
    Dec 12, 2005
    Location:
    Eagle Mountain, UT
    #7
    I've made the changes. I appreciate your help and advice in sprucing up my HTML. I've changed the openInfoWindowHtml line to "map.openInfoWindow(mslLocation, "Hello World");"

    Still nothing. I'll take a look at that forum and see what I can find. Thanks again for your help.
     

Share This Page