Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/scottdejonge/map-icons

An icon font for use with Google Maps API and Google Places API using SVG markers and icon labels
https://github.com/scottdejonge/map-icons

Last synced: 2 months ago
JSON representation

An icon font for use with Google Maps API and Google Places API using SVG markers and icon labels

Host: GitHub
URL: https://github.com/scottdejonge/map-icons
Owner: scottdejonge
License: mit
Created: 2013-08-07T06:48:00.000Z (almost 11 years ago)
Default Branch: master
Last Pushed: 2024-02-23T09:13:30.000Z (4 months ago)
Last Synced: 2024-03-26T06:00:57.015Z (3 months ago)
Language: HTML
Homepage: http://map-icons.com/
Size: 2.9 MB
Stars: 1,041
Watchers: 45
Forks: 198
Open Issues: 23
Metadata Files:
- Readme: README.md
- License: LICENSE

Lists

awesome-fonts - Map Icons - Font for use with Google Maps API and Google Places API using SVG markers and icon labels (Iconic fonts)
awesome-stars - map-icons - An icon font for use with Google Maps API and Google Places API using SVG markers and icon labels (HTML)
awesome-stars - map-icons
awesome-stars - scottdejonge/map-icons - `★1047` An icon font for use with Google Maps API and Google Places API using SVG markers and icon labels (HTML)

README

        Map Icons

=========

## Map Icons is deprecated [read the thread](https://github.com/scottdejonge/map-icons/issues/60)

Map Icons is an icon font for use with Google Maps API and Google Places API using SVG markers and icon labels

Map Icons makes [Google Maps Markers](https://developers.google.com/maps/documentation/javascript/reference#Marker) dynamic with control over shape, color, size, and icon easily changed using options in the marker object as well as simple [SVG Notation](http://www.w3.org/TR/SVG/paths.html#PathData) and CSS.

## Quick start

There are three quick start ways to download Map Icons available:

- [Download the latest release](https://github.com/scottdejonge/map-icons/archive/master.zip).

- Clone the repo: `git clone https://github.com/scottdejonge/map-icons.git`.

## Documentation

## Updates

Keep track development updates by following [@map_icons](https://twitter.com/map_icons) on Twitter.

## Versioning

For transparency into our release cycle and in striving to maintain backward compatibility, Map Icons is maintained under [the Semantic Versioning guidelines](http://semver.org/).

## Creators

**Scott de Jonge**

- Twitter: [@scottdejonge](https://twitter.com/scottdejonge)

- Github: [@scottdejonge](https://github.com/scottdejonge)

## Usage

Map Icons extends the [Google Maps Marker](https://developers.google.com/maps/documentation/javascript/reference#Marker) Object to enable either an image or SVG marker to be used with the icon placed on top as a label.

### Include

Include the fonts in the `dist/font` directory as well as the `dist/css/map-icons.css` stylesheet to use icons in markup as an icon font.

To use the icons with Google Maps include `dist/js/map-icons.js`

### Classes

Icon class names are to be used with the `map-icon` class prefix.

```



```

### Styling the Icon

Styles to icons can be applied with the `.map-icon` CSS selector.

```

.map-icon {

	...

}

```

Explict styles to icons being used on a Google Map should be applied with `.map-icon-label .map-icon` CSS selector.

```

.map-icon-label .map-icon {

	font-size: 24px;

	color: #FFFFFF;

	line-height: 48px;

	text-align: center;

	white-space: nowrap;

}

```

### Creating a Marker

Markers are created just like a normal Google Maps Marker, however, the class is extended for the `map_icon_label` property to add in markup for marker labels.

**Note:** You should be creating an instance of `mapIcons.Marker` rather than `google.maps.Marker` in order for the functionality added by `map_icon_label` to work.

```

var marker = new mapIcons.Marker({

	map: map,

	position: new google.maps.LatLng(-27.46577, 153.02303),

	icon: {

		path: mapIcons.shapes.SQUARE_PIN,

		fillColor: '#00CCBB',

		fillOpacity: 1,

		strokeColor: '',

		strokeWeight: 0

	},

	map_icon_label: ''

});

```

## License

### Font License

Applies to font files inside: `dist` directory.

Map Icons licensed under [SIL OFL 1.1](http://scripts.sil.org/OFL)

### Code License

Applies to code inside: `dist` directory.

Code licensed under [MIT License](http://opensource.org/licenses/mit-license.html)

### Documentation License

Applies to files not a part of other licenses.

Documentation licensed under [CC BY 3.0](http://creativecommons.org/licenses/by/3.0/)