Skip to content

Commit

Permalink
No commit message
Browse files Browse the repository at this point in the history
  • Loading branch information
douglass_davis committed Feb 20, 2010
1 parent de6e74a commit b3e8f2a
Show file tree
Hide file tree
Showing 93 changed files with 2,951 additions and 0 deletions.
368 changes: 368 additions & 0 deletions 1.2/docs/examples.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,368 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>ExtInfoWindow Documentation: Examples</title>
<link rel="stylesheet" type="text/css" href="http://code.google.com/css/codesite.css"></link>
<link rel="stylesheet" type="text/css" href="../../util/docs/template/local_extensions.css"></link>
<script type="text/javascript" src="http://code.google.com/js/prettify.js"></script>
</head>
<body onload="prettyPrint()">
<h1><a></a>ExtInfoWindow Examples</h1>
<h2><a name="TOC"></a>Table of Contents</h2>
<ul>
<li><a href="#HowTo">Initial Setup</a></li>
<li><a href="#Simple">Simple Example</a></li>
<li><a href="#css">Using CSS Skins</a></li>
<li><a href="#basicAjax">Basic Ajax Content</a></li>
<li><a href="#basicEvents">Basic Event Listening</a></li>
<li><a href="#advancedEvents">Advanced: Using event listeners to create a tabbed info window</a></li>
</ul>
<div class="how_to">
<h2><a name="HowTo"></a>How-To</h2>
<p>
You can add the ExtInfoWindow to any Google map with a couple of lines of HTML code and some CSS.
</p>
<ol>
<li>
<p>Include extinfowindow.js in your document header.</p>
<pre class="prettyprint">&lt;script src=&quot;extinfowindow.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
</li>
<li>
<p>Include some css style declarations in your document header.</p>
<pre class="prettyprint">
&lt;style type=&quot;text/css&quot;&gt;
#simple_example_window{
width: 300px;
}
#simple_example_window_contents{
background-color: #FFF;
}
#custom_info_window_red_beak{
width: 28px;
height: 38px;
background: url('../examples/images/corners/red_beak.png') top left no-repeat transparent;
}
* html #simple_example_window_beak{
/* Alpha transparencies hack for IE */
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../examples/images/corners/red_beak.png', sizingMethod='crop');
}
#simple_example_window_tl, #simple_example_window_tr, #simple_example_window_bl, #simple_example_window_br,
#simple_example_window_t,#simple_example_window_l,#simple_example_window_r,#simple_example_window_b{
background-color: #F00;
height: 2px;
width: 2px;
}
&lt;/style&gt;
</pre>
</li>
<li>
<p>Add the ExtInfoWindow to a marker on your map, similar to how you add an HTMLInfoWindow. Example:</p>
<pre class="prettyprint">
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(44, -96), 4);
map.addControl(new GLargeMapControl());

marker = new GMarker( new GLatLng(43, -120));
GEvent.addListener(marker, 'click', function(){
marker.openExtInfoWindow(
map,
"simple_example_window",
"I'm some HTML content that will go in the initial example's ExtInfoWindow.",
{beakOffset: 3}
);
});
map.addOverlay(marker);
</pre>
</li>
</ol>
</div>

<div class="simple">
<h2><a name="Simple"></a>Simple Example</h2>
<p>
This is a bare bones example what you should need to use an ExtInfoWindow. The specific code relating to ExtInfoWindow are in bold.
</p>
<pre class="prettyprint">
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
&lt;html xmlns="http://www.w3.org/1999/xhtml">
&lt;head>
&lt;meta http-equiv="content-type" content="text/html; charset=utf-8"/>
&lt;title>ExtInfoWindow Example: Simple Example&lt;/title>

<strong>&lt;link type="text/css" rel="Stylesheet" media="screen" href="css/simpleExampleWindow.css"/></strong>

&lt;script type="text/javascript"
src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQGj0PqsCtxKvarsoS-iqLdqZSKfxRdmoPmGl7Y9335WLC36wIGYa6o5Q">
&lt;/script>
<strong>&lt;script src="../src/extinfowindow.js" type="text/javascript">&lt;/script></strong>
&lt;script type="text/javascript">
var map;
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(44, -96), 4);
map.addControl(new GLargeMapControl());

marker = new GMarker( new GLatLng(43, -120) );
GEvent.addListener(marker, 'click', function(){
<strong>marker.openExtInfoWindow(
map,
"simple_example_window",
"I'm some HTML content that will go in the simple example's ExtInfoWindow.",
{beakOffset: 3}
); </strong>
});
map.addOverlay(marker);
}
}
&lt;/script>
&lt;/head>
&lt;body onload="load()" onunload="GUnload()">
&lt;div id="map" style="width: 900px; height: 600px" >&lt;/div>
&lt;/body>
&lt;/html>
</pre>

<p>
<a href="../examples/simpleExample.html">View example (simpleExample.html).</a>
</p>
<br />
<p>
Here is code from another example that uses a link to open an ExtInfoWindow with no markers.
</p>
<pre class="prettyprint">
&lt;a href="javascript:map.openExtInfoWindow(new GLatLng(38,-96), 'simple_example_window', 'Hello There!');">Click to Say Hello! &lt;/a>
</pre>
<p>
<a href="../examples/simpleExample2.html">View example (simpleExample2.html).</a>
</p>
</div>

<div class="css">
<h2><a name="css"></a>Using CSS Skins</h2>
<h3>Suffix Mapping</h3>
<p>
Each ExtInfoWindow is created from 10 pieces based on the supplied cssId and prefixes set in the code. The following table describes each suffix, what they mean, and what minimally is expected in CSS.
</p>
<table>
<tr>
<th>suffix</th><th>meaning</th><th>minimum CSS</th>
</tr.>
<tr>
<td>_tl</td><td>top left</td><td>width, height</td>
</tr>
<tr>
<td>_t</td><td>top</td><td>height</td>
</tr>
<tr>
<td>_tr</td><td>top right</td><td>width, height</td>
</tr>
<tr>
<td>_l</td><td>left</td><td>width</td>
</tr>
<tr>
<td>_contents</td><td>center contents area</td><td>background-color</td>
</tr>
<tr>
<td>_r</td><td>right</td><td>width</td>
</tr>
<tr>
<td>_bl</td><td>bottom left</td><td>width, height</td>
</tr>
<tr>
<td>_b</td><td>bottom</td><td>height</td>
</tr>
<tr>
<td>_br</td><td>bottom right</td><td>width, height</td>
</tr>
<tr>
<td>_beak</td><td>bottom beak/pointer area</td><td>width, height</td>
</tr>
<tr>
<td>_close</td><td>close box section</td><td>width, height</td>
</tr>
</table><br />
<h3>Suffix Diagram</h3>
<p>
The following diagram explains how using the cssId "demoWindow" would map to each part of the ExtInfoWindow<br />
<img src="../examples/images/css_diagram.png" alt="css diagram" border="0" />
</p>
<h3>Suffix Slicing in a PNG</h3>
<p>
Additionally, the following is a link to a layered PNG file to see an example of how to use slices to set up the above pieces. Save it to your computer and open in <a href="http://www.adobe.com/products/fireworks/" target="_blank">Fireworks</a> to properly see how the above naming maps to your info window image.
</p>
<p>
<a href="../examples/images/demoWindow.png">demoWindow.png</a>
</p>
<h3>Suffix Slicing in a PSD</h3>
<p>
Prefer Photoshop over Fireworks? Well the following is a link to a sliced PSD file to see how to set up the above pieces. Save it to your computer and open in <a href="http://www.adobe.com/products/photoshop/index.html" target="_blank">Photoshop</a> to properly see how the above naming maps to your info window image.
</p>
<p>
<a href="../examples/images/demoWindow.psd">demoWindow.psd</a>
</p>
<h3>Demo CSS Skins</h3>
<p>
The following example demonstrates how to use the above information and the cssId parameter, in the GMarker.openExtInfoWindow function, to open ExtInfoWindows with different skins on different markers, all on the same map. The styles are defined in separate stylesheets that are included in the document head.
</p>
<p>
<a href="../examples/cssSkins.html">View the example (cssSkins.html).</a>
</p>
</div>

<div class="basic_ajax">
<h2><a name="basicAjax"></a>Basic Ajax Content</h2>
<p>
This demo illustrates how to use ajax to inject content into your ExtInfoWindow.
</p>
<p>
To utilize this feature you have to set the option <code>ajaxUrl</code> as part of the opt_opts
when calling <code>GMarker.openExtInfoWindow</code>. In this example we ajaxUrl to be the
relative path: "ajax/ajaxTest.html".
</p>
<p>
When the user clicks the marker, the ExtInfoWindow will display
with the original HTML (in this case a string saying "Loading...") and kick
off an Ajax request to the supplied url. The response content is returned
as HTML and inserted into the contents section of the window.
</p>
<p>
The HTML contents returned will be:
</p>
<pre class="prettyprint">
&lt;p>
Content pulled from an Ajax request!
&lt;/p>
&lt;p>
This is from an HTML file, but imagine if you passed a url to a server
side page that renders HTML, like .php or .rhtml! You can process dynamic
data on the fly without preloading on page load.
&lt;/p>
&lt;p>
Want to see a demo of the above statement? Go to
&lt;a href="http://updates.orbitz.com" target="_blank">Orbitz Traveler Update&lt;/a>
and click any of the airports on the homepage map.
&lt;/p>
</pre>
<p>
<a href="../examples/ajaxContent.html">View the example (ajaxContent.html).</a>
</p>
</div>

<div class="basic_events">
<h2><a name="basicEvents"></a>Basic Event Listening</h2>
<p>
This demo will illustrate how you can listen for new ExtInfoWindow events that fire on <code>GMap2</code>.
The new events we will listen for, and write to <code>GLog</code>, are:
<table>
<tr><th>Event</th><th>Description</th></tr>
<tr><td>extinfowindowopen</td><td>occurs when opening an ExtInfoWindow</li></tr>
<tr><td>extinfowindowbeforeclose</td><td>occurs right before closing an ExtInfoWindow</li></tr>
<tr><td>extinfowindowclose</td><td>occurs upon closing an ExtInfoWindow</li></tr>
<tr><td>extinfowindowupdate</td><td>occurs after completion of using ExtInfoWindow's ajax to update it's contents.</td></tr>
</table>
<pre class="prettyprint">
GEvent.addListener(map2, 'extinfowindowupdate', function(){GLog.write("extinfowindowupdate found");});
GEvent.addListener(map2, 'extinfowindowopen', function(){GLog.write("extinfowindowopen found");});
GEvent.addListener(map2, 'extinfowindowbeforeclose', function(){GLog.write("extinfowindowbeforeclose found");});
GEvent.addListener(map2, 'extinfowindowclose', function(){ GLog.write("extinfowindowclose found"); });
</pre>
</p>
<p>
<a href="../examples/events.html">View the example (events.html).</a>
</p>
</div>

<div class="advanced_events">
<h2><a name="advancedEvents"></a>Advanced: Using event listeners to create a tabbed info window</h2>
<p>
This demo will illustrate how you can manipulate Ajax returned content using the "extinfowindowupdate" event.
</p>
<p>
In this case, we will listen for "extinfowindowupdate" on <code>GMap2</code>. When you click on the maker on the map, the ExtInfoWindow is opened and kicks off an Ajax request to the local url "ajax/ajaxTabs.html". Upon completion of injecting that file's HTML contents into the info window, the map fires the "extinfowindowupdate" event. Our listener in this demo picks up that the event has occurred and begins to manipulate the returned HTML. By locating certain DOM ids and class names, we can then simulate a tabbed interface for the info window.
</p>
<p>
The exact HTML returned from our Ajax request will be:
<pre class="prettyprint">
&lt;div id="" class="tabs">
&lt;div class="tabs_header">
&lt;div id="tab0" class="tab">&lt;p class="contents">Tab 1&lt;/p>&lt;/div>
&lt;div id="tab1" class="tab">&lt;p class="contents">Tab 2&lt;/p>&lt;/div>
&lt;/div>
&lt;div class="tab_contents">
&lt;div id="tab0_content">
&lt;div class="title">Tab 1: intro&lt;/div>
&lt;p>
This is the contents of Tab 1. We created this by listening
for the "extinfowindowupdate" event on the GMap2 object and
manipulating the returned HTML. In this case, we manipulated
the returned HTML to creat the effects of tabs.
&lt;/p>
&lt;p>
Notice if you click Tab 2 above you will get some other
contents to appear in this area.
&lt;/p>
&lt;/div>
&lt;div id="tab1_content">
&lt;div class="title">Tab 2: tabs continued &lt;/div>
&lt;p>
Well look at you, clicking tabs to get different content!
&lt;/p>
&lt;p>
Take note that all this content was originally pulled from an ajax
request so it won't bog down load time.
&lt;/p>
&lt;p>
Also note that when we set up the tabs we called ExtInfoWindow.resize().
This helps in case each tab has a different height of it's contents.
&lt;/p>
&lt;p>
Where to go from here? How about adding effects. You could listen
for the extinfowindowupdate and set up your tabs to do transitional
effects using something like &lt;a target="_blank" href="http://script.aculo.us/">
Scriptaculous&lt;/a> or &lt;a target="_blank" href="http://moofx.mad4milk.net/">Moo.fx&lt;/a>.
It's all in your control now.
&lt;/p>
&lt;/div>
&lt;/div>
&lt;/div>
</pre>
</p>
<p><br />
The javascript function fired when "extinfowindowupdate" is found is:
<pre class="prettyprint">
var windowContent = document.getElementById("custom_info_window_red_contents");
var tabs = new Array(document.getElementById("tab0"),
document.getElementById("tab1"));
if( tabs.length > 0 ){
var tabContentsArray = new Array(tabs.length);
for( i=0; i &lt; tabs.length; i++){
tabContentsArray[i] = document.getElementById("tab"+i+"_content");
if( i > 0){
hide(tabContentsArray[i]);
}
tabs[i].setAttribute("name", i.toString());
GEvent.addDomListener(tabs[i],"click",function(e){
eventElement = e.currentTarget;
var tabIndex = eventElement.getAttribute("name");
for(tabContentIndex=0; tabContentIndex &lt; tabs.length; tabContentIndex++){
if( tabContentIndex == tabIndex ){
show(tabContentsArray[tabContentIndex]);
}else{
hide(tabContentsArray[tabContentIndex]);
}
}
map2.getExtInfoWindow().resize();
});
}
}
</pre>
</p>
<p>
<a href="../examples/eventExtInfoWindowUpdate.html">View the advanced example (eventExtInfoWindowUpdate.html).</a>
</p>
</div>
</body>
</html>
Loading

0 comments on commit b3e8f2a

Please sign in to comment.