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 { ... }

Explicit 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.