mozilla
/
popcorn-js
зеркало из https://github.com/mozilla/popcorn-js.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

preliminary map working need to add location]

This commit is contained in:
Anna Sobiepanek 2010-12-20 17:26:59 -05:00
Родитель 3f104ee1cb
Коммит 470b3684f3
2 изменённых файлов: 64 добавлений и 27 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

9
plugins/googleMap/popcorn.googleMap.html
Просмотреть файл

@ -24,9 +24,8 @@
end: 50, // seconds end: 50, // seconds
type: 'SATELLITE', type: 'SATELLITE',
target: 'map2', target: 'map2',
lat: -23.5489, location:'boston',
long: -46.6388, zoom: 15
zoom: 10
} ); } );
}, false); }, false);
</script> </script>
@ -34,10 +33,10 @@
<body> <body>
<h1 id="qunit-header">Popcorn google Map Plug-in Demo</h1> <h1 id="qunit-header">Popcorn google Map Plug-in Demo</h1>
<p> A Google Map displaying Toronto, Ontario will appear at 0 seconds and disappear at 10 seconds.</p> <p> A Google Map displaying Toronto, Ontario will appear at 0 seconds and disappear at 10 seconds.</p>
<p> A Google Map displaying Toronto, Ontario will appear at 15 seconds and disappear at 25 seconds.</p> <p> A Google Map displaying Sao Paulo will appear at 15 seconds and disappear at 50 seconds.</p>
<div> <div>
<video id='video' <video id='video'
controls preload='none' controls
width= '250px' width= '250px'
poster="../../test/poster.png"> poster="../../test/poster.png">

82
plugins/googleMap/popcorn.googleMap.js
Просмотреть файл

@ -6,15 +6,16 @@
* googleMap popcorn plug-in * googleMap popcorn plug-in
* Adds a map to the target div centered on the location specified * Adds a map to the target div centered on the location specified
* by the user * by the user
* Options parameter will need a start, end, target, lat and long, zoom * Options parameter will need a start, end, target, type, lat and long, zoom
* Start is the time that you want this plug-in to execute * -Start is the time that you want this plug-in to execute
* End is the time that you want this plug-in to stop executing * -End is the time that you want this plug-in to stop executing
* Target is the id of the document element that the text needs to be * -Target is the id of the DOM element that you want the map to
* Type either: HYBRID (default), ROADMAP, SATELLITE, TERRAIN * appear in. This element must be in the DOM
* -Type [optional] either: HYBRID (default), ROADMAP, SATELLITE, TERRAIN
* attached to, this target element must exist on the DOM * attached to, this target element must exist on the DOM
* Zoom [optional] defaults to 0 * -Zoom [optional] defaults to 0
* Src [optional] * -Lat and Long: the coordinates of the map
* MapInfo [optional] *
* Note: * Note:
* @param {Object} options * @param {Object} options
* *
@ -56,20 +57,36 @@
// IMPORTANT ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ // IMPORTANT ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Popcorn.plugin( "googleMap" , (function(){ Popcorn.plugin( "googleMap" , (function(){
var location, map, link,opt,target, newdiv; var newdiv, i = 1;
return { return {
manifest: {
about:{
name: "Popcorn Google Map Plugin",
version: "0.1",
author: "@annasob",
website: "annasob.wordpress.com"
},
options:{
start : {elem:'input', type:'text', label:'In'},
end : {elem:'input', type:'text', label:'Out'},
text : {elem:'input', type:'text', label:'Text'}
}
},
_setup : function( options ) { _setup : function( options ) {
target = document.getElementById(options.target),
options.target = document.getElementById(options.target),
// create a new div this way anything in the target div // create a new div this way anything in the target div
// will stay intack // will stay intack
newdiv = document.createElement('div'); options._newdiv = document.createElement('div');
newdiv.id = "actualmap"; options._newdiv.id = "actualmap"+i;
newdiv.style.width = "100%"; options._newdiv.style.width = "100%";
newdiv.style.height = "100%"; options._newdiv.style.height = "100%";
i++;
target.appendChild(newdiv); options.target.appendChild(options._newdiv);
}, },
/** /**
* @member webpage * @member webpage
@ -78,11 +95,32 @@
* options variable * options variable
*/ */
start: function(event, options){ start: function(event, options){
location = new google.maps.LatLng(options.lat, options.long); var that = this,
map = new google.maps.Map(newdiv, {mapTypeId: google.maps.MapTypeId[options.type] || google.maps.MapTypeId.HYBRID }); renderMap = function(){
var location = new google.maps.LatLng(options.lat, options.long);
map.setCenter(location); options._map = new google.maps.Map(options._newdiv, {mapTypeId: google.maps.MapTypeId[options.type] || google.maps.MapTypeId.HYBRID });
map.setZoom(options.zoom || 0);
options._map.setCenter(location);
options._map.setZoom(options.zoom || 0);
}
// If there is no lat/long, and there is location, geocode the location
if ( (!options.lat || !options.long || options.lat == 'null' || options.long == 'null') && options.location) {
var location ='boston',
geocoder = new google.maps.Geocoder(),
lat,
long;
geocoder.geocode({
address: options.location
}, function(results, status) {
options.lat = results[0].geometry.location.va;
options.long = results[0].geometry.location.wa;
renderMap.call(that);
})
} else {
renderMap();
}
}, },
/** /**
* @member webpage * @member webpage
@ -92,7 +130,7 @@
*/ */
end: function(event, options){ end: function(event, options){
// remove the map from the target div // remove the map from the target div
target.removeChild(map.getDiv()); options.target.removeChild(options._map.getDiv());
} }
}; };