Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

461 lines (374 sloc) 14.285 kb
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Googlemap Editor</title>
<script type="text/javascript" src="../src/dialog/dialog-comm.js"></script>
<style type="text/css">
#map {
width: 542px;
height: 142px;
float: left;
}
input[type=text] {
width: 220px;
}
input[type=text].small {
width: 80px;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="form">
<label for="start">&nbsp;From:</label>
<input type="text" id="start" class="small"/>
<label for="end">&nbsp;To:</label>
<input type="text" id="end" class="small"/>
<br/>
<span id="target-fieldset">
<label for="target">&nbsp;Target:</label>
</span>
<select id="target"></select>
<br/>
<label for="location">&nbsp;Address:</label>
<input type="text" id="location"/>
<button id="geocode-button">-&gt;</button>
<br/>
<label for="lat">&nbsp;Latitude:</label>
<input type="text" id="lat" class="small"/>
<label for="lng">&nbsp;Longitude:</label>
<input type="text" id="lng" class="small"/>
<br/>
<label for="map-mode">Map Mode:</label>
&nbsp;<select id="map-mode">
<option value="ROADMAP">Map View</option>
<option value="STREETVIEW">Street View</option>
<option value="satellite">Satellite</option>
<option value="hybrid">Hybrid</option>
<option value="terrain">Terrain</option>
</select></br>
&nbsp;<input type="button" value="OK" id="ok"/>
&nbsp;<input type="button" value="Cancel" id="cancel"/>
</div>
<script type="text/javascript">
(function() {
var trackEvent = {}, targets,
gmaps, geocoder,
map, latLng,
latLngTimeout, locationTimeout,
geocache = {},
elements = {},
fields = [
'start', 'end', 'location', 'lat', 'lng', 'map-mode',
'target', 'target-fieldset', 'geocode-button',
'cancel', 'ok'
],
_comm,
streetView,
DEFAULT_LAT = 43.65322601477196,
DEFAULT_LNG = -79.38318430000004;
function saveLocation(loc) {
if (!loc) {
return;
}
if (loc.latLng) {
loc = loc.latLng;
}
latLng = loc;
trackEvent.lat = loc.lat();
trackEvent.lng = loc.lng();
elements.lat.value = trackEvent.lat;
elements.lng.value = trackEvent.lng;
map.setCenter(loc);
}
function geocode(location) {
function processResults(results) {
checkType( trackEvent.type );
latLng = results[0].geometry.location;
map.fitBounds(results[0].geometry.viewport);
}
if (geocache[location]) {
processResults(geocache[location]);
} else if (geocoder) {
geocoder.geocode( { address: location },
function(results, status) {
if (status === gmaps.GeocoderStatus.OK) {
geocache[location] = results;
processResults(results);
}
}
);
}
}
function checkTime(event) {
var id = this.id,
other, compare, otherId, otherElement,
element, value;
if (id === 'start') {
other = trackEvent.end;
otherId = 'end';
compare = 1;
} else if (id === 'end') {
other = trackEvent.start;
compare = -1;
otherId = 'start';
} else {
return;
}
element = elements[id];
otherElement = elements[otherId];
value = parseFloat(element.value);
element.style.backgroundColor = '#f11';
}
var checkType = function ( e ) {
var mode = elements['map-mode'].value;
trackEvent['type'] = mode;
if( mode === "STREETVIEW" ){
if ( !streetView ) {
map.setStreetView(
streetView = new window.parent.google.maps.StreetViewPanorama( document.getElementById('map'), {
position: latLng,
pov: {
heading: 0,
pitch: 0,
zoom: 1
}
})
);
streetView.setVisible( true );
}
else {
streetView.setPosition( latLng );
streetView.setVisible( true );
}
} else {
streetView && streetView.setVisible( false );
map.setMapTypeId( mode.toLowerCase() );
window.parent.google.maps.event.trigger( map, "resize" );
}
};
function checkLocation() {
if (locationTimeout) {
clearTimeout(locationTimeout);
locationTimeout = false;
}
locationTimeout = setTimeout(function() {
var loc;
if (!geocoder) {
return;
}
loc = elements.location.value;
loc = loc.replace(/^[\s\t\n\r ]+/, '');
loc = loc.replace(/[\s\t\n\r ]+$/, '');
loc = loc.replace(/[\s\t\n\r ]+/, ' ', 'g');
if (loc) {
geocode(loc);
}
}, 500);
}
function checkLatLng() {
if (latLngTimeout) {
clearTimeout(latLngTimeout);
latLngTimeout = false;
}
latLngTimeout = setTimeout(function() {
var lat, lng;
if (!geocoder) {
return;
}
lat = parseFloat(elements.lat.value);
if ( lat !== '' && isNaN(lat) || lat < -90 || lat > 90 ) {
elements.lat.style.backgroundColor = '#f11';
lat = '';
} else {
elements.lat.style.backgroundColor = '';
}
lng = parseFloat(elements.lng.value);
if ( lng !== '' && isNaN(lng) || lng < -180 || lng > 180 ) {
elements.lng.style.backgroundColor = '#f11';
lng = '';
} else {
elements.lng.style.backgroundColor = '';
}
if (lat !== '' && lng !== '') {
saveLocation( new gmaps.LatLng(lat, lng) );
}
}, 500);
}
function loadGoogleMaps() {
gmaps = window.parent.google.maps;
geocoder = new gmaps.Geocoder();
map = new gmaps.Map(document.getElementById('map'), {
zoom: trackEvent.zoom || 8,
disableDefaultUI: true,
zoomControl: true,
mapTypeId: gmaps.MapTypeId.ROADMAP
});
if (trackEvent.lat != null && trackEvent.lng != null &&
trackEvent.lat < -90 && trackEvent.lat > 90 &&
trackEvent.lng < -180 && trackEvent.lng > 180) {
latLng = new gmaps.LatLng(trackEvent.lat, trackEvent.lng);
map.setCenter(latLng);
map.setZoom(14);
saveLocation(latLng)
} else if (trackEvent.location) {
geocode(trackEvent.location);
} else {
latLng = new gmaps.LatLng(DEFAULT_LAT, DEFAULT_LNG);
window.parent.google.maps.event.trigger( map, "resize" );
map.setCenter(latLng);
saveLocation(latLng)
}
}
function saveEverything() {
/*
everything except label and target should already be saved by their own event handlers
*/
if ( elements.location.value !== "" ){
trackEvent.location = elements.location.value;
trackEvent.location = trackEvent.location.replace(/^[\s\t\n\r ]+/, '');
trackEvent.location = trackEvent.location.replace(/[\s\t\n\r ]+$/, '');
}
trackEvent.target = elements.target.value;
if ( map ) {
trackEvent.zoom = map.getZoom();
trackEvent.lat = map.getCenter().lat();
trackEvent.lng = map.getCenter().lng();
trackEvent.heading = map.streetView.getPov().heading;
}
}
function targetsUpdated( newTargets ) {
var i, select, option;
targets = newTargets || [];
elements['target-fieldset'].style.display = '';
select = elements.target;
select.innerHTML = '<option>Default</option>';
for (i = 0; i < targets.length; i++) {
option = document.createElement('option');
option.value = targets[i];
option.appendChild( document.createTextNode(targets[i]) );
select.appendChild(option);
if (targets[i] === trackEvent.target) {
option.selectedIndex = i;
}
}
if (targets.length <= 1) {
elements['target-fieldset'].style.display = 'none';
if (targets.length) {
trackEvent.target = targets[0];
}
}
}
function editTrackEvent( popcornOptions ) {
trackEvent = popcornOptions;
if (isNaN(trackEvent.start) || trackEvent.start < 0) {
trackEvent.start = 0;
}
elements.start.value = trackEvent.start;
if (isNaN(trackEvent.end) || trackEvent.end < trackEvent.start) {
trackEvent.start = trackEvent.start + 5;
}
elements.end.value = trackEvent.end;
if (isNaN(trackEvent.lat) || trackEvent.lat < -90 || trackEvent.lat > 90) {
delete trackEvent['lat'];
elements.lat.value = '';
} else {
elements.lat.value = trackEvent.lat;
}
if (isNaN(trackEvent.lng) || trackEvent.lng < -180 || trackEvent.lng > 180) {
delete trackEvent['lng'];
elements.lng.value = '';
} else {
elements.lng.value = trackEvent.lng;
}
elements.location.value = trackEvent.location || '';
if (trackEvent.location && geocoder &&
(trackEvent.lat === undefined || trackEvent.lng === undefined) ) {
geocode(trackEvent.location);
} else if (map && trackEvent.lat !== undefined && !isNaN(trackEvent.lat) &&
trackEvent.lng !== undefined && !isNaN(trackEvent.lng) ) {
latLng = new gmaps.LatLng(trackEvent.lat, trackEvent.lng);
map.setCenter(latLng);
}
if (map && trackEvent.zoom != null) {
map.setZoom(trackEvent.zoom);
}
if (targets.length === 1) {
trackEvent.target = targets[0][0];
}
trackEvent.type = trackEvent.type || "ROADMAP";
elements['map-mode'].value = trackEvent.type;
checkType();
elements.target.value = trackEvent.target;
}
function initialize() {
var i;
_comm = new Comm();
_comm.listen( "trackeventdata", function( e ){
_manifest = e.data.manifest;
targetsUpdated( e.data.targets );
editTrackEvent( e.data.popcornOptions );
if ( e.data.popcornOptions.type !== "STREETVIEW" ) {
loadGoogleMaps();
}
});
// load google map script
if (window.parent) {
try {
gmaps = window.parent.google && window.parent.google.maps;
} catch (e) {}
}
for (i = 0; i < fields.length; i++) {
elements[ fields[i] ] = document.getElementById(fields[i]);
}
// start and end use keyup because they need the new value
elements.start.addEventListener('change', checkTime, false);
elements.start.addEventListener('keyup', checkTime, true);
elements.end.addEventListener('change', checkTime, false);
elements.end.addEventListener('keyup', checkTime, true);
//lat, lng, location use keypress because they have a setTimeout
elements.lat.addEventListener('change', checkLatLng, false);
elements.lat.addEventListener('keypress', checkLatLng, false);
elements.lng.addEventListener('change', checkLatLng, false);
elements.lng.addEventListener('keypress', checkLatLng, false);
elements.location.addEventListener('change', checkLocation, false);
elements.location.addEventListener('keypress', checkLocation, false);
//buttons
elements['geocode-button'].addEventListener('click', checkLocation, false);
elements['map-mode'].addEventListener('change', checkType, false );
elements.cancel.addEventListener('click', function() {
//tell butter we've cancelled
document.getElementById('map').parentNode.removeChild( document.getElementById('map') );
_comm.send( "cancel" );
}, false);
window.addEventListener( "beforeunload", function() {
//tell butter we've cancelled
document.getElementById('map').parentNode.removeChild( document.getElementById('map') );
_comm.send( "cancel" );
}, false );
elements.ok.addEventListener('click', function() {
saveEverything();
//send back to Butter and close
document.getElementById('map').parentNode.removeChild( document.getElementById('map') );
_comm.send( "submit", {
eventData: trackEvent,
alsoClose: true
});
}, false);
if (gmaps) {
loadGoogleMaps();
} else {
(function() {
var script = document.createElement('script');
script.src = 'http://maps.google.com/maps/api/js?sensor=false&callback=loadGoogleMaps';
document.head.appendChild(script);
window.loadGoogleMaps = loadGoogleMaps;
}());
}
}
initialize();
}());
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.