How do I customize different markers CSS with Google Maps API?

Question

I'd like to do this: http://bl.ocks.org/amenadiel/f4e5bd78b214ff081254

In the example, markerLayer overrides ALL the markers on the map, and I'd only like it to apply to particular markers.

var myoverlay = new google.maps.OverlayView();
myoverlay.draw = function() {
  //this assigns an id to the markerlayer Pane, so it can be referenced by CSS
  this.getPanes().markerLayer.id = 'markerLayer';
};
myoverlay.setMap(map);

<!DOCTYPE html>
<html>

<head>
  <title>Simple Map</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <style>
    html,
    body,
    #map-canvas {
      height: 500px;
      width: 960px;
      margin: 0px;
      padding: 0px
    }
    #markerLayer img {
      border: 2px solid red !important;
      width: 85% !important;
      height: 90% !important;
      border-radius: 5px;
    }
  </style>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
  <script>
    var map;

    function initialize() {
      var mapOptions = {
        zoom: 9,
        center: new google.maps.LatLng(40.6, -74)
      };
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

      // I create 3 markers using http://ruralshores.com/assets/marker-icon.png as icon
      var myIcon = 'http://ruralshores.com/assets/marker-icon.png';
      var marker1 = new google.maps.Marker({
        position: {
          lat: 40.8,
          lng: -74
        },
        map: map,
        icon: myIcon,
        optimized: false
      });
      var marker2 = new google.maps.Marker({
        position: {
          lat: 40.6,
          lng: -74.5
        },
        map: map,
        icon: myIcon,
        optimized: false
      });
      var marker3 = new google.maps.Marker({
        position: {
          lat: 40.5,
          lng: -74.3
        },
        map: map,
        icon: myIcon,
        optimized: false
      });

      // I create an OverlayView, and set it to add the "markerLayer" class to the markerLayer DIV
      var myoverlay = new google.maps.OverlayView();
      myoverlay.draw = function() {
        this.getPanes().markerLayer.id = 'markerLayer';
      };
      myoverlay.setMap(map);

    }


    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</head>

<body>
  <div id="map-canvas"></div>
</body>

</html>

It seems that using the js-rich-markers library is the best way forward for this kind of thing, makes it easier and 'targetable' for each marker.

Here's the link: https://libraries.io/bower/js-rich-marker

Also for anyone looking for how to operate the js-rich-marker library, this question has a neat answer: Animate Google API Map Marker with CSS?

score 1 · Accepted Answer · answered Jan 20 '17 at 19:47

You just need to create a "regular" marker, like the third in my example:

var marker3 = new google.maps.Marker({
    position: {
          lat: 40.5,
          lng: -74.3
    },
    map: map,
    optimized: true // This will NOT draw the marker in the custom `draw` function
});

<!DOCTYPE html>
<html>

<head>
  <title>Simple Map</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <style>
    html,
    body,
    #map-canvas {
      height: 500px;
      width: 960px;
      margin: 0px;
      padding: 0px
    }
    #markerLayer img {
      border: 2px solid red !important;
      width: 85% !important;
      height: 90% !important;
      border-radius: 5px;
    }
  </style>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
  <script>
    var map;

    function initialize() {
      var mapOptions = {
        zoom: 9,
        center: new google.maps.LatLng(40.6, -74)
      };
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

      // I create 3 markers using http://ruralshores.com/assets/marker-icon.png as icon
      var myIcon = 'http://ruralshores.com/assets/marker-icon.png';
      var marker1 = new google.maps.Marker({
        position: {
          lat: 40.8,
          lng: -74
        },
        map: map,
        icon: myIcon,
        optimized: false
      });
      var marker2 = new google.maps.Marker({
        position: {
          lat: 40.6,
          lng: -74.5
        },
        map: map,
        icon: myIcon,
        optimized: false
      });
      var marker3 = new google.maps.Marker({
        position: {
          lat: 40.5,
          lng: -74.3
        },
        map: map,
        optimized: true
      });

      // I create an OverlayView, and set it to add the "markerLayer" class to the markerLayer DIV
      var myoverlay = new google.maps.OverlayView();
      myoverlay.draw = function() {
        this.getPanes().markerLayer.id = 'markerLayer';
      };
      myoverlay.setMap(map);

    }


    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</head>

<body>
  <div id="map-canvas"></div>
</body>

</html>

How do I customize different markers CSS with Google Maps API?

1 Answers1