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 and 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 be.

With MarkerFactory, you generate those icons on the fly.

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:

	define(['huasofoundries/ig_markerfactory'], function(MarkerFactory) {

		var myIcon = MarkerFactory.autoIcon({
			label: 'f1b9',
			font: 'fontawesome-webfont',
			color: '#CC0000',
			fontsize: 20
			});

		console.log(myIcon);

	});

The 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

Example

run

npm install
jspm install
serve .

and open your browser at http://localhost:3000/example.html