I.T. Go Home ....: Mashup with Google Maps or How to Call Java from JavaScript

You can simply embed Java code with the usual notation and even expressions (< % = expression % >) in JavaScript used in JSP.

Below is an example of how to do that. The code creates some Java arrays (between <% and %>) and uses them in Javascript in order to show markers on a Google map. You can see it in action here (choose trip Customizer and play with it).

The code talks for itself, so here it is:

<HEAD>

   <title>Customize you trip !</title>
     <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAyBigJTywiIxNM2cWUWhcFxR-sC-25ycSkOaRk1LgFwDltfgq9BRvhFBXWyducVZRhIvJw2DLcsPUdg"
      type="text/javascript"></script>
    <script type="text/javascript">


    //<![CDATA[


    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(45.29, 25.56), 6);
        var coords = new Array();


<%
    int[] coordsX = (int[])(request.getSession().getAttribute("coordsX"));
    int[] coordsY = (int[])(request.getSession().getAttribute("coordsY"));
    String[] locations = (String[])(request.getSession().getAttribute("locations"));
    if ((coordsX == null) || (coordsX.length == 0)) {
        coordsX = new int[1];
        coordsX[0] = 0;
        coordsY = new int[1];
        coordsY[0] = 0;
    }
    for (int i = 0; i < coordsX.length; i++) {
        if (
            (coordsY[i] < 2967) && 
            (coordsY[i] > 2021) && 
            (coordsX[i] < 4823) &&
            (coordsX[i] > 4362)
        ) {
%>
          var coord = new GLatLng(
                <%= (float)coordsX[i]/100 %>, 
                <%= (float)coordsY[i]/100 %>);
          var marker = new GMarker(coord);
          GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml("<b><%= locations[i] %></b>");
          });
          map.addOverlay(marker);
        coords[<%= i %>] = coord;
<%
        }
    }
%>
        var polyline = new GPolyline(coords, "#ff0000", 10);
    map.addOverlay(polyline);




        // define the crosshair tile layer and its required functions
        var crossLayer = new GTileLayer(new GCopyrightCollection(""), 0, 15);
        crossLayer.getTileUrl =  function(tile, zoom) {
        return "./include/tile_crosshairs.png";
        }
        crossLayer.isPng = function() {return true;}


        // Create a new map type incorporating the tile layer
        var layerTerCross = [ G_PHYSICAL_MAP.getTileLayers()[0], crossLayer ];
        var mtTerCross = new GMapType(
                                      layerTerCross,
                                      G_PHYSICAL_MAP.getProjection(), 
                                      "Ter+");
        map.addMapType(G_PHYSICAL_MAP);
        map.addMapType(mtTerCross);
        map.addControl(new GLargeMapControl())


        var mapControl = new GHierarchicalMapTypeControl();
        // Set up map type menu relationships
        mapControl.clearRelationships();
        mapControl.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP, "Labels", false);
        mapControl.addRelationship(G_PHYSICAL_MAP, mtTerCross, "Crosshairs");
        // Add control after you've specified the relationships
        map.addControl(mapControl);
      }
    }
    //]]>
    </script>
</HEAD>


In the code above, "map" is actually a div:






<div id="map" style="width: 700px; height: 400px"></div>






In case you're wondering how this mix of JSP, JavaScript and Java actually works, let's start with the JSP: as we know, JSP runs on the server side and gets translated into a servlet. Thus, the code between < % and % >, including the one inside JavaScript, is textually copied into the servlet code,  since it is just Java code. The resulting servlet will generate HTML, so it will also dynamically generate the JavaScript code (which you can see in your browser by viewing the page source). The generated JavaScript code will have the for loop expanded with actual values for the coordinates and it will execute on the client side, in the browser.

That's all, folks.

I.T. Go Home ....

Monday, June 7, 2010

Mashup with Google Maps or How to Call Java from JavaScript

No comments:

Post a Comment

prettyprint