Add CSS Styled Marker to Google Maps

Google map custom marker with css rounded corner

As of version 3.17, the google.maps.Marker objects exists in the markerLayer pane which is just a fancy name for a div.

To get a reference to the markerLayer you need to create an OverlayView Object. Now, this object is a bit abstract. You need to implement a draw function for it to work. For example, open the basic example in a new tab and paste this to the console

var overlay = new google.maps.OverlayView();
overlay.draw=function() {};

overlay.setMap(map);

overlay.getPanes();

it returns:

{
    floatPane: div
    floatShadow: div
    mapPane: div
    markerLayer: div
    overlayImage: div
    overlayLayer: div
    overlayMouseTarget: div
    overlayShadow: div
}

Thay markerLayer is a div which contains the markers. If I create your marker using a given icon image,

var marker = new google.maps.Marker({
                position: map.getCenter(),
                map: map,                          
                icon: 'http://ruralshores.com/assets/marker-icon.png',
                optimized:false
             });

My markerLayer will be:

Where the selected div (the one with z-index 103) is the markerLayer.

If you wanted to access the markerLayer programatically, you could add a "markerLayer" class to it after getting its reference with the getPanes method. I guess that every image inside the markerLayer is a marker, so you could style it at will.

TL/DR : you can style it, provided you went through all the trouble of finding the DOM reference to your marker.

Edit: I made a bl.ocks for you to check

How to add CSS-Class to a GoogleMaps marker?

The DOMNode that contains the image used for the marker isn't available via the API.

Furthermore, by default the markers will not be single DOMNodes, they will be drawn via canvas.

But the Marker-Image may be accessible via CSS when you use a unique icon-URL for each Marker.

---

Sample(using jQuery):

<style type="text/css">
img[src^='http://www.google.com/mapfiles/marker.png?i=']{
  opacity: 0.5
}
</style>
<script  type="text/javascript">
      function initialize() {
        var index=0;
        var mapOptions = {
          zoom: 14,
          center: new google.maps.LatLng(52.5498783, 13.425209099999961),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);

        marker=new google.maps.Marker({position:map.getCenter(),
                 map:map,optimized:false,
                 icon:'http://www.google.com/mapfiles/marker.png?i='+(index++)});

        google.maps.event.addListener(marker,'mouseover',function(){
          $('img[src="'+this.icon+'"]').stop().animate({opacity:1});
        });

        google.maps.event.addListener(marker,'mouseout',function(){
          $('img[src="'+this.icon+'"]').stop().animate({opacity:.5});
        });
      }

      google.maps.event.addDomListener(window, 'load', initialize);

</script> 

---

How ist works:

The sample uses a single image as Marker-Icon (http://www.google.com/mapfiles/marker.png)

via CSS we apply a opacity. You may notice that there is a i-parameter inside the URL. This parameter will be used to make the img-src unique.

I use a variable which will be incremented to get a unique img-src:

var index=0;

//a few lines later:
icon:'http://www.google.com/mapfiles/marker.png?i='+(index++)

Now you'll be able to select the <img/>-element used for the marker, e.g. onmouseover/onmouseout via a attribute-selector.

When you wan't to use vanilla javascript you may use document.querySelector to access the image.

Note: you must set the optimized-option of the marker to false (this will force the API to render the marker as a single element)

Demo: http://jsfiddle.net/doktormolle/nBsh4/

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

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>

Custom Google Maps marker HTML

Assuming you're using the google maps API, you can use this code.

function initMap() {
  // store latitude and longitude for map and marker
  var myLatLng = {lat: -25.363, lng: 131.044};

  // create a map
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng
  });

  // create a custom marker
  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!',
    icon: 'my-image.png'
  });
}

This code created a myLatLng variable which stores the Latitude and Longtitude, it then creates a map object. I assume you already have that setup if you have a map in your site.

The code then declared a marker, using the same latitude and longitude at the map via the position property, setting a title via the title property and choosing the image that will be used on the marker via the icon property.

This function was initially lifted straight from the documentation found at: https://developers.google.com/maps/documentation/javascript/markers

---

Related Topics