Embedding Google Maps into Xara created web pages

[leemcg]

Hi

I have spent a bit of time working out how to get a Google Map embedded into my Xara created web page. I've worked it out and thought I'd share it in case that is interesting to anybody else.

Here is an example:

http://www.pearlcottage.co.uk/index_2.htm

(This is a work in progress site, still waiting for the building to be finished so that I can get some good photos).

This involves editing the HTML that Xara creates, which is a bit fiddly. The biggest issue however is that you will have to make the changes manually each time you choose to "Export HTML" from Xara.

Set up your Xara file

Set up a rectangle in the place where you want the embedded map to appear. Make sure it is the right size and in the right location. Make it a unusual colour so that the rectangle can be easily noticed. We need this rectangle to be a single bitmap when created, so if you put text on it or something, make sure you group the text and the rectangle.

This rectangle will be removed and replaced with the embedded map.

Create your html files, by using the Export menu item as usual.

Creating the Map

Go to maps.google.com or your equivalent local version (like maps.google.co.uk).

You can now either scroll and zoom to the right place on the map (tip: change your browser window size so that the map is about the size you want it to be on your web page), or use the mymaps functionality to add your own routes, location markers, etc. etc. I'm sure there are many tutorials on using GoogleMaps and MyMaps, so I won't go into detail here.

However you create your map, you will need to choose the "Link to this page" link just above the map to the right. A little box opens and you should choose "Cutomise and preview embedded map". In the new window, you should choose custom size and type in the exact width and height of the map you want (the same as the size of the bitmap in stage 1).

Double check the preview to see if it's what you want.

Copy the HTML code at the bottom and paste it into Notepad, or your favourite text editor.

Google HTML code

The code that Google creates has two components to it, separated by a <br> tag. The first half is the real map bit, and the second half does the "View Larger Map" bit. There is no need to include the latter part. If you really want to, then you can just add it as a normal web link and put the text "View Larger Map" in Xara.

The problem with the embedded map HTML is that is comes as an inline frame, which means its difficult to control the location.

We will now edit the HTML created by Xara to do two things: 1. include the embedded map and 2. change the location of the embedded map so that it's in the right place.

Editing the HTML

Find out the name of the bitmap, which is in place of the map. I do this by going to the sub folder where the bitmaps are stored, switch to thumbnails so that I can see it. This is why I suggested a distinct colour. The bitmap will have a name like "63.png".

Open the HTML for your relevant page in Notepad, either by dragging the file to Notepad, or selecting "View, Source" from Internet explorer.

In Notepad, search for the filename of the bitmap, say 63.png. That will move the cursor to the relevant part of the HTML.

The problem with the HTML created by Xara is that is very compressed, and difficult to read.

Here is the relevant part of the source from my website:

<img src="index.htm_files/63.png" border="0" alt="" style="left: 493px; top: 131px; width: 281px; height: 442px; position: absolute;"/><div id="xo6"></div><script type="text/javascript">var xo6=document.getElementById("xo6")</script><div id="xd6"></div><script type="text/javascript">

Everything in HTML comes between <> symbols, so you must make sure any changes you make happen between a > (closing) and < (opening the next tag).

In the HTML above, only the first bit is therefore the relevant part that puts the bitmap in place. It ends at the first > symbol, after 'absolute;"/'
In the end, we will delete this in its entirety replacing it with the google HTML, but we need to keep a bit of it.


The HTML created by google looks like this:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/?ie=UTF8&amp;z=5&amp;ll=53.800651,-4.064941&amp;output=embed&amp;s=AARTsJqzARj-Z8VnW5pkPMLMmZbqrJcYpw"></iframe><br /><small><a href="http://maps.google.co.uk/?ie=UTF8&amp;z=5&amp;ll=53.800651,-4.064941&amp;source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>

The bit between the <iframe> and </iframe> (inclusive) is the bit we need to copy - the rest can be thrown away.

Paste it into the mail HTML source, just before the <img .

We now have to sort out the size and position using some of the original xara HTML.

Copy the style attribute from the img tag that refers to the original bitmap, 63.png. In our case that is this HTML:

style="left: 493px; top: 131px; width: 281px; height: 442px; position: absolute;"

(Note that this includes the double quotation mark at the end).

Copy this HTML and put it inside the <iframe> tag that you pasted in from Google. I also delete the width= and height= parts, but I'm not sure if you have to. The HTML will look like this:

<iframe style="left: 493px; top: 131px; width: 281px; height: 442px; position: absolute;"frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/?ie=UTF8&amp;z=5&amp;ll=53.800651,-4.064941&amp;output=embed&amp;s=AARTsJqzARj-Z8VnW5pkPMLMmZbqrJcYpw"></iframe>

Save this HTML on top of the original file.

That should be it.

Note that new lines are generally ignored in HTML, so if it makes it clearer, you can put some in between the > and < symbols (that way round).


Here is an example:

http://www.pearlcottage.co.uk/index_2.htm

I hope that is useful to someone. Comments appreciated. I think I may have done into too much detail in places.

Lee

[zaphodeist]

That will be useful Lee, thank you Having to re-insert ther code is a pain though - I have a menu, made in webstyle, on my site but I've put it on an external page rather than re-insert code everytime I exported main pages. At least I know that procedure properly now Perhaps there is a way round and someone will tell us

[Egg Bramhill]

Thanks for a very clear and concise mini tutorial Lee. I've not looked into place-holders yet but I'll bear your tut in mind when I do.

[covoxer]

Hi Lee,
Nice tutorial!
May I suggest a little simplification?

Find out the name of the bitmap, which is in place of the map. I do this by going to the sub folder where the bitmaps are stored, switch to thumbnails so that I can see it. This is why I suggested a distinct colour. The bitmap will have a name like "63.png".

Open the HTML for your relevant page in Notepad, either by dragging the file to Notepad, or selecting "View, Source" from Internet explorer.

In Notepad, search for the filename of the bitmap, say 63.png. That will move the cursor to the relevant part of the HTML.

You can avoid most of this simply adding an unique alt, or title attribute to the placeholder object (the rectangle).
For example, add a name: alt=GoogleMap1 to this object in Xtreme. Then you simply have to find GoogleMap1 text in the resulting html file to find out it's location and the file name to delete.

[Albacore]

You must be a mind reader Lee because I was just about to start this job today. You have saved me a lot of donkey work and time and also the concise way you have written your description suits slow on the up take people like myself. A Big Thank You.
Cheers
Peter

[leemcg]

Glad to add something back to the community. I've been very much a taker for many years.

Regards
Lee

[gwpriester]

Lee - Terrific information.

And John - Great tip re: the Alt tag.

Gary

[a4hire]

This case is true for any kind of code that you want to enter in your web pages made with Xara.
This is not a html editor. You can export photos, graphics made within xtreme. So any kind of forms, scripts, animation etc, will require you to manually edit the html file with notepad or some other editor.

This is a good little tutorial for those who are not familiar with editing html files.

[Egg Bramhill]

This is a good little tutorial for those who are not familiar with editing html files.

Bruce, is there a link?

[aridzone]

Very useful info

Thanks for creating and sharing the mini tut!