So first off, your probably thinking the has been covered a million times right… Well I have UTFSE to no avail.
I want to imbed a Google map into Web Intelligence. So I have a stack of LatLong data which I am retrieving through WEBI, being 2 columns EG:
Latitude: Longitude:
-40.34 175.62
-36.67 150.59I’ve built a variable [GMAP]:
=[Latitude]+ " ;"+[Longitude]+"#"And written some Javascript TEST code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Heatmaps</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization"></script>
<script>
// Adding 500 Data Points
var map, pointarray, heatmap;
var gmapText = [GMAP];
var tmpData = gmapText.split("#");
var taxiData = [];
for (var idx in tmpData) {
var td = tmpData[idx].split(";");
taxiData.push(new google.maps.LatLng(td[0],td[1]));
}
function initialize() {
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(-37.678, 175.52),
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var pointArray = new google.maps.MVCArray(taxiData);
heatmap = new google.maps.visualization.HeatmapLayer({
data: pointArray
});
heatmap.setMap(map);
}
function toggleHeatmap() {
heatmap.setMap(heatmap.getMap() ? null : map);
}
function changeGradient() {
var gradient = [
'rgba(0, 255, 255, 0)',
'rgba(0, 255, 255, 1)',
'rgba(0, 191, 255, 1)',
'rgba(0, 127, 255, 1)',
'rgba(0, 63, 255, 1)',
'rgba(0, 0, 255, 1)',
'rgba(0, 0, 223, 1)',
'rgba(0, 0, 191, 1)',
'rgba(0, 0, 159, 1)',
'rgba(0, 0, 127, 1)',
'rgba(63, 0, 91, 1)',
'rgba(127, 0, 63, 1)',
'rgba(191, 0, 31, 1)',
'rgba(255, 0, 0, 1)'
]
heatmap.setOptions({
gradient: heatmap.get('gradient') ? null : gradient
});
}
function changeRadius() {
heatmap.setOptions({radius: heatmap.get('radius') ? null : 20});
}
function changeOpacity() {
heatmap.setOptions({opacity: heatmap.get('opacity') ? null : 0.2});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="panel">
<button onclick="toggleHeatmap()">Toggle Heatmap</button>
<button onclick="changeGradient()">Change gradient</button>
<button onclick="changeRadius()">Change radius</button>
<button onclick="changeOpacity()">Change opacity</button>
</div>
<div id="map-canvas"></div>
</body>
</html>So what’s going on here is var GMAP is raw SQL data being split, looped and pushed into the array TaxiData. Forward of that TaxiData is plotted onto the map, or heatmap in this case. There’s also some HTML toggle functions. The HTML is then plastered into a cell on the webi report, which is set to HTML. So when the query is executed VAR [GMAP] should change, and subsequenty the map is refreshed, or the request executed.
Onto my problem (assuming there is no inherrient flaws in the plan above):
The map is coming up blank, well it is rendering the HTML, so I can see the toggle boxes availiable, but zip, ziltch where the map should be - just white space. I can’t seem to get ANY <a href www. to work. For example www.google.com is returning the same blank white page.
My first thought was perhaps Rich Client wouldn’t work for this, so I have tried launchpad, in both web & rich internet versions, all options I have the same result.
So, next thought is that the server does not have internet enabled for security reasons. Would the execution of this code be through the server?
And finally, I have attempted various different <a href syntax variations.
Any thoughts, or anyone have any success embedding any websites to WEBI?
Thanks,
Thomas
[Moderator Edit: Added code formatting - Andreas]
Thomas Evans 
(BOB member since 2013-10-17)
(BOB member since 2011-08-21)
(BOB member since 2003-05-26)
(BOB member since 2003-05-26)
(BOB member since 2003-05-26)
(BOB member since 2011-08-21)
(BOB member since 2013-10-17)