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

Last change on this file since 25834 was 25834, checked in by rvelices, 10 years ago

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