I’m trying to use Google gomap in javascript. Whenever I add the “https://www.google.com/jsapi” to the list of javascripts, I got the error “Refused to display document because display forbidden by X-Frame-Options”.
Thank you. I found this too, but didn’t work. I also found that, there’s no such error in firefox and IE. Only in Chrome, I kept getting that error when inspecting element
despite the fact that I used
“&output=embed” parameter in url.
I found some hacky soluction that works:
Insted of using @JavaScript annotation to load google maps api in my custom javascript component code I use this code:
var gmap = gmap || {};
gmap.GMap = function(element) {
this.element = element;
this.element.innerHTML = "<div id='map-canvas' style='height:100%; width:100%;'></div>";
$(function() {
window.initialize = function() {
var mapOptions = {
zoom : 8,
center : new google.maps.LatLng(-34.397, 150.644),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById('map-canvas'), mapOptions);
};
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&'
+ 'callback=initialize';
document.body.appendChild(script);
});
};
I had the same problem: I had an embedded Google Maps iframe that I wanted to load only when scrolled over. The URI already had “embed=options”.
The first though was setting the src on the fly (in jQuery that would be $(‘#map’).attr(‘src’, 'http://…");), but that caused the X-Frame-Options error.
The workaround in this case is to just move the whole
I’m facing the same issue. None of the solutions worked for me. Loading javascript in runtime looks like a good idea, but due to some reason vaadin reloads a page when I append the script to the head or body. Also, I don’t get the meaning of the error. I’m just trying to load the script (https://www.google.com/jsapi), I’m not trying to embed any iframes…
I was able to solve this issue in a way, similar to the one described by Łukasz Śliwiński. I just needed to add a
callback parameter to google.load, so that instead of reloading the whole page on loading visualization library, it would call the specified method.
var thisObj;
function cz_vutbr_fit_simulatormanager_jscomponents_enginespanel_EnginesPanel() {
window.thisObj = this;
//as soon as script is loaded, loadVisualizationLibrary
loadScript("https://www.google.com/jsapi", loadGoogleVisualizationLibrary);
console.log("this.getElement 2"+this.getElement().innerHTML);
}
function loadGoogleVisualizationLibrary () {
var e = thisObj.getElement();
google.load("visualization", "1", {
packages : [ "gauge" ]
,
"callback" : initMyComponent
});
};
function loadScript(url, callback)
{
// Adding the script tag to the head as suggested before
var head = document.getElementsByTagName('head')[0]
;
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// Then bind the event to the callback function.
// There are several events for cross browser compatibility.
script.onreadystatechange = callback;
script.onload = callback;
// Fire the loading
head.appendChild(script);
}
function initMyComponent() {
thisObj.onStateChange = function() {
}
//code for drawing charts goes here
}
I am using above code to embedd a url in my application and it gives me below error in crome however its working fine in firefox. Any sugesstion will be help full.
Kindly note when i copy past the url in address bar then it works fine in crome however it doesnt work when used in vaadin component and crome.