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.