Add css styling to image used in Javascript

Question

I have an image that I used in my js file (it's used for a geolocation icon) and I would like to add css styling to it because the image itself is too large on the screen.

<!DOCTYPE html>
<html>
  <head>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #map {
            height: 100%;
        }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
        var locationIcon = 'img/SVG/User_Location.svg';

        // Try HTML5 geolocation.
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
          var pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
          };

          //Centers map to current position  
          map.setCenter(pos);

          //Sets icon to current position
          var currentLocation = new google.maps.Marker({
            position: {lat: position.coords.latitude, lng: position.coords.longitude},
            map: map,
            icon: locationIcon
          });

        }, function() {
          handleLocationError(true, infoWindow, map.getCenter());
        });
      } else {
        // Browser doesn't support Geolocation
        handleLocationError(false, infoWindow, map.getCenter());
      }
    }    
    </script>
  </body>
</html>

How would I achieve this? EDIT: I added code to show how the image is displayed

Please show us the JS code that you use to display the image — Drown, Jan 27 '16 at 19:00
Image too large? what are you trying to achieve, how should the end result be? I don't think SVG can be too large, they are scalable. Why do you want to style with javascript? why not use just CSS? — Aziz, Jan 27 '16 at 19:05
You could use 'scale' when creating the marker in order to set the size. https://developers.google.com/maps/documentation/javascript/symbols — threxx, Jan 27 '16 at 19:10

score 0 · Accepted Answer · edited May 23 '17 at 10:27

0

I think what you are looking for was answered in this post. How to display image with javascript? You want your image outside of your .js file. You can add a class within the function of the linked solution which will create that class with the element. From there you can select the class by

.custom-class {
    width: 100%;
    height: 100%;
    etc...
}

edited May 23 '17 at 10:27

Community

1
1

answered Jan 27 '16 at 19:10

pwborodich

382
6
22

Add css styling to image used in Javascript

1 Answers1