ig_markerfactory

Google Maps 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

run

npm install
jspm install
serve .

Open your browser at http://localhost:3000/ 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

Install it with jspm like so:

jspm install npm:ig_markerfactory

Or, if for some reason NPM is down:

jspm install github:huasofoundries/ig_markerfactory

If you don't use jspm, you can as well clone this repo and copy dist/markerfactory.js to your project.

Usage

This is a simple example using AMD loading. It assumes you're using a font that's already present in the DOM.

define(['huasofoundries/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