My Maps in Your Maps

posted on June 1st, 2007 by Anthony

Not my maps – your My Maps – in your maps.

I’ve been working on a project that really benefits from some Google Mappage. After originally thinking I would be bashing in line-after-line of raw long/lat coordinates I was relieved to find a very easy way to harness the new My Maps features in your own embedded maps on your site.

So for the first time in a long, long while here’s a tutorial from me – aiming to to show you just how easy it is.

Creating your My Map

Getting Started

First you need to get a Google Account.

If you use Gmail then you’ve already got one – it’s the same as your email address. If you haven’t (why not!) you can sign up by heading to www.google.com/accounts. Follow the easy instructions and you’re away. It works for all of Google’s cool stuff, so you’ll also be able to use it for their online office applications, Analytics and all of that kind of stuff.

Now you’re enlisted to the Google army, march on to http://maps.google.co.uk or http://maps.google.com or whatever you like best. On the left, just under the logo, you should see a couple of tabs – ‘Search Results’ and ‘My Maps’.

Click the My Maps tab

Unsurprisingly you want to click the My Maps one.

Cartography FTW!

We’re now ready to get mapping.

Give your map a title in the text box on the left. For this example I’m calling mine Footy Places and Stuff… You call yours what you want, you can even give it description if you’re feeling cheeky. Once you’re done give it a quick save.

Enter a title and description

Once you’re done it’s time to get putting pretty things on the map.

You can see the tools in the top left of the map:

The tools

Here you have the tool for general dragging of the map, the marker placer tool, the line tool and the polygon tool.

Here I am using the polygon tool to outline Anfield.

Outlining Anfield

Just click around the outside until you get all the way around. You don’t have to be perfect because you can always shift the outline around anytime later. Once you’ve finished the outline a box pops up. Give it a name and a description…

Argh sacralidge!

…and in this case change the colour. QUICK! You do that by clicking the colour swatch in the top right.

Thats better!

That’s better!

Give it a save and you can add any other stuff that you want…

I will say this now – If you want an info window to appear when a user clicks on something in your embedded map they your are going to have to add marker on top of your polygons. Although the polygons are clickable here in My Maps they won’t be when you put them on your site – so it’s worth adding markers too… they are placed really easy in one click.

The finished map

There you go – you have your own My Map.

KML aha aha aha aha

Now what you need to do is save the data you’ve created on to your computer in the form of a KML file. This is what we need to get all of that polygonal goodness on to your embedded map later.

Again it’s dead easy, just click the KML link in the menu above the map in the top right:

KML

Save the file to your computer and keep it safe, we need it later.

If you’re feeling saucy you can open your new KML file in Google Earth and see your handy work from crazy low angles!

The KML in Google Earth

Getting Embedded

So you’ve got your My Map. Nice. You can even share it with people if you like – get the the link from the aptly name ‘Link to this page’ link in the top right.

But wouldn’t it look much nicer on your own site? Of course it would.

Going API

To embed any Google Map on to your site you first need to get yourself hooked up to the API. Head to http://www.google.com/apis/maps/ and click the nice big link that says ‘Sign up for a Google Maps API key’.

You need to give the address of the site you are using the map on, and it generates a simple bit of code for you to create your very first embedded map.

WARNING WARNING

That code is a bit crap – as I found out after scratching my head for several hours.

You will need to make a few changes.

First you need to make sure html tag attributes looks like this

<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:v="urn:schemas-microsoft-com:vml">

If you don’t the add the xmlns:v bit then none of the SVG type polygons will work in IE.

The next – and this bit had me stumped for hours – you need to change the actual JavaSript call for the API.

For some reason the code they provide you with only references version 2 of the API . The API is actually on v2.75 or something so what you need to do is add .x after the 2 like this:

<script src="http://maps.google.com/maps?file=api&v=2.x&

That makes sure you are always using the latest version of the API. If you don’t do this none of the funky stuff will work!

Of course it doesn’t say any of that on the site.

So people who stumble on here with a headache – if you have your map working but can’t get your kml to display then make sure you’ve got the right version of the API linked!!!!

Right now you’ve got that sorted let’s embed that map.

My Your Map

The first, very basic Google Provided Simple Map – plus my fixes – looks like this. (Just view the source to get it’s code – but for Gawds sake please make sure you’ve got your API key and not mine…)

Example 1

Dead easy.

Useless.

But Dead Easy.

Long Lat

The first thing you’ll want to do is to change the maps start point. To do this you need to find out the Longitude and Latitude of the centre of your area and add it to the script.

Now before you head outside with your GPS unit, I find the easier way is to add the snippet of code to your map script…


GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
document.getElementById("message").innerHTML = center.toString();
});

PLUS (as usual the API documentation misses this bit out…) you also need to add:

<p id="message"></p>

under the map div. Now look at my map, and you’ll notice that when you double click it will generate the coordinates for the center of the map.

Example 2

Great!

Well sort of. That’s fine if you’re map is around the corner from Palo Alto, not so great if it’s in Botswana.

So we could also do with some controls on the map.

More Control

First you’ll want the zoom and pan controls. So add:

map.addControl(new GLargeMapControl());

also bung in the code for adding the buttons that select the style of map (Maps, Satellite, Hybrid):

map.addControl(new GMapTypeControl());

Example 3

Adding those makes traversing the world sooo much easier.

So now go and find the co-ordinates!

Starters

Got them? Good.

Now paste them into the bit of the code that looks like this:

map.setCenter(new GLatLng(37.4419, -122.1419), 13);

In my case my area is roughly 53.40912254769815, -2.9656219482421875, so the code is:

map.setCenter(new GLatLng(53.40912254769815, -2.9656219482421875), 12);

Which means that once the map is refreshed it will automatically start in the right place. You may have noticed that I’ve also changed the value at the end – from 13 to 11. This is the zoom level – with 1 being zoomed right out.

Example 4

So now we have this.

Getting Funky

All this is very sensible, but I think it’s about time we got to the cool stuff.

Remember that KML file you saved a while back? Well now is the time to upload it to your publicly accessible web space. It needs to be fully accessible by Google for it to work.

Have you done that? Good.

Now we need to add this bit of code:


var gx = new GGeoXml("http://www.yourspace.com/your.kml");
map.addOverlay(gx);

And Bobs your uncle – your My Maps data magically appears. How good is that! So simple it’s not funny. (It isn’t funny if you don’t make those changes to the HTML tag and API – then it’s a 5 hour head scratcher…)

Example 5

Now your KML is uploaded you should never need to upload it again. Any changes you make on your My Map will automatically be reflected on your embedded version too!

Default View

To refine things a bit you can set the default view by adding a bit at the end of the coordinates line:

map.setCenter(new GLatLng(53.19225, -2.8890), 15, G_SATELLITE_MAP);

Obviously G_SATELLITE_MAP defaults to the satellite view – G_HYBRID_MAP defaults to the hybrid view.

Example 6

If you want you can always delete the centre point code now too..

In Conclusion

And there you have it, a nice fully laid out map with only a modicum of effort involved. Certianly compared to how it used to be when the maps API first hit the web.

Hopefully this tutorial will give you enough info to get your feet wet – I hope you’ve found it useful. It should certainly be enough to get your creative juices flowing anyway.

Feel free to let me know what you get up to with it!