Socket
Socket
Sign inDemoInstall

map-icons

Package Overview
Dependencies
0
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    map-icons

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


Version published
Weekly downloads
314
decreased by-22.66%
Maintainers
1
Install size
647 kB
Created
Weekly downloads
 

Readme

Source

Map Icons

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 dynamic with control over shape, color, size, and icon easily changed using options in the marker object as well as simple SVG Notation and CSS.

Quick start

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

  • Download the latest release.
  • Clone the repo: git clone https://github.com/scottdejonge/map-icons.git.

##Documentation

http://map-icons.com

Updates

Keep track development updates by following @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.

Creators

Scott de Jonge

##Usage Map Icons extends the Google Maps 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.

<span class="map-icon map-icon-point-of-interest"></span>

###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 Marker rather than google.maps.Marker in order for the functionality added by map_icon_label to work.

var marker = new Marker({
	map: map,
	position: new google.maps.LatLng(-27.46577, 153.02303),
	icon: {
		path: SQUARE_PIN,
		fillColor: '#00CCBB',
		fillOpacity: 1,
		strokeColor: '',
		strokeWeight: 0
	},
	map_icon_label: '<span class="map-icon map-icon-point-of-interest"></span>'
});

##License ###Font License

Applies to font files inside: dist directory.

Map Icons licensed under SIL OFL 1.1

###Code License

Applies to code inside: dist directory.

Code licensed under MIT License

###Documentation License

Applies to files not a part of other licenses.

Documentation licensed under CC BY 3.0

Keywords

FAQs

Last updated on 10 May 2016

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc