Can I add css style to javascript elements?

Question

I'm pulling a user's location and displaying it on a map with an icon I have saved. The icon I have saved is too big, so I'm trying to resize it with CSS but I'm not sure how to do that loading the svg into the js file. I'm not sure if I should load the svg file in the html document or in the js file like I have.

I tried loading the icon into the html file, give it an id, and use .getElementById to add it into the js file and then just add css styling in the css file but for some reason that didn't work. I'm not sure if I did something incorrectly doing it that way, though.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 12,
    disableDefaultUI: true
  });

  // User Location Icon
  var userLocationIcon = '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: pos,
        map: map,
        icon: userLocationIcon
      });

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

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(browserHasGeolocation ?
                        'Error: The Geolocation service failed.' :
                        'Error: Your browser doesn\'t support geolocation.');
}

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#map {
	height: 100%;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Geolocation</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/app.css">
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript" src="js/app.js"></script>
    </script>
  </body>
</html>

is the img folder inside js? If not you might have to change it to /img... — DigitalDouble
– DigitalDouble, Commented Jan 28, 2016 at 1:54
@DigitalDouble the code above works and the icon loads well....sorry for not specifying! I would just like to add css styling to that image because it's too large and I was unsure the best way to do that — Kody R.
– Kody R., Commented Jan 28, 2016 at 2:08

DigitalDouble · Accepted Answer · 2016-01-28 02:28:36Z

2

I believe it's unsupported using the basic API as the Map is in an iframe, whose elements do not inherit your CSS by default.

However here's a solution I found which uses an external library.

var marker = new MarkerWithLabel({
    position: myMap.getCenter(),
    icon: {
        path: google.maps.SymbolPath.CIRCLE,
        scale: 0, //tamaño 0
    },
    map: myMap,
    draggable: true,
    labelAnchor: new google.maps.Point(10, 10),
    labelClass: "label", // the CSS class for the label
});

http://codepen.io/diana_aceves/pen/HjKdx

There's also RichMarker.

Both plugins can be found here: http://googlemaps.github.io/libraries.html

Unfortunately for you though, github's down.

answered Jan 28, 2016 at 2:28

DigitalDouble

1,77814 silver badges27 bronze badges

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

Collectives™ on Stack Overflow

Can I add css style to javascript elements?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related