Details
-
Type:
Monitor
-
Status: Closed
-
Priority:
Major
-
Resolution: Done
-
Affects Version/s: None
-
Fix Version/s: 2021
-
Component/s: FIWARE-TECH-HELP
-
Labels:
-
HD-Enabler:Wirecloud
Description
Created question in FIWARE Q/A platform on 19-04-2016 at 10:04
Please, ANSWER this question AT https://stackoverflow.com/questions/36712259/why-wont-my-widget-work-inside-of-wirecloud
Question:
Why wont my widget work inside of wirecloud?
Description:
I have made the following widget using nothing but html, css and js. This works just fine by itself when you search for keywords that ixist in our DB (such as peach or strawberry):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Search Seller widget</title>
<meta name="viewport" content="width=device-width">
<style>
#mapCanvas
{ width: 550px; height: 600px; float: left; border-style: solid; color: #59C0DF; }#infoPanel
{ float: left; margin-left: 10px; }#infoPanel div
{ margin-bottom: 5px; }#tbl
{ border-collapse: collapse; }#tbl, td, th
{ border: 2px solid #70B8FF; padding: 5px; }th
{ font-style: bold; color: black; background-color: #59C0DF; } .btn {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Courier New;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
.btn:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
text-decoration: none;
}
.textbox
{ border: 1px solid #848484; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; outline:0; height:25px; width: 120px; padding-left:10px; padding-right:10px; }</style>
</head>
<body onload="initialize(45.2671, 19.8335,0)"> <!-bgcolor="#E6E6FA"->
<div id="top">
<label>
<input type="url" id="url" class="textbox" value="">
</label>
<label>
<button id="get" class="btn">GET</button>
</label>
<label>City</label>
<input type="text" id="City" class="textbox" value="" readonly>
<label>Company</label>
<input type="text" id="Company" class="textbox" value="" readonly>
<label>Latitude</label>
<input type="text" id="Lat" class="textbox" value="" readonly>
<label>Longitude</label>
<input type="text" id="Lon" class="textbox" value="" readonly>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
</br>
<div id="map" style="width:500px;height:380px; border-style: solid; border-color: #3498db; display: none;"></div>
</div>
<div>
<a href="http://www.panonit.com" target="_blank"> <img src="PanonitLogo.png" alt="Logo" style="width:160px;height:75px; margin-top:15px" > </a>
<a href="http://www.finish-project.eu/" target="_blank"> <img src="Cropped.png" alt="Logo" style="width:160px;height:75px;margin-left:15px; margin-top:15px" > </a>
<a href="http://ec.europa.eu/index_en.htm" target="_blank"> <img src="European.jpg" alt="Logo" style="width:160px;height:75px;margin-left:15px; margin-top:15px" > </a>
</div>
<script>
var obj;
var cors_api_url = 'https://cors-anywhere.herokuapp.com/';
function doCORSRequest(options, printResult) {
var x = new XMLHttpRequest();
x.open(options.method, cors_api_url + options.url);
x.onload = x.onerror = function() {
printResult(
options.method + ' ' + options.url + '\n' +
x.status + ' ' + x.statusText + '\n\n' +
(x.responseText || '')
);
};
x.send(options.data);
}
// Bind event
(function() {
var urlField = document.getElementById('url');
var obj;
document.getElementById('get').onclick = function(e) {
var glat;
var glon;
e.preventDefault();
doCORSRequest(
, function printResult(result) {
result = result.substring(result.length, result.indexOf('{'));
obj = JSON.parse(result);
var cityField = document.getElementById('City');
cityField.value = obj.City;
var company = document.getElementById('Company');
company.value = obj.Company;
var lat = document.getElementById('Lat');
lat.value = obj.Lat;
glat = lat.value;
var lon = document.getElementById('Lon');
lon.value = obj.Lon;
glon = lon.value;
if(obj.Lat==null || obj.Lon ==null)
else
{ initialize(glat, glon,1); } });
};
})();
function initialize(lat, lon, displayMarker) {
document.getElementById('map').style.display = "";
var mapProp =
;
var map=new google.maps.Map(document.getElementById("map"),mapProp);
if(displayMarker==1){
var marker = new google.maps.Marker(
);
}
}
</script>
</body>
</html>
When I convert it to a widget with the help of fispace's add on in eclipse and then proceed to upload it in fiware lab's or fispace's wirecloud thats when it shows an error missing api key. So I got google's api key and appended it like so:
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBGrI_BKBCPZfOCskNEH5B5wiJhuV1yKeI"></script>
Yet still I end up with a grayed out map inside of wire-cloud.
Can anyone help me solve this issue? Thank you.
Activity
2017-05-22 18:10|UPDATED status: transition Answer| # answers= 1, accepted answer= True
2017-05-22 21:10|UPDATED status: transition Finish| # answers= 1, accepted answer= True
2017-05-22 15:15|CREATED monitor | # answers= 1, accepted answer= True