How to Create a Google Map with Markers using Jasper CVC

Posted on by By Mounika, in Jaspersoft | 0

The Goal of this blog is to create a google map with markers which can be placed in certain locations along with information of data on mouse over of marker using Jasper CVC component.

Prerequisites: Jaspersoft Studio

Database: Postgres – Foodmart

  1. Initially create a folder named “Google Map”.
  2. Create one blank jasper report inside the folder named “googlemap.jrxml”.
  3. Drag CVC component to the summary band and drag a text field to title band and give appropriate title i.e. “Google Map”. Delete all the other bands.
  4. Google Map


  5. Use the following sample code in the dataset which gives details of 3 locations:
  6. Query:

    select 17.38 as latitude,78.48 as longitude,"Telangana"as state,"Hyderabad" as city 
    union all
    select 13.62 as latitude,79.41 as longitude,"Andhra Pradesh" as state,"Telangana" as city
    union all
    select 27.17 as latitude,78.00 as longitude,"Uttar Pradesh"as state,"Agra"as city
  7. Create two .js files i.e. build.js and googlemap.js inside the “Google Map” folder.
  8. Google Map folder

    1. build.js file is used to create minified file.
    2. Code in build.js:

      baseUrl: '',
      paths: {
      wrap: {
      start: "if (typeof define === 'function' && define.amd){}\nelse if (typeof __visualize__ !== 'undefined' &&\ntypeof __visualize__.define === 'function')\n{\n}\n\n(function(root){\n\nvar define = root.define;\n\n",
      end: "\n\n}(typeof __visualize__ != 'undefined' ? __visualize__ : window));"
      name: "googlemap",
      out: "googlemap.min.js"
    3. googlemap.js file is used to create a customization to the map as required.

    Code in googlemap.js

    define(function () {
    return function (instanceData)
    console.log("instanceData: ",instanceData);
    //for google map
    var          map = new google.maps.Map(document.getElementById(,{
    zoom: 4,
    center: {lat: 20.59, lng: 78.96},
    mapTypeId: 'terrain',
    minZoom: 3
    var markers=[];
    var series=instanceData.series[0];
    //to show information window on hover of marker
    function addInfoWindow(marker, message) {
    var infoWindow = new google.maps.InfoWindow({
    content: message
    google.maps.event.addListener(marker, 'mouseover', function () {, marker);
    google.maps.event.addListener(marker, 'mouseout', function () {
    infoWindow.close(map, marker);
    //to place markers at particular locations
    for (var i=0; i < series.length; ++i)
    var record = series[i];
    var marker=new google.maps.Marker({
    position: new google.maps.LatLng(record.latitude, record.longitude),
    map: map
    addInfoWindow(marker,"State :"+record.state+"<br>City :"
    for (var i = 0; i < markers.length; i++) {
    var svg = window.document.createElementNS("", "svg");
    svg.setAttribute("xmlns:xlink", "");
    svg.setAttributeNS(null, "height",  instanceData.height);
    svg.setAttributeNS(null, "width",  instanceData.width);
    var shape = window.document.createElementNS("", "rect");
    shape.setAttributeNS(null, "y", 0);
    shape.setAttributeNS(null, "x", 0);
    shape.setAttributeNS(null, "height", instanceData.height);
    shape.setAttributeNS(null, "width",  instanceData.width);
    shape.setAttributeNS(null, "style", "stroke:white; fill: white");
  9. Set the fields name in the properties of CVC component to relate the data from the query to .js file and adding a minified file to CVC component as shown below:
  10. CVC component properities


    1. Add minified file to our CVC component in the form of property.
    2. Right click on CVC component–> Show Properties–> Click on Data–> Click on Add as shown.


      Give Property name as “script” and Property value as “googlemap.min.js” which is minified file i.e. adding a minified file to CVC component.


    3. Relating fields from dataset to googlemap.js file.

    Click on Edit to modify Item Data 1.

    Right click on CVC component–> Show Properties–> Click on Data–> Click on Edit as shown

    Show Properties

    Click on Dataset and check “Use Dataset” box so that we can add fields from the dataset created.


    Click on Items–> Click on Add


    Add the required fields as shown.


  11. Save Jrxml and build the CVC component.
    1. Right click on folder and click “Build All Components”.Check Console for any errors. If there are no errors, console displays the information as shown below:
    2. Console

    3. googlemap.min.js file is created after a successful build of the component.

    google map Marker

  12. Deploy the report on the server.
  13. The final output will be as shown in the following screenshot:

google map markers


Best Open Source Business Intelligence Software Helical Insight is Here


A Business Intelligence Framework

If you have any queries please get us at


Mounika Pulimamidi.

Helical IT Solutions Pvt Ltd


0 0 votes
Article Rating
Notify of
Inline Feedbacks
View all comments