@dtcmedia/dtcmedia-maps

    2.1.1 • Public • Published

    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/@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
    

    Install

    npm i @dtcmedia/dtcmedia-maps

    DownloadsWeekly Downloads

    206

    Version

    2.1.1

    License

    ISC

    Unpacked Size

    139 kB

    Total Files

    4

    Last publish

    Collaborators

    • danny_dtcmedia
    • dtc_media