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({
method: this.id = 'GET',
url: 'trace.panonit.com/widgets/GetFieldCoordinates/' + urlField.value
}, 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)
{
//initialize(glat, glon);
document.getElementById('City').value = "City not found";
document.getElementById('Company').value = "Company not found";
document.getElementById('Lat').value = "Latitude not found";
document.getElementById('Lon').value = "Longitude not found";
initialize(45.2671, 19.8335,0);
}
else {
initialize(glat, glon,1);
}
});
};
})();
function initialize(lat, lon, displayMarker) {
document.getElementById('map').style.display = "";
var mapProp = {
center:new google.maps.LatLng(lat,lon),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("map"),mapProp);
if(displayMarker==1){
var marker = new google.maps.Marker({
position: new google.maps.LatLng( lat,lon),
animation: google.maps.Animation.DROP,
map: map,
title: 'Crop 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.
I get errors due mixed content when using the original HTML file. Using "https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" and "https://maps.googleapis.com/maps/api/js" for loading jquery and google maps (take into account the s of https) fixes the problem. At least when I search peach the widget shows a Arsen Agro company.