Custom Maps
Control options and customization of the Google Maps colors, just 1,7 KB.
Install
yarn add cmapsAfter 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 startDisclaimer
In the example folder has an demonstration of everything working if necessary :)