JavaScript HTML alter HTML element from JavaScript code

Question

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>

mike.k · Accepted Answer · 2015-07-22 19:37:55Z

1

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

answered Jul 22, 2015 at 19:37

mike.k

3,4771 gold badge14 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Henry A. · Accepted Answer · 2015-07-22 19:42:53Z

1

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();
}

answered Jul 22, 2015 at 19:42

Henry A.

3813 silver badges19 bronze badges

2 Comments

Henry A. Over a year ago

It seems to work fine in this fiddle: jsfiddle.net

GregH Over a year ago

yes was an error on my end. your code is very much correct. deleted my comment stating otherwise. thank you for your time and help

Collectives™ on Stack Overflow

JavaScript HTML alter HTML element from JavaScript code

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related