How to set separate image class?

[toplisek]

I like to set separate class for Google map when location is detected:

function geoFindMe() {
 var output = document.getElementById("out");

 if (!navigator.geolocation) {
 output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
 return;
 }

 function success(position) {
 var latitude = position.coords.latitude;
 var longitude = position.coords.longitude;

 output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';

 var img = new Image();
 img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";

 output.appendChild(img);
 };

 function error() {
 output.innerHTML = "Unable to retrieve your location";
 };

 output.innerHTML = "<p>Locating…</p>";

 navigator.geolocation.getCurrentPosition(success, error);
}

My goal is to define its own class name as function. Is this possible? Need help.
img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";

Class is like:
#map-canvas {
height: 300px;
margin: 0;
padding: 15px;
width: 100%;
}

[lucy24]

<tangent>
Funny to see all those separate "innerHTML" statements. If it were me, I'd say
textoutput = blahblah
textoutput += blahblah
as needed, ending up with a single comprehensive
something.innerHTML = textoutput
But then, everyone knows I speak javascript with an almost impenetrable BASIC accent.
</tangent>

I don't see where the class comes in. Your quoted CMS refers to an ID -- and that already exists, doesn't it? Are you looking to add a class name to this element? (I hope so. Adding a classname to an existing element is much, much easier than setting new CSS for an existing class.)