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

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

rv_gmaps use places autocomplete + added new markers + better algo for displaying markers

  • Property svn:eol-style set to LF
File size: 7.9 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='core.scripts' load='header' path='themes/default/js/scripts.js'}
20
21{get_combined_css}
22{get_combined_scripts load='header'}
23
24<!--[if IE]>
25<style type="text/css">
26v\:* {ldelim}
27  behavior:url(#default#VML);
28}
29</style>
30<![endif]-->
31<!--[if lt IE 7]>
32<style type="text/css">
33        #map {ldelim} position:auto; height: 100%; }
34</style>
35<![endif]-->
36
37
38
39<script type="text/javascript">{literal}
40//<![CDATA[
41var map;
42var geocoder;
43
44document.is_debug = false;
45if ( document.location.search.match(/[\?&]debug/) ) {
46        document.is_debug = true;
47        document._window = window;
48}
49
50function glog(msg) {
51        if (console)
52        {
53                var b = map.getBounds();
54                if (b)
55                        console.log(msg + " b="+b.toUrlValue() + " c="+map.getCenter().toUrlValue() + " z="+map.getZoom() );
56                else
57                        console.log(msg);
58        }
59}
60
61function load()
62{
63        var mapOptions = {
64                mapTypeId: google.maps.MapTypeId.ROADMAP,
65                overviewMapControl: true,
66                overviewMapControlOptions: {opened: true}
67        }
68
69        if (!PageLinker.url2Map(mapOptions))
70        {
71{/literal}
72                {if isset($initial_bounds)}
73                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}) );
74                mapOptions.center = mapOptions.iniBounds.getCenter();
75                {else}
76                        mapOptions.center = new google.maps.LatLng(0,0);
77                        mapOptions.zoom = 2;
78                {/if}
79{literal}
80        }
81
82        map = new google.maps.Map( document.getElementById("map"), mapOptions );
83       
84        if (mapOptions.iniBounds)
85                map.fitBounds(mapOptions.iniBounds);
86
87        if (document.is_debug)
88        {
89                google.maps.event.addListener(map, "idle", function() { glog("idle"); });
90                google.maps.event.addListener(map, "bounds_changed", function() { glog("bounds_changed");} );
91                google.maps.event.addListener(map, "center_changed", function() { glog("center_changed");} );
92                google.maps.event.addListener(map, "maptypeid_changed", function() { glog("maptypeid_changed");} );
93                google.maps.event.addListener(map, "zoom_changed", function() { glog("zoom_changed");} );
94                google.maps.event.addListener(map, "drag", function() { glog("drag");} );
95        }
96
97        pwgPageLinker = new PageLinker(map, "aLinkToThisPage" );
98
99        var pwgMarkerOptions = (function(){ {/literal}{$MAP_MARKER_ICON_JS}{literal} }).call(null);
100
101        map.pwgDataLoader = new PwgDataLoader(map, {rectangle_of_confusion: pwgMarkerOptions.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, {markerOptions: pwgMarkerOptions, 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
140function searchLocation(q)
141{
142        if (!q.length) return false;
143        if (!geocoder)
144                geocoder = new google.maps.Geocoder();
145        geocoder.geocode(q, function(results, status) {
146                document._geoResponse = results;
147                if ( status == google.maps.GeocoderStatus.OK )
148                {
149                        map.fitBounds( results[0].geometry.viewport );
150                }
151          else
152                        alert("This address has not been found\nCode: "+status);
153        });
154        return false;
155}
156
157
158var Localization =
159{
160  _strings: {
161{/literal}
162"go to %s": "{'go to %s'|@translate|@escape:javascript}",
163"Next": "{'Next'|@translate|@escape:javascript}",
164"Prev": "{'Prev'|@translate|@escape:javascript}",
165"out of %d": "{'out of %d'|@translate|@escape:javascript}",
166"Loading": "{'Loading'|@translate|@escape:javascript}",
167"Failed": "{'Failed'|@translate|@escape:javascript}",
168"Show all": "{'Show all'|@translate|@escape:javascript}",
169"show all photos around this location": "{'show all photos around this location'|@translate|@escape:javascript}",
170"displays %s on a map" : "{'displays %s on a map'|@translate|@escape:javascript}",
171"opens %s in Google Earth" : "{'opens %s in Google Earth'|@translate|@escape:javascript}",
172"%d photos" : "{'%d photos'|@translate|@escape:javascript}",
173{literal}
174dontMindTheComma: ""
175    },
176
177  get: function( str ) {
178                var lang_str = this._strings[str];
179                if (lang_str == undefined)
180                {
181                        if (document.is_debug) glog("Language string undefined '"+ str+"'");
182                        return str;
183                }
184                return lang_str;
185        },
186
187  getQ: function( str ) {
188                return '"'+this.get(str)+'"';
189        },
190
191  fmt1: function () {
192                var str = arguments[0];
193                str = this.get(str);
194                str = str.replace( '%s', "%" ).replace( '%d', "%" ).replace('%', arguments[1]);
195                return str;
196               
197        }
198}
199{/literal}
200//]]>
201</script>
202</head>
203
204<body onload="load()" onunload="unload()">
205
206<div id="titlebar">
207  <div class="titlebar_links" >
208    <span id="dataLoadStatus"></span>
209    <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>
210    <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>
211    <a id="aBlowup" href="" onclick="return PwgDataHandler.blowupUrl(this.href);" class="gmnoprint" title="{'show all photos around this location'|@translate}">
212                        <img src="{$PLUGIN_ROOT_URL}/icons/pic_s.gif" alt="" title="{'show all photos around this location'|@translate}" />
213                        <span>{'Show all'|@translate}</span>
214                </a>
215    <span class="gmnoprint">
216                        <input type="text" size="48" id="q" />
217                </span>
218  </div>
219  <div class="titlebar_title">
220    <a href="{$U_HOME}" class="gmnoprint">{'Home'|@translate}</a>
221    <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>
222    {'Viewing'|@translate}: <a id="aPageUrl" href=""></a>
223  </div>
224</div>
225
226<div id="map"> </div>
227</body>
228{get_combined_scripts load='footer'}
229</html>
Note: See TracBrowser for help on using the repository browser.