Calling a JavaScript function within HTML

Question

I have the following function which is part of Google Earth API. It generates an image overlay on the map and has to be called multiple times. How do I call this function and give every call a unique id? I thought about something like this:

function createScreenOverlay(location, x , y) {
            var screenOverlay = ge.createScreenOverlay('');
            screenOverlay.setIcon(ge.createIcon(''));
            screenOverlay.getIcon().setHref(location); 

            screenOverlay.getOverlayXY().setXUnits(ge.UNITS_FRACTION);
            screenOverlay.getOverlayXY().setYUnits(ge.UNITS_FRACTION);
            screenOverlay.getOverlayXY().setX(.5);
            screenOverlay.getOverlayXY().setY(.5);

              // Set screen position in fractions.
            screenOverlay.getScreenXY().setXUnits(ge.UNITS_PIXELS);
            screenOverlay.getScreenXY().setYUnits(ge.UNITS_PIXELS);
            screenOverlay.getScreenXY().setX(x);  // Random x.
            screenOverlay.getScreenXY().setY(y);  // Random y.

              // Rotate around object's center point.
            screenOverlay.getRotationXY().setXUnits(ge.UNITS_FRACTION);
            screenOverlay.getRotationXY().setYUnits(ge.UNITS_FRACTION);
            screenOverlay.getRotationXY().setX(0.9);
            screenOverlay.getRotationXY().setY(0.5);

              // Rotate by a random number of degrees.
            ge.getFeatures().appendChild(screenOverlay);
        };

Have this in the HTML: <p id="campusbutton"><p>

and then once more in the JavaScript section have this calling it: document.getElementById("campusbutton").innerHTML=createScreenOverlay(LOCATION, X, Y);

This does work, however it writes "undefined" Where the <p> is suppose to be... obviously <p> is the paragraph tag which is why the "undefined" is printed, but is there any other tag I could use? <div> doesn't work for some reason.

Thank you!

Answer 1

I'm not sure what you are trying to achieve, if you want the campusbutton to load your overlay then you should use a event like onclick to call the function and pass the parameters as required.

<p id="campusbutton" onclick="createScreenOverlay(LOCATION, X, Y)"><p>

As it is you are setting the innerHTML of the campusbutton element to the result of the function createScreenOverlay , but the function doesn't return anything so that isn't going to work.

Even if the function did return something, the KmlScreenOverlay for example

function createScreenOverlay(location, x , y) {
            var screenOverlay = ge.createScreenOverlay('');
            // rest of your code
            ge.getFeatures().appendChild(screenOverlay);    
            // return the type
            return screenOverlay;
        };

Your innerHTML of the campusbutton would still just be the result of this call. Which would be Object .

If you want the innerHTML of the campusbutton to be the actual Kml of the overlay then ammend the function to return the KmlScreenOverlay as above, then change the call to set the innerHTML to the kml representation of the object.

document.getElementById("campusbutton").innerHTML=createScreenOverlay(LOCATION, X, Y).getKml();