IG MarkerFactory
This is a zero dependencies library that uses a canvas element to generate valid google.maps.Marker Icons from graphic-fonts, such as Font-Awesome, Material-Icons or Fontello.
Why?
Because some libraries, like google maps API, expect its Markers to have an valid google.maps.Icon to be shown on the map:
var mymarker = new google.maps.Marker({
position: myMap.getCenter(),
map: myMap
});
mymarker.setIcon({
url: '/img/some_image.png',
size: new google.maps.Size(54 , 48 ),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(27 , 24 )
});
(Actually, it would be enough to set)
mymarker.setIcon('/img/some_image.png');
But still, you need an image. You'll need to host every icon and color combination thay might ever be.
With MarkerFactory, you generate those icons on the fly.
Example
See the example running at http://huasofoundries.github.io/ig_markerfactory/
and you'll be presented with three graphical fonts variations, both in their CSS render as well as their PNG rendering generated by IG_Markerfactory.
Feel free to play with examples/example.js
to see what happens when you try different colors, icons and scales.
Installation
Including it with a script tag
Include this package in your HTML file directly with a script tag using unpkg or jsdelivr
<script src="https://unpkg.com/ig_markerfactory/dist/markerfactory.min.js"></script>
or
<script src="https://cdn.jsdelivr.net/npm/ig_markerfactory/dist/markerfactory.min.js"></script>
Install it with jspm like so:
jspm install npm:ig_markerfactory
Usage
This is a simple example using AMD loading. It assumes you're using a font that's already present in the DOM.
define(['ig_markerfactory'], function(MarkerFactory) {
var myIcon = MarkerFactory.autoIcon({
label: 'f1b9',
font: 'FontAwesome',
color: '#CC0000',
fontsize: 20
});
console.log(myIcon);
});
You will see that myIcon
object is a valid google.maps.Icon object,
but of course you might want the image for other purposes so you can just use myIcon.url
which is a data URI