Custom Maps

Control options and customization of the Google Maps colors, just 1,7 KB.

Install

yarn add cmaps

After installing, include the scripts in html.

<script src="node_modules/cmaps/dist/cMaps.min.js"></script>

Wrapper map need be something like:

<div id="map"></div>

Starting map

var map = new cMaps(options);

Options

Option | Type | Description | Example | Required ------ | ---- | ----------- | -----------|------------ wrapperId | string | Container id map | 'map' | true Key | string | Google API Key | 'api_key' | true pinLat | number | pin latitude | -23.562353 | true pinLng | number | pin latitude | -46.503113 | true mapLat | number | map latitude | -23.562353 | true mapLng | number | map latitude | -46.503113 | true styles | array | google styles | [{},{}] | true name | string | Map name | 'cMaps' | false icon | string | url to pin the way | 'imgs/pin.png' | false zoom | number | Initial zoom map | 16 | false zoomControl | boolean | Manual zoom control | true | false scrollwheel | boolean | Mouse scroll for zoom | false | false mapTypeControl | boolean | Choose the map type in the upper left corner | true | false draggable | boolean | If this option is false the map can not be dragged | true | false streetView | boolean | Control street view | false | false

Usage

// *Example* Code that was exported from Styled Maps Wizard or Snazzy Maps
var styles = [{"featureType":"all","elementType":"labels","stylers":[{"visibility":"on"}]} ...];

var map = new cMaps({
  'name': 'cMap',
  'wrapperId':'map',
  'pinLat': -23.562353,
  'pinLng': -46.503113,
  'mapLat': -23.562353,
  'mapLng': -46.503113
  'styles': styles,
  'key': 'YOUR_API_KEY'
});

Style

Use the Styled Maps Wizard or Snazzy Maps to export a JSON with all possible options and include as a parameter to the cMap.

Example

You can see this example in localhost:8080, enter in example directory:

yarn start

Disclaimer

In the example folder has an demonstration of everything working if necessary :)

CMaps

Install / Use

README