Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Archive /

Our old forums are still available as a read-only archive.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo

Google Maps API problem in Firefox


Go to End


4 Posts   7376 Views

Avatar
Anatol

126 Posts

21 August 2008 at 7:13pm

Hi,

I added a Google Maps API to a Silverstripe site - it works well in Internet Explorer, but not in Firefox. At first I thought that this is a Google API problem, but the code works if I take it out of the Silverstripe context. So I guess that the problem is either a Google/Silverstripe Javascript conflict or the Google API is not completely downloaded for some reason. But I may be completely wrong.

The link to the temporary development site is e.g.:
http://clients.nugob.org/sginz/a-test-event-with-map/#map

Below is the Google API code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
<head>
		<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAgDhSzdPEyxxJiKPLQn6uGxTI_RQfTzmVDUbcO_9FMUYPBP_s7RQKyu8bt9LN14YdoCf9TzkKwbkKTw" type="text/javascript"></script>
	<script type="text/javascript">
		//<![CDATA[
		var map = null;
		var geocoder = null;
		
		function initialize_map() {
			if (GBrowserIsCompatible()) {
				var map = new GMap2(document.getElementById("MapHolder"));
				var address = "40 eaglehurst rd auckland";
				map.setCenter(new GLatLng(-36.805032,174.752523), 14);
				map.addControl(new GLargeMapControl());
				map.addControl(new GMapTypeControl());
				geocoder = new GClientGeocoder();
				if (geocoder) {
					geocoder.getLatLng(
						address,
						function(point) {
							if (!point) {
								alert(address + " not found");
							} else {
								map.setCenter(point, 14);
								var marker = new GMarker(point);
								map.addOverlay(marker);
								marker.openInfoWindowHtml("<b>Test Event</b><br />24/09/2008 10:00am<br />SGI NZ Culture Centre Auckland<br />40 Eaglehurst Rd, Ellerslie, Auckland");
								GEvent.addListener(marker, "click", function() {
									marker.openInfoWindowHtml("<b>Test Event</b><br />24/09/2008 10:00am<br />SGI NZ Culture Centre Auckland<br />40 Eaglehurst Rd, Ellerslie, Auckland");
								});
							}
						}
					)
				}
			}
		}
		//]]>
	</script>

</head>
<body onload="initialize_map()" onunload="GUnload()">
<div id="MapHolder" style="height: 400px;"></div>
</body>
</html>

This code is just copied out of the generated Silverstripe html source code. It works by itself: http://clients.nugob.org/sginz/maptest.html

But it does not work in Firefox with the complete Silverstripe source code. The error message I get is "GMap2 is not defined". There is quite some information on that error message in Google Maps API forums, but the point is that Firefox itself can not be the problem.

If anyone could give me a hint I would be very grateful.

Cheers!
Anatol

Avatar
spenniec

Community Member, 37 Posts

21 August 2008 at 8:53pm

Edited: 21/08/2008 8:55pm

One suggestion for testing is to ensure that the div MapHolder isn't nested beneath other divs in the SS version. I had some issues with getting GMap code to work, I was scratching my head thinking that my SS page and static page were the same when in fact they weren't.
I can't remember the exact details but it was similar in that it would work in IE but not FF.
Might be how they deal with the DOM or something.

Avatar
Anatol

126 Posts

22 August 2008 at 11:29am

Hi spenniec,

yes, you are right. The Google Maps API works in Firefox even if copy the complete source code that is generated by Silverstripe from the browser ("View Page Source" in Firefox) and then paste it into a static HTML page. The page gets displayed correctly with the map. I don't use Ajax in the frontend so I am really puzzled why the API does not work in Silverstripe forntend but does in a static with the identical source code. Somewhere must be a difference.

static page vs dynamic page

I will investigate this further, but any ideas are welcome.

Cheers!
Anatol

Avatar
Anatol

126 Posts

27 August 2008 at 2:43pm

Hi,

I figured it out. This is useful for everyone who wants to use the Google Maps API:

The map does not get displayed in Firefox with a Content-Type:application/xhtml+xml .
Why? application/xhtml+xml does not support document.write() which is required for the Google Maps API. Here is some more information on that: http://ln.hixie.ch/?start=1091626816&count=1

I think by default Silverstripe uses application/xhtml+xml. Don't rely on the meta tag in the source code. Even if it says <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> the actual content type may still be application/xhtml+xml.

To view the Content-Type in Firefox right-click the page and choose "View Page Info".

To change the content type to text/html add this line to your site _config.php file:

ContentNegotiator::disable();

After I changed this the Google Maps API worked fine. I wish I had found this post earlier: http://silverstripe.com/extending-hacking-silverstripe-forum/flat/1449

I am not a content type expert. Would there be any disadvantage elsewhere for Silverstripe if I use text/html instead?

I use XHTML 1.1, according to W3C text/html should not be used for XHTML 1.1 ('should not', not 'must not'): http://www.w3.org/TR/xhtml-media-types/#summary

Cheers!
Anatol