material-design-markers
v1.2.1
Published
📌 Google Maps Marker compatible Material Design icons
Downloads
4
Maintainers
Readme
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