More advanced stuff

Google Maps API Tutorial

Storing User Input

A common requirement is to allow users to input data onto your map which will then become available to other users.

You can’t write files directly from Javascript, so you have to send the data back to a server script and arrange for the server to store the data in a database on your server.

Javascript can send the data to the server using GDownloadUrl.

If there are always going to be less than 512 bytes to send, then you can use the normal format of GDownloadUrl, which sends a GET request to the server:

  GDownloadUrl(
   "myserver.php?lat=1.12&lng=-23.45&details=This is my house",
   function(doc){}
  );

If there may be more that 512 bytes of data, then you’ll need to use the undocumented POST form of GDownloadUrl

  GDownloadUrl(
   "myserver.php",
   function(doc){},
   "lat=1.12&lng=-23.45&details=This is my house"
  );

Here’s a simple example

Some considerations

Javascript code launched from HTML (e.g. from the SUBMIT button of a form) executes in global context, so it can only access local variables. In the example, I store a global reference to the last input marker that had its info window opened, “lastmarker”. Since the API only supports one info window being open at once, this will be the marker associated with the SUBMIT button click.

I’ve made the input markers draggable so that the user can adjust the position.

I’ve used a different icon for the input markers and the normal markers. I reckon it gets confusing otherwise.

I’ve set the {draggableCursor} to “default”. This makes it easier for the user to position the click accurately.

Don’t allow untrusted users to enter HTML content into your info windows.
In this example, I’ve used the text node version of marker.openInfoWindow() rather than marker.openInfoWindowHtml(), so thay if anyone attempts to do something nasty, like embed a malware file, all that happens is that http://malware.file gets displayed in the text.
You might want to do something more sophisticated, like removing anything between < and >.

Googlepages doesn’t support server scripts, so my example doesn’t actually send the data to a server. In your real page you’d remove the “//” from the beginning of the GDownloadUrl() command.

This is just a simple example. In a real page you might want to allow users to edit or delete markers that they had previously created. You might even want to allow them to perform a limited amount of markup in the text. That’s not going to be particularly easy.

Advertisements

The Basics

Google Maps API Tutorial

Tabbed Info Windows

The API makes it easy to use tabbed info windows.

Here’s a simple example

Here’s a more complicated example  in which each info window has a different number of tabs.

The map.openInfoWindowTabs(), map.openInfoWindowTabsHtml(), marker.openInfoWindowTabs() and marker.openInfoWindowTabsHtml() methods allow tabbed info windows to be created. All the tab switching is done for you by the API.

To use openInfoWindowTabsHtml() to create a tabbed window, you need to pass it an array of GInfoWindowTab() objects. One such object for each tab.

The GInfoWindowTab() constructor is: new GInfoWindowTab(label, contents, onClick)
The label is a string that will be displayed on the tab. It holds 10 characters.
The content is a HTML DOM element (openInfoWindowTabs) or a string containing HTML (openInfoWindowTabsHtml).
I don’t yet know what the onClick does. It looks like it’s supposed to be a function that gets called when the tab is clicked, but I can’t get it to work.

You can have as many tabs as you like, but if you have more than two the graphics fall apart if the info window isn’t wide enough. Make the info window wider by using a style “width:XXXpx” in the GInfoWindow() contents. The width needs to be at least 88 pixels per tab.

Potential Pitfalls

  1. The size of the info window is calculated beforehand to be large enough to hold the largest of the contents. If you’ve got one panel that needs a very large info window then another panel that has very little content will look rather strange.

The Basics

Google Maps API Tutorial

Links and Images, etc.

You can include links and images in your info windows, and use most HTML formatting commands, as long as you follow a few simple rules:

  1. Use different types of quotes in the HTML from those that you use in Javascript
    Like this ‘<a href=”http://www.econym.demon.co.uk”>&#8217;
    or like this “<a href=’http://www.econym.demon.co.uk’>&#8221;
  2. When using images, do specify the height and width, otherwise the size of the info window will be calculated incorrectly.
    ‘<img src=”image.jpg” width=150 height=100>’
  3. If loading the information from XML, replace ‘<‘ and ‘>’ characters with ‘&lt;’ and ‘&gt;’.
    ‘&lt;img src=”image.jpg” width=150 height=100&gt;’
  4. If you want to try writing code that passes W3C Validation, then you need to avoid having the characters “</” in your text. The officially correct way to write “</a>” is to insert a backslash before the forward slash, like “<\/a>”.

Here’s an example that doesn’t use XML.

And here’s an example that does. Here’s the XML file
Use the “view source” option in your browser to see the XML source. In the main browser display, all the ‘&lt;’ and ‘&gt;’ get displayed as ‘<‘ and ‘>’.