Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Embedding Google Maps Problem

CANEHDN

CANEHDN

macrumors 6502a
Original poster
Dec 12, 2005
855
0
Eagle Mountain, UT
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();
      }
    }
 
Find:

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";
Click to expand...

Change to:

var bubbleText = "<img width='75' border='0' alt='Motor Sportsland at 4001 So. State in Salt Lake City Utah...' src='http://www.motorsportsland.com/css/mslLogo.gif'><br /><strong>Motor Sportsland</strong><br /><br />4001 So. State<br />Salt Lake City, UT<br />84107";
Click to expand...

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
 
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.
 
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
 
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.
 
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
 
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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back