Embedding Google Maps Problem [Archive]

View Full Version : Embedding Google Maps Problem

CANEHDN

Jun 18, 2008, 04:58 PM

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

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' Motor Sportsland 4001 So. State Salt Lake City, UT 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();
}
}

SrWebDeveloper

Jun 19, 2008, 01:48 PM

Find:

var bubbleText = "<img width='75' src='http://www.motorsportsland.com/css/mslLogo.gif' Motor Sportsland 4001 So. State Salt Lake City, UT 84107";

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'> Motor Sportsland 4001 So. State Salt Lake City, UT 84107";

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 with which is not deprecated.

-jim

CANEHDN

Jun 23, 2008, 10:57 AM

Good catch on the closing of the image tag. Still doesn't work though. I added over the . Although not the problem, I did add alt and border tags.

SrWebDeveloper

Jun 23, 2008, 11:58 AM

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

CANEHDN

Jun 23, 2008, 04:11 PM

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.

SrWebDeveloper

Jun 23, 2008, 10:12 PM

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:

<!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

CANEHDN

Jun 24, 2008, 12:28 PM

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.