Adding text to a Google Map information window
The Google Map system used on EISite2 uses JavaScript to display it's maps, controls and labels. Whilst adding text, such as your address, to an information window on a Google map is easy, there are a few things that you need to bear in mind.
The following is a very simple, unformatted example of some text that will display in the information window ...
My school name, Our Road, This Town, Kent
Of course an address will almost certainly need to be split into several lines ...
My school name,
Our Road,
This Town,
Kent
But this will not work because I have used carriage returns to split the lines. It will cause the map to fail to display!
To force lines to split you must use some HTML code. Here is an example ...
My school name,<br />Our Road,<br />This Town,<br />Kent
Notice that I have typed this in one single line. This is important!. The '<br />' code will cause the lines to break.
You can use as much HTML code as you like within the information window.
Here is an example of more complex HTML that displays coloured text in a defined size with a link (I have typed this as one line and the page has split it to fit) ...
<div style="color:red;font-size:12px;"><p>My school name,<br />Our Road,<br />This Town,
<br />Kent</p><p><a href="default.cfm?pid=emailcontact">
Click here to contact us.</a></p></div>
... that will not work ! It will not work because I have used double quotes instead of single ones.
This will work ...
<div style='color:red;font-size:12px;'><p>My school name,<br />Our Road,<br />This Town,
<br />Kent</p><p><a href='default.cfm?pid=emailcontact'>
Click here to contact us.</a></p></div>
Remember
- You must type your HTML code in a single line.
- Do not use carriage returns or line breaks when adding text for the information window.
- Always use single quotes in your HTML .