0
私はhtml、css、js以外のものを使って次のウィジェットを作っています。あなたは（そのような桃やイチゴなど）私たちのDBにixistキーワードを検索するとき、これはそれ自体でうまく動作します：私は進み、その後日食での追加とfispaceのの助けを借りてウィジェットに変換私のウィジェットはワイヤクラウド内で動作しないのはなぜですか？
<!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>
ファイアウォールのラボやfispaceのワイヤークラウドにアップロードするには、apiキーが見つからないというエラーが表示されます。だから私は、GoogleのAPIキーを持って、そのようにそれを追加：
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBGrI_BKBCPZfOCskNEH5B5wiJhuV1yKeI"></script>
をしかし、まだ私は、ワイヤ雲の内部グレーアウトマップで終わります。 誰でもこの問題を解決できますか？ありがとうございました。
javascriptコンソールのメッセージはありますか？ – Meier
はい、エラー403、Google APIキーが見つからないというエラーです。ファイアウォールのラボアカウントをお持ちの場合は、ウィジェットを自分で見ることができます。その売り手所在地 – Vrankela
またはGoogleマップのチュートリアルから簡単な例を作成してみてください。 https://developers.google.com/maps/documentation/javascript/tutorial – Meier