Using Google Maps in a Text Item, and Other Posts From This Week

This week in the BIRT Forums, someone asked about using Google Maps in a BIRT report. While there is a plugin for this already, in some cases you might want to use a text item instead. In this post I’ll show you some code I’ve used to display a Google Map in a report.

As you would expect, you’ll need to start with an empty text item on your report. Make sure to change it from “Auto” to “HTML” in the text item UI. Once you’ve done this you can use my sample code below.

<!DOCTYPE html>
<html>
<head>
<title>Asynchronous Loading</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script>
function initialize() {
alert("init");
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};

var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
alert("done");
}

function loadScript() {
alert("loading");
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);
alert("done");
}

window.onload = loadScript();

</script>
</head>
<body>
<div id="map-canvas" style="width:400px;height:600px;"></div>
</body>
</html>
</pre>

There are two tricks to get this to work.  The first is to use Google’s asynchronous loading example. The second, which took me some time and a big headache to figure out, is explicitly setting the height and width for the div that the Google Map will be displayed in. Using this same code in an HTML document, everything works right out of the box. In a BIRT design, the div will not auto-size for you. So take special note of this portion of the code

style="width:400px;height:600px;"

which is a workaround for my auto-sizing headache.

This is a quick and simple example of how you can use a text item to display a Google Map. You can also do other Google Map-related functions, such as setting pins from longitude and latitude. As far as I know you can set a maximum of 50 pins, which was more than enough for me!

Have you used a Google Map in your BIRT design using the Google Map plugin or the method shown here? If you have, please post a screenshot in the comments. I always like to see what people are working on!

Here are some other BIRT Forum posts worth taking a look at:

Also, here are some unanswered posts from this week:

If you have suggestions or solutions for any of these, please post them in the thread!

As the week comes to an end I hope everyone has a good weekend. Thanks for reading! If you have any questions or comments please feel free to comment below! Happy 4th of July everyone!
-Kris

Write a Reply or Comment

Your email address will not be published. Required fields are marked *