Material design markers

📌 Google Maps Marker compatible Material Design icons

Markers in the Google Maps Javascript API can be given an SVG in the url attribute with data:image, which allows the styles of the SVG to be changed on the fly. For example:

new google.maps.Marker({
  position: { lat, lng },
  icon: {
    url: 'data:image/svg+xml,<svg fill="#0F9" ...',
    scaledSize: new google.maps.Size(32, 32)
  }
});

So this library is a small helper that loads a material design icon SVG by name and injects the styles you need on to the SVG root.

Usage

import loadMarker from 'material-design-markers';
 
loadMarker({ name: 'bookmark', publicPath: '/img/material-icons' })
  .then(markerUrl => {
    new google.maps.Marker({
      icon: {
        url: markerUrl,
        scaledSize: new google.maps.Size(32, 32)
      }
    });
  });

Available options

name

The name of the material design icon. Required.

size

The size of icon to use. Defaults to 48.

publicPath

The public path of the SVG. It can be relative like in the example above or an absolute URL. The icon name is added on the end of it in the format ic_{name}_{size}px.svg.

svgString

If you app has already loaded the SVG file, or you want to load the SVG string yourself, specify it here and the loadMarker helper will use this instead of making a request.

fill, stroke

Any other attributes passed in to loadMarker like fill or stroke are injected into the SVG string.

Build icon folder

This repo has a build script that can take the latest npm version of material-design-icons and flatten the files into one output directory.

Command	Description
-o "output_dir"	Output directory
-s 48	Optionally, the size of the icons to copy

It runs with the following command because it's not worth saving this script to node_modules $PATH as a global command.

$ node node_modules/material-icon-markers/build.js -o "./output_dir" -s 48