Markers and info windows
Here's a simple example
Link to the example and view the source.
Not all browsers support the Google API, and not all users run their browsers with Javascript enabled.
So use a <noscript> element to detect the situation where there is no Javascript, and use
GBrowserIsCompatible() to detect a non-compatible browser.
The createMarker() function not only sets up the marker and its event handler,
but it also causes local copies of the "marker" and "html" variables to be preserved for later use when the event gets triggered.
This is a special feature of the Javascript language called "function closure".
You can use almost any valid html in the info window, as long as the browser can work out the required height and width before rendering it.
If you want to use html that uses quotes, you can use single-quotes in the Javascript string and double-quotes in the contained html.
E.g. createMarker(point,'<image src="myimage.jpg" width=150 height=100>');
Potential Pitfalls
- The info window contents inherit the formatting from the parent document.
E.g. if your map <div> is positioned with <center>, then the info window contents will be centred.
- The code that works out the size of the info window is executed before this style inheritance takes place.
If your info window contents then inherit styles that change their size, for example font-size,
then the info window size may not fit the contents very well.
- Don't attempt to "unroll" the createMarker() function. This doesn't work.
var point = new GPoint(-79.90138, 43.65654);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("Some stuff");
});
map.addOverlay(marker);
var point = new GPoint(-78.89231, 43.91892);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("Some other stuff");
});
map.addOverlay(marker);
What goes wrong is that there's only one copy of the "marker" variable.
When the "click" event gets triggered at a later time, it gets the value that's in the variable at the time of the call,
but you want the value at the time the event handler was set up.
- Don't put your Javascript inside a <table> or <div>, it will work in Firefox, but not in IE.
Safe places to put your Javascript are either just before the </body>, or in the header in an onLoad() function.
- If you do use an onLoad() function, be careful not to call it "onload()" in all lower case, because that's a reserved word in Firefox.
- If you put an image into an info window, you must specify the height and width, so that the browser can calculate the
size of the info window before starting to render the image.
- If you use tables or divs inside an info window, do specify the width and height.
Don't use "width=100%", or the browser won't be able to calculate the size of the window before rendering the table.
- Make sure that the id of your map div is unique.
Things get rather messy if you've got an image_map on your page which uses id="map", or an anchor that uses name="map".
- Do test your page in both IE and a browser that supports standards-compliant Javascript, such as Firefox.
If you follow this tutorial, then your code should work on both, but it's easy to miss something and end up with a map
that only works in one environment.
If you want to be confident that your code works in all browsers, you don't really need to test hundreds of different browsers
because most compliant browsers are built around a small number of layout engines. Just test MSIE6, MSIE7, plus
one browser that uses each of the compatible layout engines:
| Engine | Browsers |
| Gecko | Firefox, Camino, Mozilla, Netscape, etc. |
| Presto | Opera, Nintendo, plus forthcoming Adobe browsers |
| WebKit | Safari, Google Chrome, Arora, Midori, Omniweb, etc. |
Back to Mike's Homepage
Up to the start of this tutorial
|
|