nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Google Maps v3 in BIRT

Tubal

I'm trying to integrate Google Maps v3 into a BIRT text box, and it's coming up blank for some reason.<br />
<br />
I used the example here: <a class='bbc_url' href='http://esitnikov.blogspot.com/2010/01/birt-best-practice_5227.html'>http://esitnikov.blogspot.com/2010/01/birt-best-practice_5227.html</a> which uses the v1 API, and it works just fine.<br />
<br />
I put the following code using v1 into an HTML text control and if I view the report in an HTML page, it works:<br />
<br />
<pre class='_prettyXprint _lang-auto _linenums:0'><html>
<head>
<script src="http://maps.google.com/maps?file=api&v=1
&key=ABQIAAAAftwXx2hMOePGP2BE2_5RNRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxT-zgYL1zP-iujbpK-MPXdMZlTEzw" type="text/javascript">
</script>
</head>
<body>
<div id="map" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-83.022206, 39.998264), 3);
</script>
</body>
</html></pre>
<br />
Now if I take the code from the Google Maps v3 Getting Started page and put it in a HTML text element, it comes up blank in BIRT, but works fine using a regular web server:<br />
<br />
<pre class='_prettyXprint _lang-auto _linenums:0'><html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCYBZi7kgtTOUqctjElGFlAEuwAyBjZpHY&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html></pre>
<br />
I'm wondering if maybe it has to do with the 'onload' event in the body? Or maybe something with the HTML header tag in the text box.<br />
<br />
Does anyone have any experience or direction they can give me on this?<br />
<br />
Thanks.

Find more posts tagged with

Comments

johnw

When ever I embed Google Maps into a report, I've had to use the custom HTML emitter I submitted. The reason being is that the HTML emitter will not put in the proper Javascript libraries into the output HTML. The instructions for how to do so are included with the emitter, which is in the DevShare.

Also, I don't remember offhand, but I seem to recall this not working 100% with the example BIRT report viewer. If you modified the viewer to include the Google Maps API javascript, it "should" work in theory.

Tubal

One more question relating to this same thing.<br />
<br />
I'm having a problem passing data from the dataset into a script inside the text element.<br />
<br />
My plan is to store my address data into an array, load it up in the onFetch, and then in my google map, mark each address in the array on a single map.<br />
<br />
I don't think it has anything to do with the array, as I'm unable to pass ANY variable type into my script.<br />
<br />
Neither of these work:<br />
<br />
<pre class='_prettyXprint _lang-auto _linenums:0'>
<body>
<script>
var temp;
temp = <VALUE OF>row["test"];</VALUE OF>;
document.write(temp);

document.write(<VALUE OF>row["test"];</VALUE OF>);

</script>
</body>
</pre>
<br />
Is it possible to use variables inside a javascript inside a text element?

mwilliams

Yes, that should be possible. Does the text box have access to the dataSet in question?

birtprofi

Hello,<br />
<br />
I know this thread is few weeks old, but if you would like to open the google sample html in BIRT (run as html) you could do this but without "style".<br />
<br />
You can but your style settings in the div id map canvas.<br />
<br />
look at this code, this works:<br />
<pre class='_prettyXprint _lang-auto _linenums:0'>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas" style="width: 100%; height: 300px"></div>
</body>
</html></pre>