Search code examples
javascripthtmlgoogle-maps-api-3webfocus

Need Help Integrating Google Maps to WEBFOCUS 8

Hello currently I am trying to integrate custom google maps layers to my Webfocus8 driven business application. I have written the Javascript/HTML5 code that does this but I do not know where to put it in the application.

Heres the code if anybody else needs it.

<html>
<head>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">
        var layers=[];

        layers[0] = new  google.maps.KmlLayer('http://www.hpc.ncep.noaa.gov/kml/fop/fopbody.kml',
                {preserveViewport: true});

        layers[1] = new google.maps.KmlLayer('http://www.nhc.noaa.gov/gis/forecast/archive/latest_wsp34knt120hr_tenthDeg.kmz',
                {preserveViewport: true});

        layers[2] = new google.maps.KmlLayer('http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_month_depth_link.kml',
                {preserveViewport: true});

        var map;

        function initialize() {
            var latlng = new google.maps.LatLng(40.744771, -73.3171305);
            var myOptions = {
                zoom: 10,
                center: latlng,
                mapTypeIds: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
        }

        function toggleLayers(i)
        {

            if(layers[i].getMap()==null) {
                layers[i].setMap(map);
            }
            else {
                layers[i].setMap(null);
            }
            document.getElementById('status').innerHTML += "toggleLayers("+i+") [setMap("+layers[i].getMap()+"] returns status: "+layers[i].getStatus()+"<br>";
        }


    </script>
</head>
<body onload="initialize()">
  Flood <input type="checkbox" id="layer_01" onclick="toggleLayers(0);"/>
  Hurricane<input type="checkbox" id="layer_02" onclick="toggleLayers(1);"/>
   Earthquake<input type="checkbox" id="layer_03" onclick="toggleLayers(2);"/>
  <div id="map_canvas" style="height:800px; width:800px;"></div>
  <div id="status"></div>
  </body>
  </html>
Solution

  • I am not familiar with the WF8 syntax but on earlier versions you can use HTMLFORM

    -HTMLFORM BEGIN
<HTML></HTML>
-HTMLFORM END