@dtcmedia/dtcmedia-gmaps v1.1.4

dtcmedia-gmaps

A custom web component for Google Maps build with Vuejs.

Features include: 1. Single or multiple markers 2. Custom markers 3. Information windows 4. Disabling/enabling the interface 5. Disabling/enabling scrolling 6. Lazy loading when in viewport

Usage in production

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

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

or load it directly from unpkg

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

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

<dtcmedia-gmaps 
  api-key="xxx...xxx"
  places='[{}, {}]'
  zoom="14"
  height="400px"
  marker="http://maps.google.com/mapfiles/kml/paddle/red-circle.png"
  disable-interface="false"
  enable-scroll="true">
</dtcmedia-gmaps>

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
}

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

Image url with a custom marker icon

disable-interface | boolean = false

Enable/disable the user interface

enable-scroll | boolean = true

Enable/disable the use of the scroll wheel