[JavaScript + CSS] Fun with Google Maps

Here are a couple of quick Google Maps hacks that I came up with quite awhile ago; several years ago, in fact. While not hugely useful or profound, they do expose some fairly large holes in the Google Maps API. Holes that I would have expected a company like Google to have patched up by now.

First, let’s say that for whatever reason you need to remove the “Powered by Google” logo and the other copyright and similar boilerplate that normally appears along the bottom of the map. Why would you want to do this? Perhaps because you are displaying your map inside of a small area of the page where space is constrained to the point that the logo and other things are adding too much noise. Or perhaps because you feel (quite justifiably) that Google Maps have become iconic to the point that nobody needs to see a “Powered by Google” logo in the corner to know that the map is being powered by Google.

Whatever your reason for wanting to unclutter the map’s footer section, the task can be accomplished using a smidgen of CSS:

		.terms-of-use-link {
		    display: none;
		}

		#myMapContainerId div span {
			display: none;
		}

…and a handful of JavaScript:

			//call this after setting up your GMap2 instance
			window.unclutter = function() {
				var executed = false;
				var images = document.getElementsByTagName('img');
				for (var index = 0; index < images.length; index++) {
					var node = images[index];
					if (node.src && node.src.indexOf("mapfiles/poweredby.png") > 0) {
						node.style.display = 'none';
						executed = true;
					}
				}

				if (! executed) {
					setTimeout(window.unclutter, 250);
				}
			};

It’s pretty straightforward, really. The CSS gets rid of the “Terms of Use” link, as well as the spans that are used to display copyright text (note that you should replace the ‘myMapContainerId‘ with whatever your actual map div-id is). The JavaScript is used to get rid of the “Powered by Google” logo, which is added to the map after it loads. To use this code, you just need to call ‘unclutter()‘ after setting up your Google Map instance.

Of course, doing this is a blatant violation of the Google Maps Terms of Service. You know, the terms Google made you agree to when you generated your API key. Whether or not there is any merit in having Terms of Service mandate things which do nothing whatsoever to benefit end users such as the display of logos and copyright gibberish is a topic for another day. The topic for today is, if Google Maps can be used without an API key, and hence without agreeing to the Terms of Service, what does it matter what the terms are anyways?

That’s right, the Google Maps API can be used, at least for basic tasks, completely without an API key. It’s quite simple really, just a tiny bit more JavaScript:

			//be sure to do this *before* you source in the Google Maps javascript
			window._alert = window.alert;
			window.alert = function() {return;};

…and then you can include the Google Maps JavaScript without specifying an API key, like so:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true" type="text/javascript"></script>

The added JavaScript simply moves the browser’s built-in ‘alert()‘ function to ‘_alert()‘ so that the map can’t use it to display a message complaining about the missing API key. For whatever reason, apart from this alert message Google does nothing to prevent their API from being used without a valid key. So by simply suppressing the error message you can get a fully functional Google map without registering for a key or agreeing to the Terms of Service.

Put all of this together and you can get an anonymous, unbranded, uncluttered map the works just as well as the original version. The source code (verified in current versions of IE, Firefox, and Chrome) might look something like this:

<html>
	<head>
		<title>Google Maps API Example Hack</title>
		<style>
			.terms-of-use-link {
		    		display: none;
			}

			#myMapContainerId div span {
			     display: none;
			}
		</style>
		<script type="text/javascript">
			window._alert = window.alert;
			window.alert = function() {return;};

			window.setupMap = function() {
				window.map = new GMap2(document.getElementById("myMapContainerId"));
				map.setCenter(new GLatLng(37.4419, -122.1419), 13);
				map.addControl(new GLargeMapControl3D());
				map.addControl(new GMapTypeControl());
			};

			window.unclutter = function() {
				var executed = false;
				var images = document.getElementsByTagName('img');
				for (var index = 0; index < images.length; index++) {
					var node = images[index];
					if (node.src && node.src.indexOf("mapfiles/poweredby.png") > 0) {
						node.style.display = 'none';
						executed = true;
					}
				}

				if (! executed) {
					setTimeout(window.unclutter, 250);
				}
			};

			window.onload = function() {setupMap(); unclutter();};
		</script>
		<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;" type="text/javascript"></script>
	</head>
	<body>
		Note the lack of branding/logos, terms of use links, and copyright footer text in the map below.<br />
		Also note the lack of any Google Maps API key in the document source.<br />
		And the lack of any annoying <a href="#" onclick="_alert('I can still create alerts, but the Google Map can\'t.'); return false;">alert</a> popups complaining about the API key.<br /><br />
		<div id="myMapContainerId" style="width: 600px; height: 400px;"></div>
	</body>
</html>

…which gives you a page like this one. It’s enough to make one wonder why anyone would bother signing up for a Google Maps API key the proper way, when the entire thing can be subverted so easily.

This entry was posted in coding, javascript and tagged , , . Bookmark the permalink.

One Response to [JavaScript + CSS] Fun with Google Maps

  1. James says:

    is there any way to use this with iweb…i’ve pasted the html into a widget and it works great off my hard drive…i was exstatic…but when i uploaded the site to my server i just got a white box…

    thanks for the great stuff

    james

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>