source: extensions/rv_gmaps/trunk/template/map.tpl @ 12719

Last change on this file since 12719 was 12719, checked in by rvelices, 12 years ago

rv_gmaps can show now different markers based on number of photos at the location
  • Property svn:eol-style set to LF
File size: 7.7 KB
Line 
1<!DOCTYPE html>
2<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
3<head>
4<meta http-equiv="content-type" content="text/html; charset={$CONTENT_ENCODING}" />
5<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
6<meta name="robots" content="noindex,nofollow" />
7<title>{$GALLERY_TITLE}</title>
8
9<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;language={$lang_info.code}&amp;libraries=places" type="text/javascript"></script>
10
11{combine_script id='jquery' load='header' path='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'}
12{combine_script id='jquery.nyroModal' load='async' path="`$PLUGIN_LOCATION`/template/nyroModal/jquery.nyroModal-1.6.2.js" version='1.6.2'}
13{combine_css path="`$PLUGIN_LOCATION`/template/style.css" version=$RVM_PLUGIN_VERSION}
14{combine_css path="`$PLUGIN_LOCATION`/template/nyroModal/nyroModal.css" version=$RVM_PLUGIN_VERSION}
15
16{combine_script id='rvm.dl' load='header' path="`$PLUGIN_LOCATION`/template/data_loader.js" version=$RVM_PLUGIN_VERSION}
17{combine_script id='rvm.dh' load='header' path="`$PLUGIN_LOCATION`/template/data_handler.js" version=$RVM_PLUGIN_VERSION}
18{combine_script id='rvm.pl' load='header' path="`$PLUGIN_LOCATION`/template/page_linker.js" version=$RVM_PLUGIN_VERSION}
19{combine_script id='rvm.st' load='header' path="`$PLUGIN_LOCATION`/template/styler.js" version=$RVM_PLUGIN_VERSION}
20{combine_script id='core.scripts' load='header' path='themes/default/js/scripts.js'}
21
22{get_combined_css}
23{get_combined_scripts load='header'}
24
25<!--[if IE]>
26<style type="text/css">
27v\:* {ldelim}
28  behavior:url(#default#VML);
29}
30</style>
31<![endif]-->
32<!--[if lt IE 7]>
33<style type="text/css">
34        #map {ldelim} position:auto; height: 100%; }
35</style>
36<![endif]-->
37
38
39
40<script type="text/javascript">{literal}
41//<![CDATA[
42var map;
43
44document.is_debug = false;
45if ( document.location.search.match(/[\?&]debug/) ) {
46        document.is_debug = true;
47}
48
49function glog(msg) {
50        if (console)
51        {
52                var b = map.getBounds();
53                if (b)
54                        console.log(msg + " b="+b.toUrlValue() + " c="+map.getCenter().toUrlValue() + " z="+map.getZoom() );
55                else
56                        console.log(msg);
57        }
58}
59
60function load()
61{
62        var mapOptions = {
63                mapTypeId: google.maps.MapTypeId.ROADMAP,
64                overviewMapControl: true,
65                overviewMapControlOptions: {opened: true}
66        }
67
68        if (!PageLinker.url2Map(mapOptions))
69        {
70{/literal}
71                {if isset($initial_bounds)}
72                mapOptions.iniBounds = new google.maps.LatLngBounds( new google.maps.LatLng({$initial_bounds.s},{$initial_bounds.w}), new google.maps.LatLng({$initial_bounds.n},{$initial_bounds.e}) );
73                mapOptions.center = mapOptions.iniBounds.getCenter();
74                {else}
75                        mapOptions.center = new google.maps.LatLng(0,0);
76                        mapOptions.zoom = 2;
77                {/if}
78{literal}
79        }
80
81        map = new google.maps.Map( document.getElementById("map"), mapOptions );
82       
83        if (mapOptions.iniBounds)
84                map.fitBounds(mapOptions.iniBounds);
85
86        if (document.is_debug)
87        {
88                google.maps.event.addListener(map, "idle", function() { glog("idle"); });
89                google.maps.event.addListener(map, "bounds_changed", function() { glog("bounds_changed");} );
90                google.maps.event.addListener(map, "center_changed", function() { glog("center_changed");} );
91                google.maps.event.addListener(map, "maptypeid_changed", function() { glog("maptypeid_changed");} );
92                google.maps.event.addListener(map, "zoom_changed", function() { glog("zoom_changed");} );
93                google.maps.event.addListener(map, "drag", function() { glog("drag");} );
94        }
95
96        pwgPageLinker = new PageLinker(map, "aLinkToThisPage" );
97
98        /*var pwgMarkerOptions = (function(){ {/literal}{$MAP_MARKER_ICON_JS}{literal} }).call(null);*/
99        var pwgStyler = {/literal}{$MAP_MARKER_ICON_JS}{literal};
100
101        map.pwgDataLoader = new PwgDataLoader(map, {rectangle_of_confusion: pwgStyler.roc} );
102        google.maps.event.addListener(map.pwgDataLoader, "dataloading", function() {
103                var pre = '<img src="{/literal}{$PLUGIN_ROOT_URL}{literal}/icons/progress_s.gif" width="16" height="16" alt="~" /> ';
104                document.getElementById("dataLoadStatus").innerHTML = pre + Localization.get("Loading");
105                }
106        );
107 
108        google.maps.event.addListener(map.pwgDataLoader, "dataloadfailed", function(responseCode) {
109                document.getElementById("dataLoadStatus").innerHTML = Localization.get("Failed") + " "+responseCode;
110                }
111                );
112
113        map.pwgDataHandler = new PwgDataHandler(map, {styler: pwgStyler, show_all_img_src: "{/literal}{$PLUGIN_ROOT_URL}{literal}/icons/pic_s.gif" } );
114        google.maps.event.addListener(map.pwgDataLoader, "dataloaded", pwgBind(map.pwgDataHandler, map.pwgDataHandler.handle) );
115
116        map.pwgDataLoader.start( "{/literal}{$U_MAP_DATA}{literal}" );
117       
118        var ac = new google.maps.places.Autocomplete( document.getElementById('q') );
119        ac.bindTo('bounds', map);
120        google.maps.event.addListener(ac, 'place_changed', function() {
121                var place = ac.getPlace();
122                if (place.geometry.viewport) {
123                        map.fitBounds(place.geometry.viewport);
124                } else {
125                        map.setCenter(place.geometry.location);
126                        map.setZoom(17);  // Why 17? Because it looks good.
127                }
128        } );
129}
130
131function unload()
132{
133        if (map)
134        {
135                !map.pwgDataLoader || map.pwgDataLoader.terminate();
136                !map.pwgDataHandler || map.pwgDataHandler.terminate();
137        }
138}
139
140
141var Localization =
142{
143  _strings: {
144{/literal}
145"go to %s": "{'go to %s'|@translate|@escape:javascript}",
146"Next": "{'Next'|@translate|@escape:javascript}",
147"Prev": "{'Prev'|@translate|@escape:javascript}",
148"out of %d": "{'out of %d'|@translate|@escape:javascript}",
149"Loading": "{'Loading'|@translate|@escape:javascript}",
150"Failed": "{'Failed'|@translate|@escape:javascript}",
151"Show all": "{'Show all'|@translate|@escape:javascript}",
152"show all photos around this location": "{'show all photos around this location'|@translate|@escape:javascript}",
153"displays %s on a map" : "{'displays %s on a map'|@translate|@escape:javascript}",
154"opens %s in Google Earth" : "{'opens %s in Google Earth'|@translate|@escape:javascript}",
155"%d photos" : "{'%d photos'|@translate|@escape:javascript}",
156{literal}
157dontMindTheComma: ""
158    },
159
160  get: function( str ) {
161                var lang_str = this._strings[str];
162                if (lang_str == undefined)
163                {
164                        if (document.is_debug) glog("Language string undefined '"+ str+"'");
165                        return str;
166                }
167                return lang_str;
168        },
169
170  getQ: function( str ) {
171                return '"'+this.get(str)+'"';
172        },
173
174  fmt1: function () {
175                var str = arguments[0];
176                str = this.get(str);
177                str = str.replace( '%s', "%" ).replace( '%d', "%" ).replace('%', arguments[1]);
178                return str;
179               
180        }
181}
182{/literal}
183//]]>
184</script>
185</head>
186
187<body onload="load()" onunload="unload()">
188
189<div id="titlebar">
190  <div class="titlebar_links" >
191    <span id="dataLoadStatus"></span>
192    <a id="aKml" href="" type="application/vnd.google-earth.kml+xml" class="gmnoprint"><img src="http://maps.google.com/mapfiles/ms/view_as_kml.png" width="16" height="16" alt="kml" /> <span>KML</span></a>
193    <a id="aLinkToThisPage" href="" class="gmnoprint"><img src="http://maps.google.com/mapfiles/bar_icon_link.gif" alt="&lt;-&gt;" width="16" height="16" /> <span>{'Link to this page'|@translate}</span></a>
194    <a id="aBlowup" href="" onclick="return PwgDataHandler.blowupUrl(this.href);" class="gmnoprint" title="{'show all photos around this location'|@translate}">
195                        <img src="{$PLUGIN_ROOT_URL}/icons/pic_s.gif" alt="" title="{'show all photos around this location'|@translate}" />
196                        <span>{'Show all'|@translate}</span>
197                </a>
198    <span class="gmnoprint">
199                        <input type="text" size="48" id="q" />
200                </span>
201  </div>
202  <div class="titlebar_title">
203    <a href="{$U_HOME}" class="gmnoprint">{'Home'|@translate}</a>
204    <a href="{$U_HOME_MAP}" title="{'displays all photos on a map'|@translate}"><img src="{$PLUGIN_ROOT_URL}/icons/map_sw.gif" width="32" height="17" alt="map"/></a>
205    {'Viewing'|@translate}: <a id="aPageUrl" href=""></a>
206  </div>
207</div>
208
209<div id="map"> </div>
210</body>
211{get_combined_scripts load='footer'}
212</html>
Note: See TracBrowser for help on using the repository browser.