dtcmedia-maps
A custom web component for maps build with Vuejs.
Features include:
- Single or multiple markers
- Choice between static and dynamic map
- Custom markers
- Information windows
- Disabling/enabling the interface
- Disabling/enabling scrolling
- Lazy loading when in viewport
- 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/@dtcmedia/dtcmedia-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