Friday, October 19, 2012

Report Studio and Google maps - Part1

Problem Statement: User has a list report with 3 columns (Country Name, Planned Revenue, Revenue). User wants when he clicks on the country name, a Marker should pop-up in google map.

Steps:
1) Use Go Sales opr Go Datawarehouse package. and create the list report.
2) in below snapshot i have created a table with 2 columns.

3) As u can see I have used 5 HTML Items. So the code for all the item is as follow.
4) Code for 1st HTML Item: Set source type=Text
  <div onClick="AddMarker('
5) Code for 2nd HTML Item: Set source type=Report Expressions
             [Query1].[Country]
6) Code for 3rd HTML Item: Set source type=Text
             ')">

7) Code for 4th HTML Item: Set source type=Text
             </div>
8) Code for 5th HTML Item: This is the place where I have defined the code for google map.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map" style="width: 700px; height: 400px"></div>
<script type="text/javascript">
 var latlng = new google.maps.LatLng(40.756, -73.986);
 var options = {
 center : latlng,
 zoom : 1,
 mapTypeId : google.maps.MapTypeId.ROADMAP
 };
 // Creating the map

 var map = new google.maps.Map(document.getElementById('map'), options);
 var geocoder = new google.maps.Geocoder();
 var marker= new google.maps.Marker(null);
 function AddMarker(address)
 {
  geocoder.geocode( {'address' : address}, function(results, status)
  {
   if (status == google.maps.GeocoderStatus.OK)
   {
    //map.setCenter(results[0].geometry.location);
    var marker = new google.maps.Marker( {map : map,position : results[0].geometry.location });
    var infowindow;
    if (!infowindow)
    {
     infowindow = new google.maps.InfoWindow();
    }
    infowindow.setContent(address);
    google.maps.event.addListener(marker, 'click', function()
    {
     infowindow.open(map,marker);
    });
   }
  });
 }
</script>

  9) Run the report and u will see a list having country names, Revenue, Planned Revenue and a google Map on right side of the report. 10) click on Country name and you will see Marker coming up.  
  Thanks a lot for Visiting the blogpost.   Let me know your queries, i will respond them as when i get time.   Thx, Shyam Gohil.

2 comments:

  1. Very helpful indeed.
    Could you also set the market to "show all" you run the report?

    ReplyDelete
  2. thanks buddy. was trying to do this but wasn't able to. Finally did with your help.

    Thanks!!

    ReplyDelete