map-icons
v3.0.3
Published
An icon font for use with Google Maps API and Google Places API using SVG markers and icon labels
Downloads
914
Readme
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
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
- Twitter: @scottdejonge
- Github: @scottdejonge
##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