CODEWITHSUNDEEP
javascripthtmldom
GregH
GregH

Reputation: 5459

JavaScript HTML alter HTML element from JavaScript code

I am currently displaying "LOADING STREET VIEW" while the image is loading. If it cannot find an image for the coordinate, I am popping up a dialog stating "Unable to load location in street view". I want to alter this so that I am not popping a dialog, but instead changing the LOADING STREET VIEW element to the image found at : https://maps.googleapis.com/maps/api/streetview?size=600x300&location=44.414382,11.013988&heading=151.78&pitch=-0.76 I'm very confused about referencing html elements in javascript code. From the research i've done, I think I need to be using document in my javascript code. All help is appreciated and you can find the code below:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
    function initialize() {
        var markerPosition = new google.maps.LatLng(41.201316987470086, -82.98099300983233);
        var panoramaOptions = {
            position: markerPosition,
            pov: {
                heading: 165,
                pitch: 0,
                zoom: 1
            }
        };
        var myPano = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);
        myPano.setVisible(false);
        new google.maps.Marker({map: myPano, position: markerPosition, title: 'Feature'});

        // add a variable that gets set when the position_changed handler gets fired off
        var positionDidChange = false;

        var newPov = {};
        var listenerHandle = google.maps.event.addListener(myPano, 'position_changed', function () {
            positionDidChange = true;
            google.maps.event.removeListener(listenerHandle);
            newPov.heading = google.maps.geometry.spherical.computeHeading(myPano.getPosition(), markerPosition);
            newPov.pitch = 0;
            newPov.zoom = 1;
            myPano.setPov(newPov); myPano.setVisible(true);
        });

        // add a function that gets fired off to see if the position did change so that the user does not wait forever
        setTimeout(function () {
            if (!positionDidChange) {
                alert("Unable to load location in street view");
            }
        }, 5000);
    }

</script>

</head>
<body onload="initialize()">
<div id="pano" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;"> LOADING STREET VIEW...</div>
</body>
</html>

Upvotes: 1

Views: 318

Answers (2)

Henry A.
Henry A.

Reputation: 391

Make a function that will replace the inner HTML of the div to the image:

var changeImage = function(){
    var image = "http://www.myimage.com/image.png";
    document.getElementById("pano").innerHTML = "<img src='" + image + "'>"; 
}

Then

if(!positionDidChange){
    changeImage();
}

Upvotes: 1

mike.k
mike.k

Reputation: 3447

You can control that text with document.getElementById('pano').innerHTML, for instance:

document.getElementById('pano').innerHTML = ' LOADING STREET VIEW..'; // what you have now
document.getElementById('pano').innerHTML = ''; //empty

Upvotes: 1

Related Questions