Map Icons

Overview

Map Icons enhances Google Maps with dynamic SVG markers and labels. Key features include:

• Shape, Color, and Size Control: Easily customize markers through SVG notation and CSS.
• Google Maps Integration: Compatible with Google Maps API and Google Places API.
• Flexible Usage: Supports both image and SVG markers.

Installation

Three ways to get Map Icons:

1. Download: Obtain the latest release.
2. Clone: Use git clone https://github.com/scottdejonge/map-icons.git.

Usage

• Include Fonts and CSS: Add files from the dist/font directory and dist/css/map-icons.css.
• Include JavaScript: Add dist/js/map-icons.js for functionality.

Applying Icons

Use the map-icon class prefix with HTML elements:

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

Styling

Apply styles using CSS selectors:

• .map-icon: General icon styling.
• .map-icon-label .map-icon: Specific styling for labels on Google Maps.

Marker Example

Create markers with extended functionality:

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: '<span class="map-icon map-icon-point-of-interest"></span>' });

Licensing

• Fonts and Icons: Licensed under SIL OFL 1.1.
• Code: Licensed under MIT License.
• Documentation: Licensed under CC BY 3.0.