dtcmedia-maps

A custom web component for maps build with Vuejs.

Features include:

1. Single or multiple markers
2. Choice between static and dynamic map
3. Custom markers
4. Information windows
5. Disabling/enabling the interface
6. Disabling/enabling scrolling
7. Lazy loading when in viewport
8. Custom map styling

Usage in production

Include the custom web component by including the following scripts in your website:

<script src="./dist/dtcmedia-maps.js"></script>

or load it directly from unpkg

<script src="https://unpkg.com/@powerkraut/maps/dist/dtcmedia-maps.js"></script>

After that you can use the custom web component in your website like this

<dtcmedia-maps 
  api-key="xxx...xxx"
  places='[{}, {}]'
  map-type="dynamic"
  zoom="14"
  height="400px"
  marker='{"path":"m22 19.6c-2.7 0-4.9-2.3-4.9-5.1s2.2-5.1 4.9-5.1 4.9 2.3 4.9 5.1-2.2 5.1-4.9 5.1m0-19.6c-7.7 0-14 6.5-14 14.6 0 3.3 2.2 8.7 6.6 16.1 3.2 5.4 6.4 10 6.5 10l1 1.3 1-1.3s3.3-4.6 6.5-10c4.4-7.4 6.6-12.8 6.6-16.1-.2-8.1-6.5-14.6-14.2-14.6", "fillColor":"#f00", "fillOpacity":1, "strokeWeight":0, "anchor":{"x":14, "y": 42}}'
  disable-interface="false"
  enable-scroll="true"
  map-style='[{"stylers": [{ "saturation": -90 }]}]'>
</dtcmedia-maps>

Properties

api-key | string = null

Your Google Maps Javascript API key. To obtain an API key, see https://developers.google.com/maps/documentation/javascript/get-api-key.

places | string = '[{"title": "DTC Media", "info": "Text shown in info window", "lat": 51.9482098, "lng": 6.2780542}]',

A string that can be parsed to JSON containing all the places information

Possible options

{
  "title": string,
  "info": string,
  "lat": number,
  "lng": number
}

map-type | string = "dynamic"

The type of the map that will be loaded.

Possible options

dynamic | static

zoom | number = 14

A zoom level to set the map to. Only works with a single marker.

height | string = "400px"

A height in pixels to render the map at.

marker | string = null, object = {}

Image url with a custom marker icon or an object with an SVG.

Possible options

marker='http://maps.google.com/mapfiles/kml/paddle/red-circle.png'

marker='{"path": "m22 19.6c-2.7 0-4.9-2.3-4.9-5.1s2.2-5.1 4.9-5.1 4.9 2.3 4.9 5.1-2.2 5.1-4.9 5.1m0-19.6c-7.7 0-14 6.5-14 14.6 0 3.3 2.2 8.7 6.6 16.1 3.2 5.4 6.4 10 6.5 10l1 1.3 1-1.3s3.3-4.6 6.5-10c4.4-7.4 6.6-12.8 6.6-16.1-.2-8.1-6.5-14.6-14.2-14.6", "fillColor": "#000", "fillOpacity": 1, "anchor": { "x":13, "y": 42}}'

Documentation: https://developers.google.com/maps/documentation/javascript/symbols

disable-interface | boolean = false

Enable/disable the user interface

enable-scroll | boolean = true

Enable/disable the use of the scroll wheel

map-style | string = null,

Possibility to give the map some style settings. There's a difference between map styling for dynamic and static map types.

Possible options

map-type="dynamic": [{"stylers": [{ "saturation": -90 }]}, {"featureType": "road.highway", "elementType": "labels", "stylers": [{ "visibility": "off" }]}, {"featureType": "road.arterial", "elementType": "labels", "stylers": [{"visibility": "off" }]}, {"featureType": "road.local", "elementType": "labels", "stylers": [{ "visibility": "off" }]}, { "featureType": "landscape", "elementType": "labels", "stylers": [{ "visibility": "off" }]}]

map-type="static": feature:all|element:all|visibility:on|saturation:-90