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.

### Made for Google

Plug in and play immediately with Google Maps and Google Places.

### CSS Control

Easily style icon color, size, shadow, and anything that's possible with CSS.

### Infinite Scalability

Scalable vector graphics means every icon looks awesome at any size.

### Retina Ready

Vector icons look sharp on any display at any resolution.

### Over 175 Icons and Counting

One font, lots and lots of icons to choose from.

### Accessibility Icons

Icons for accessibility using an accessible web format, icon fonts.

## Icons

### General

- map-icon-art-gallery
- map-icon-campground
- map-icon-bank
- map-icon-hair-care
- map-icon-gym
- map-icon-point-of-interest
- map-icon-post-box
- map-icon-post-office
- map-icon-university
- map-icon-beauty-salon
- map-icon-atm
- map-icon-rv-park
- map-icon-school
- map-icon-library
- map-icon-spa
- map-icon-route
- map-icon-postal-code
- map-icon-stadium
- map-icon-postal-code-prefix
- map-icon-museum
- map-icon-finance
- map-icon-natural-feature
- map-icon-funeral-home
- map-icon-cemetery
- map-icon-park
- map-icon-lodging

### Toilets

- map-icon-female
- map-icon-male
- map-icon-unisex
- map-icon-toilet

### Food

- map-icon-bakery
- map-icon-cafe
- map-icon-restaurant
- map-icon-food

### Stores

- map-icon-liquor-store
- map-icon-bicycle-store
- map-icon-pet-store
- map-icon-hardware-store
- map-icon-book-store
- map-icon-furniture-store
- map-icon-department-store
- map-icon-electronics-store
- map-icon-jewelry-store
- map-icon-clothing-store
- map-icon-convenience-store
- map-icon-store
- map-icon-shopping-mall
- map-icon-movie-rental
- map-icon-grocery-or-supermarket
- map-icon-florist
- map-icon-laundry

### Activities

#### Land Activities

- map-icon-abseiling
- map-icon-archery
- map-icon-baseball
- map-icon-bicycling
- map-icon-climbing
- map-icon-golf
- map-icon-hang-gliding
- map-icon-horse-riding
- map-icon-inline-skating
- map-icon-motobike-trail
- map-icon-playground
- map-icon-skateboarding
- map-icon-tennis
- map-icon-trail-walking
- map-icon-viewing
- map-icon-walking

#### Water Activities

- map-icon-boating
- map-icon-boat-ramp
- map-icon-boat-tour
- map-icon-canoe
- map-icon-diving
- map-icon-fishing
- map-icon-fishing-pier
- map-icon-fish-cleaning
- map-icon-jet-skiing
- map-icon-kayaking
- map-icon-marina
- map-icon-rafting
- map-icon-sailing
- map-icon-scuba-diving
- map-icon-surfing
- map-icon-swimming
- map-icon-waterskiing
- map-icon-whale-watching
- map-icon-wind-surfing

#### Winter Activities

- map-icon-chairlift
- map-icon-cross-country-skiing
- map-icon-ice-fishing
- map-icon-ice-skating
- map-icon-ski-jumping
- map-icon-skiing
- map-icon-sledding
- map-icon-snow-shoeing
- map-icon-snow
- map-icon-snowboarding
- map-icon-snowmobile

### Transport

- map-icon-train-station
- map-icon-subway-station
- map-icon-bus-station
- map-icon-transit-station
- map-icon-parking
- map-icon-gas-station
- map-icon-car-rental
- map-icon-car-dealer
- map-icon-car-repair
- map-icon-car-wash
- map-icon-airport
- map-icon-taxi-stand

### Health

- map-icon-health
- map-icon-dentist
- map-icon-doctor
- map-icon-hospital
- map-icon-pharmacy
- map-icon-physiotherapist
- map-icon-veterinary-care

### Entertainment

- map-icon-bar
- map-icon-amusement-park
- map-icon-aquarium
- map-icon-casino
- map-icon-movie-theater
- map-icon-night-club
- map-icon-zoo
- map-icon-bowling-alley

### Services

- map-icon-storage
- map-icon-electrician
- map-icon-moving-company
- map-icon-painter
- map-icon-plumber
- map-icon-roofing-contractor
- map-icon-general-contractor
- map-icon-locksmith

### Business

- map-icon-insurance-agency
- map-icon-lawyer
- map-icon-real-estate-agency
- map-icon-travel-agency
- map-icon-accounting

### Government

- map-icon-courthouse
- map-icon-political
- map-icon-local-government
- map-icon-embassy
- map-icon-city-hall
- map-icon-fire-station
- map-icon-police

### Religious

- map-icon-place-of-worship
- map-icon-church
- map-icon-mosque
- map-icon-synagogue
- map-icon-hindu-temple

### Accessibility

- map-icon-wheelchair
- map-icon-closed-captioning
- map-icon-open-captioning
- map-icon-sign-language
- map-icon-volume-control-telephone
- map-icon-low-vision-access
- map-icon-braille
- map-icon-audio-description
- map-icon-assistive-listening-system

### User Interface

- map-icon-search
- map-icon-location-arrow
- map-icon-zoom-out
- map-icon-zoom-out-alt
- map-icon-zoom-in
- map-icon-zoom-in-alt
- map-icon-crosshairs
- map-icon-compass
- map-icon-expand
- map-icon-fullscreen

### Marker Icons

- map-icon-map-pin
- map-icon-square-pin
- map-icon-route-pin
- map-icon-shield
- map-icon-circle
- map-icon-square-rounded
- map-icon-square

## Markers

#### MAP_PIN

    M0-48c-9.8 0-17.7 7.8-17.7 17.4 0 15.5 17.7 30.6 17.7 30.6s17.7-15.4 17.7-30.6c0-9.6-7.9-17.4-17.7-17.4z

#### SQUARE_PIN

    M22-48h-44v43h16l6 5 6-5h16z

#### SHIELD

    M18.8-31.8c.3-3.4 1.3-6.6 3.2-9.5l-7-6.7c-2.2 1.8-4.8 2.8-7.6 3-2.6.2-5.1-.2-7.5-1.4-2.4 1.1-4.9 1.6-7.5 1.4-2.7-.2-5.1-1.1-7.3-2.7l-7.1 6.7c1.7 2.9 2.7 6 2.9 9.2.1 1.5-.3 3.5-1.3 6.1-.5 1.5-.9 2.7-1.2 3.8-.2 1-.4 1.9-.5 2.5 0 2.8.8 5.3 2.5 7.5 1.3 1.6 3.5 3.4 6.5 5.4 3.3 1.6 5.8 2.6 7.6 3.1.5.2 1 .4 1.5.7l1.5.6c1.2.7 2 1.4 2.4 2.1.5-.8 1.3-1.5 2.4-2.1.7-.3 1.3-.5 1.9-.8.5-.2.9-.4 1.1-.5.4-.1.9-.3 1.5-.6.6-.2 1.3-.5 2.2-.8 1.7-.6 3-1.1 3.8-1.6 2.9-2 5.1-3.8 6.4-5.3 1.7-2.2 2.6-4.8 2.5-7.6-.1-1.3-.7-3.3-1.7-6.1-.9-2.8-1.3-4.9-1.2-6.4z

#### ROUTE

    M24-28.3c-.2-13.3-7.9-18.5-8.3-18.7l-1.2-.8-1.2.8c-2 1.4-4.1 2-6.1 2-3.4 0-5.8-1.9-5.9-1.9l-1.3-1.1-1.3 1.1c-.1.1-2.5 1.9-5.9 1.9-2.1 0-4.1-.7-6.1-2l-1.2-.8-1.2.8c-.8.6-8 5.9-8.2 18.7-.2 1.1 2.9 22.2 23.9 28.3 22.9-6.7 24.1-26.9 24-28.3z

#### SQUARE

    M-24-48h48v48h-48z

#### SQUARE_ROUNDED

    M24-8c0 4.4-3.6 8-8 8h-32c-4.4 0-8-3.6-8-8v-32c0-4.4 3.6-8 8-8h32c4.4 0 8 3.6 8 8v32z

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

    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