cnx-public/vue-google-maps-community-fork
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add most of components and prepare for V1 Release

Browse Source
This commit is contained in:
Fawad Mirzad
2021-02-13 16:09:48 +01:00
parent 1a5cf0b075
commit decca38b67
47 changed files with 2556 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
.eslintignore Normal file
View File

24
.eslintrc.json Normal file
View File

@@ -0,0 +1,24 @@
{
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true
},
"extends": "standard",
"parserOptions": {
"sourceType": "module"
},
"rules": {
"comma-dangle": 0
},
"globals": {
"google": true
},
"plugins": [
"html"
],
"settings": {
"html/html-extensions": [".html", ".vue"]
}
}

44
README.md Normal file
View File

@@ -0,0 +1,44 @@
# Google maps Components for Vue.js 3
Set of mostly used Google Maps components for Vue.js.
#### Why this library exists?
We heavily use Google Maps in our projects, so I wanted to have a well maintained Google Maps library.
## Documentation
Checkout https://vue-map.netlify.app for a detailed documentation
## Installation
You can install it using npm
```
npm install -S @fawmi/vue-google-maps
```
## Basic usage
You need an API Key. Learn how to [get an Api key ](https://developers.google.com/maps/documentation/javascript/get-api-key).
##Configure Vue to use the Components
In your `main.js` or inside a Nuxt plugin:
```js
import { createApp } from 'vue'
import * as VueGoogleMaps from '@fawmi/vue-google-maps'
const app = createApp(App);
app.use(VueGoogleMaps, {
load: {
key: 'YOUR_API_KEY_COMES_HERE',
},
}).mount('#app')
```
## Use it anywhere in your components
```vue
<template>
<GmapMap
:center="{lat: 51.093048, lng: 6.842120}"
:zoom="7"
map-type-id="terrain"

8
build-copy.js Normal file
View File

@@ -0,0 +1,8 @@
/* copies the components to the dist directory */
require('shelljs/global')
cp('src/components/infoWindow.vue', 'dist/components/')
cp('src/components/map.vue', 'dist/components/')
cp('src/components/placeInput.vue', 'dist/components/')
cp('src/components/autocomplete.vue', 'dist/components/')
cp('src/components/streetViewPanorama.vue', 'dist/components/')

20
src/.babelrc Normal file
View File

@@ -0,0 +1,20 @@
{
"presets": [
[
"env",
{
"targets": {
"browsers": [
"last 2 versions",
"safari >= 7"
]
}
}
]
],
"plugins": [
"transform-object-rest-spread",
"transform-inline-environment-variables",
"minify-dead-code-elimination"
]
}

0
src/.main.js.swx Normal file
View File

11
src/components/autocomplete.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<input
ref="input"
v-bind="$attrs"
v-on="$attrs"
/>
</template>
<script>
export default (function (x) { return x.default || x })(require('./autocompleteImpl.js'))
</script>

71
src/components/autocompleteImpl.js Normal file
View File

@@ -0,0 +1,71 @@
import {bindProps, getPropsValues} from '../utils/bindProps.js'
import downArrowSimulator from '../utils/simulateArrowDown.js'
import {mappedPropsToVueProps} from './mapElementFactory'
const mappedProps = {
bounds: {
type: Object
},
componentRestrictions: {
type: Object,
// Do not bind -- must check for undefined
// in the property
noBind: true,
},
types: {
type: Array,
default: function () {
return []
}
},
}
const props = {
selectFirstOnEnter: {
required: false,
type: Boolean,
default: false
},
options: {
type: Object
}
}
export default {
mounted () {
this.$gmapApiPromiseLazy().then(() => {
if (this.selectFirstOnEnter) {
downArrowSimulator(this.$refs.input)
}
if (typeof (google.maps.places.Autocomplete) !== 'function') {
throw new Error('google.maps.places.Autocomplete is undefined. Did you add \'places\' to libraries when loading Google Maps?')
}
/* eslint-disable no-unused-vars */
const finalOptions = {
...getPropsValues(this, mappedProps),
...this.options
}
this.$autocomplete = new google.maps.places.Autocomplete(this.$refs.input, finalOptions)
bindProps(this, this.$autocomplete, mappedProps)
this.$watch('componentRestrictions', v => {
if (v !== undefined) {
this.$autocomplete.setComponentRestrictions(v)
}
})
// Not using `bindEvents` because we also want
// to return the result of `getPlace()`
this.$autocomplete.addListener('place_changed', () => {
this.$emit('place_changed', this.$autocomplete.getPlace())
})
})
},
props: {
...mappedPropsToVueProps(mappedProps),
...props
}
}

46
src/components/circle.js Normal file
View File

@@ -0,0 +1,46 @@
import mapElementFactory from './mapElementFactory'
const props = {
center: {
type: Object,
twoWay: true,
required: true
},
radius: {
type: Number,
twoWay: true
},
draggable: {
type: Boolean,
default: false,
},
editable: {
type: Boolean,
default: false,
},
options: {
type: Object,
twoWay: false
}
}
const events = [
'click',
'dblclick',
'drag',
'dragend',
'dragstart',
'mousedown',
'mousemove',
'mouseout',
'mouseover',
'mouseup',
'rightclick'
]
export default mapElementFactory({
mappedProps: props,
name: 'circle',
ctr: () => google.maps.Circle,
events,
})

114
src/components/cluster.vue Normal file
View File

@@ -0,0 +1,114 @@
<template>
<div><slot></slot></div>
</template>
<script>
import MarkerClusterer from 'marker-clusterer-plus'
import mapElementFactory from './mapElementFactory.js'
const props = {
maxZoom: {
type: Number,
twoWay: false
},
batchSizeIE: {
type: Number,
twoWay: false
},
calculator: {
type: Function,
twoWay: false
},
enableRetinaIcons: {
type: Boolean,
twoWay: false
},
gridSize: {
type: Number,
twoWay: false
},
ignoreHidden: {
type: Boolean,
twoWay: false
},
imageExtension: {
type: String,
twoWay: false
},
imagePath: {
type: String,
twoWay: false
},
imageSizes: {
type: Array,
twoWay: false
},
minimumClusterSize: {
type: Number,
twoWay: false
},
styles: {
type: Array,
twoWay: false
},
zoomOnClick: {
type: Boolean,
twoWay: false
}
}
const events = [
'click',
'rightclick',
'dblclick',
'drag',
'dragstart',
'dragend',
'mouseup',
'mousedown',
'mouseover',
'mouseout'
]
export default mapElementFactory({
mappedProps: props,
events,
name: 'cluster',
ctr: () => {
if (typeof MarkerClusterer === 'undefined') {
/* eslint-disable no-console */
console.error('MarkerClusterer is not installed! require() it or include it from https://cdnjs.cloudflare.com/ajax/libs/js-marker-clusterer/1.0.0/markerclusterer.js')
throw new Error('MarkerClusterer is not installed! require() it or include it from https://cdnjs.cloudflare.com/ajax/libs/js-marker-clusterer/1.0.0/markerclusterer.js')
}
return MarkerClusterer
},
ctrArgs: ({map, ...otherOptions}) => [map, [], otherOptions],
afterCreate (inst) {
const reinsertMarkers = () => {
const oldMarkers = inst.getMarkers()
inst.clearMarkers()
inst.addMarkers(oldMarkers)
}
for (let prop in props) {
if (props[prop].twoWay) {
this.$on(prop.toLowerCase() + '_changed', reinsertMarkers)
}
}
},
updated () {
if (this.$clusterObject) {
this.$clusterObject.repaint()
}
},
beforeUnmount () {
/* Performance optimization when destroying a large number of markers */
this.$children.forEach(marker => {
if (marker.$clusterObject === this.$clusterObject) {
marker.$clusterObject = null
}
})
if (this.$clusterObject) {
this.$clusterObject.clearMarkers()
}
},
})
</script>

14
src/components/infoWindow.vue Normal file
View File

@@ -0,0 +1,14 @@
/* vim: set softtabstop=2 shiftwidth=2 expandtab : */
<template>
<div>
<div ref="flyaway"> <!-- so named because it will fly away to another component -->
<slot>
</slot>
</div>
</div>
</template>
<script>
export default (function (x) { return x.default || x })(require('./infoWindowImpl.js'))
</script>

82
src/components/infoWindowImpl.js Normal file
View File

@@ -0,0 +1,82 @@
import mapElementFactory from './mapElementFactory.js'
const props = {
options: {
type: Object,
required: false,
default () {
return {}
}
},
position: {
type: Object,
twoWay: true,
},
zIndex: {
type: Number,
twoWay: true,
}
}
const events = [
'domready',
'closeclick',
'content_changed',
]
export default mapElementFactory({
mappedProps: props,
events,
name: 'infoWindow',
ctr: () => google.maps.InfoWindow,
props: {
opened: {
type: Boolean,
default: true,
},
},
inject: {
'$markerPromise': {
default: null,
}
},
mounted () {
const el = this.$refs.flyaway
el.parentNode.removeChild(el)
},
beforeCreate (options) {
options.content = this.$refs.flyaway
if (this.$markerPromise) {
delete options.position
return this.$markerPromise.then(mo => {
this.$markerObject = mo
return mo
})
}
},
methods: {
_openInfoWindow () {
if (this.opened) {
if (this.$markerObject !== null) {
this.$infoWindowObject.open(this.$map, this.$markerObject)
} else {
this.$infoWindowObject.open(this.$map)
}
} else {
this.$infoWindowObject.close()
}
},
},
afterCreate () {
this._openInfoWindow()
this.$watch('opened', () => {
this._openInfoWindow()
})
}
})

27
src/components/map.vue Normal file
View File

@@ -0,0 +1,27 @@
<template>
<div class="vue-map-container">
<div ref="vue-map" class="vue-map"></div>
<div class="vue-map-hidden">
<slot></slot>
</div>
<slot name="visible"></slot>
</div>
</template>
<script>
export default (function (x) { return x.default || x })(require('./mapImpl.js'))
</script>
<style lang="css">
.vue-map-container {
position: relative;
}
.vue-map-container .vue-map {
left: 0; right: 0; top: 0; bottom: 0;
position: absolute;
}
.vue-map-hidden {
display: none;
}
</style>

149
src/components/mapElementFactory.js Normal file
View File

@@ -0,0 +1,149 @@
import bindEvents from '../utils/bindEvents.js'
import {bindProps, getPropsValues} from '../utils/bindProps.js'
import MapElementMixin from './mapElementMixin'
/**
*
* @param {Object} options
* @param {Object} options.mappedProps - Definitions of props
* @param {Object} options.mappedProps.PROP.type - Value type
* @param {Boolean} options.mappedProps.PROP.twoWay
* - Whether the prop has a corresponding PROP_changed
* event
* @param {Boolean} options.mappedProps.PROP.noBind
* - If true, do not apply the default bindProps / bindEvents.
* However it will still be added to the list of component props
* @param {Object} options.props - Regular Vue-style props.
* Note: must be in the Object form because it will be
* merged with the `mappedProps`
*
* @param {Object} options.events - Google Maps API events
* that are not bound to a corresponding prop
* @param {String} options.name - e.g. `polyline`
* @param {=> String} options.ctr - constructor, e.g.
* `google.maps.Polyline`. However, since this is not
* generally available during library load, this becomes
* a function instead, e.g. () => google.maps.Polyline
* which will be called only after the API has been loaded
* @param {(MappedProps, OtherVueProps) => Array} options.ctrArgs -
* If the constructor in `ctr` needs to be called with
* arguments other than a single `options` object, e.g. for
* GroundOverlay, we call `new GroundOverlay(url, bounds, options)`
* then pass in a function that returns the argument list as an array
*
* Otherwise, the constructor will be called with an `options` object,
* with property and values merged from:
*
* 1. the `options` property, if any
* 2. a `map` property with the Google Maps
* 3. all the properties passed to the component in `mappedProps`
* @param {Object => Any} options.beforeCreate -
* Hook to modify the options passed to the initializer
* @param {(options.ctr, Object) => Any} options.afterCreate -
* Hook called when
*
*/
export default function (options) {
const {
mappedProps,
name,
ctr,
ctrArgs,
events,
beforeCreate,
afterCreate,
props,
...rest
} = options
const promiseName = `$${name}Promise`
const instanceName = `$${name}Object`
assert(!(rest.props instanceof Array), '`props` should be an object, not Array')
return {
...(typeof GENERATE_DOC !== 'undefined' ? {$vgmOptions: options} : {}),
mixins: [MapElementMixin],
props: {
...props,
...mappedPropsToVueProps(mappedProps),
},
render () { return '' },
provide () {
const promise = this.$mapPromise.then((map) => {
// Infowindow needs this to be immediately available
this.$map = map
// Initialize the maps with the given options
const options = {
...this.options,
map,
...getPropsValues(this, mappedProps)
}
delete options.options // delete the extra options
if (beforeCreate) {
const result = beforeCreate.bind(this)(options)
if (result instanceof Promise) {
return result.then(() => ({options}))
}
}
return {options}
}).then(({options}) => {
const ConstructorObject = ctr()
// https://stackoverflow.com/questions/1606797/use-of-apply-with-new-operator-is-this-possible
this[instanceName] = ctrArgs
? new (Function.prototype.bind.call(
ConstructorObject,
null,
...ctrArgs(options, getPropsValues(this, props || {}))
))()
: new ConstructorObject(options)
bindProps(this, this[instanceName], mappedProps)
bindEvents(this, this[instanceName], events)
if (afterCreate) {
afterCreate.bind(this)(this[instanceName])
}
return this[instanceName]
})
this[promiseName] = promise
return {[promiseName]: promise}
},
unmounted () {
// Note: not all Google Maps components support maps
if (this[instanceName] && this[instanceName].setMap) {
this[instanceName].setMap(null)
}
},
...rest
}
}
function assert (v, message) {
if (!v) throw new Error(message)
}
/**
* Strips out the extraneous properties we have in our
* props definitions
* @param {Object} props
*/
export function mappedPropsToVueProps (mappedProps) {
return Object.entries(mappedProps)
.map(([key, prop]) => {
const value = {}
if ('type' in prop) value.type = prop.type
if ('default' in prop) value.default = prop.default
if ('required' in prop) value.required = prop.required
return [key, value]
})
.reduce((acc, [key, val]) => {
acc[key] = val
return acc
}, {})
}

31
src/components/mapElementMixin.js Normal file
View File

@@ -0,0 +1,31 @@
/**
* @class MapElementMixin
*
* Extends components to include the following fields:
*
* @property $map The Google map (valid only after the promise returns)
*
*
* */
export default {
inject: {
'$mapPromise': { default: 'abcdef' }
},
provide () {
// Note: although this mixin is not "providing" anything,
// components' expect the `$map` property to be present on the component.
// In order for that to happen, this mixin must intercept the $mapPromise
// .then(() =>) first before its component does so.
//
// Since a provide() on a mixin is executed before a provide() on the
// component, putting this code in provide() ensures that the $map is
// already set by the time the
// component's provide() is called.
this.$mapPromise.then((map) => {
this.$map = map
})
return {}
},
}

184
src/components/mapImpl.js Normal file
View File

@@ -0,0 +1,184 @@
import bindEvents from '../utils/bindEvents.js'
import {bindProps, getPropsValues} from '../utils/bindProps.js'
import mountableMixin from '../utils/mountableMixin.js'
import TwoWayBindingWrapper from '../utils/TwoWayBindingWrapper.js'
import WatchPrimitiveProperties from '../utils/WatchPrimitiveProperties.js'
import { mappedPropsToVueProps } from './mapElementFactory.js'
const props = {
center: {
required: true,
twoWay: true,
type: Object,
noBind: true,
},
zoom: {
required: false,
twoWay: true,
type: Number,
noBind: true,
},
heading: {
type: Number,
twoWay: true,
},
mapTypeId: {
twoWay: true,
type: String
},
tilt: {
twoWay: true,
type: Number,
},
options: {
type: Object,
default () { return {} }
}
}
const events = [
'bounds_changed',
'click',
'dblclick',
'drag',
'dragend',
'dragstart',
'idle',
'mousemove',
'mouseout',
'mouseover',
'resize',
'rightclick',
'tilesloaded',
]
// Plain Google Maps methods exposed here for convenience
const linkedMethods = [
'panBy',
'panTo',
'panToBounds',
'fitBounds'
].reduce((all, methodName) => {
all[methodName] = function () {
if (this.$mapObject) { this.$mapObject[methodName].apply(this.$mapObject, arguments) }
}
return all
}, {})
// Other convenience methods exposed by Vue Google Maps
const customMethods = {
resize () {
if (this.$mapObject) {
google.maps.event.trigger(this.$mapObject, 'resize')
}
},
resizePreserveCenter () {
if (!this.$mapObject) { return }
const oldCenter = this.$mapObject.getCenter()
google.maps.event.trigger(this.$mapObject, 'resize')
this.$mapObject.setCenter(oldCenter)
},
/// Override mountableMixin::_resizeCallback
/// because resizePreserveCenter is usually the
/// expected behaviour
_resizeCallback () {
this.resizePreserveCenter()
}
}
export default {
mixins: [mountableMixin],
props: mappedPropsToVueProps(props),
provide () {
this.$mapPromise = new Promise((resolve, reject) => {
this.$mapPromiseDeferred = { resolve, reject }
})
return {
'$mapPromise': this.$mapPromise
}
},
emits: ['center_changed', 'zoom_changed', 'bounds_changed'],
computed: {
finalLat () {
return this.center &&
(typeof this.center.lat === 'function') ? this.center.lat() : this.center.lat
},
finalLng () {
return this.center &&
(typeof this.center.lng === 'function') ? this.center.lng() : this.center.lng
},
finalLatLng () {
return {lat: this.finalLat, lng: this.finalLng}
}
},
watch: {
zoom (zoom) {
if (this.$mapObject) {
this.$mapObject.setZoom(zoom)
}
}
},
mounted () {
return this.$gmapApiPromiseLazy().then(() => {
// getting the DOM element where to create the map
const element = this.$refs['vue-map']
// creating the map
const options = {
...this.options,
...getPropsValues(this, props),
}
delete options.options
this.$mapObject = new google.maps.Map(element, options)
// binding properties (two and one way)
bindProps(this, this.$mapObject, props)
// binding events
bindEvents(this, this.$mapObject, events)
// manually trigger center and zoom
TwoWayBindingWrapper((increment, decrement, shouldUpdate) => {
this.$mapObject.addListener('center_changed', () => {
if (shouldUpdate()) {
this.$emit('center_changed', this.$mapObject.getCenter())
}
decrement()
})
const updateCenter = () => {
increment()
this.$mapObject.setCenter(this.finalLatLng)
}
WatchPrimitiveProperties(
this,
['finalLat', 'finalLng'],
updateCenter
)
})
this.$mapObject.addListener('zoom_changed', () => {
this.$emit('zoom_changed', this.$mapObject.getZoom())
})
this.$mapObject.addListener('bounds_changed', () => {
this.$emit('bounds_changed', this.$mapObject.getBounds())
})
this.$mapPromiseDeferred.resolve(this.$mapObject)
return this.$mapObject
})
.catch((error) => {
throw error
})
},
methods: {
...customMethods,
...linkedMethods,
},
}

139
src/components/marker.js Normal file
View File

@@ -0,0 +1,139 @@
import mapElementFactory from './mapElementFactory.js'
const props = {
animation: {
twoWay: true,
type: Number
},
attribution: {
type: Object,
},
clickable: {
type: Boolean,
twoWay: true,
default: true
},
cursor: {
type: String,
twoWay: true
},
draggable: {
type: Boolean,
twoWay: true,
default: false
},
icon: {
twoWay: true
},
label: {
},
opacity: {
type: Number,
default: 1
},
options: {
type: Object
},
place: {
type: Object
},
position: {
type: Object,
twoWay: true,
},
shape: {
type: Object,
twoWay: true
},
title: {
type: String,
twoWay: true
},
zIndex: {
type: Number,
twoWay: true
},
visible: {
twoWay: true,
default: true,
},
}
const events = [
'click',
'rightclick',
'dblclick',
'drag',
'dragstart',
'dragend',
'mouseup',
'mousedown',
'mouseover',
'mouseout'
]
/**
* @class Marker
*
* Marker class with extra support for
*
* - Embedded info windows
* - Clustered markers
*
* Support for clustered markers is for backward-compatability
* reasons. Otherwise we should use a cluster-marker mixin or
* subclass.
*/
export default mapElementFactory({
mappedProps: props,
events,
name: 'marker',
ctr: () => google.maps.Marker,
inject: {
'$clusterPromise': {
default: null,
},
},
render (h) {
if (!this.$slots.default || this.$slots.default.length === 0) {
return ''
} else if (this.$slots.default.length === 1) { // So that infowindows can have a marker parent
return this.$slots.default[0]
} else {
return h(
'div',
this.$slots.default
)
}
},
emits: ['center_changed', 'zoom_changed', 'bounds_changed'],
unmounted () {
if (!this.$markerObject) { return }
if (this.$clusterObject) {
// Repaint will be performed in `updated()` of cluster
this.$clusterObject.removeMarker(this.$markerObject, true)
} else {
this.$markerObject.setMap(null)
}
},
beforeCreate (options) {
if (this.$clusterPromise) {
options.map = null
}
return this.$clusterPromise
},
afterCreate (inst) {
if (this.$clusterPromise) {
this.$clusterPromise.then((co) => {
co.addMarker(inst)
this.$clusterObject = co
})
}
},
})

10
src/components/placeInput.vue Normal file
View File

@@ -0,0 +1,10 @@
<template>
<label>
<span v-text="label"></span>
<input type="text" :placeholder="placeholder" :class="className"
ref="input"/>
</label>
</template>
<script src="./placeInputImpl.js">
</script>

75
src/components/placeInputImpl.js Normal file
View File

@@ -0,0 +1,75 @@
import {bindProps, getPropsValues} from '../utils/bindProps.js'
import downArrowSimulator from '../utils/simulateArrowDown.js'
const props = {
bounds: {
type: Object,
},
defaultPlace: {
type: String,
default: '',
},
componentRestrictions: {
type: Object,
default: null,
},
types: {
type: Array,
default: function () {
return []
}
},
placeholder: {
required: false,
type: String
},
className: {
required: false,
type: String
},
label: {
required: false,
type: String,
default: null
},
selectFirstOnEnter: {
require: false,
type: Boolean,
default: false
}
}
export default {
mounted () {
const input = this.$refs.input
// Allow default place to be set
input.value = this.defaultPlace
this.$watch('defaultPlace', () => {
input.value = this.defaultPlace
})
this.$gmapApiPromiseLazy().then(() => {
const options = getPropsValues(this, props)
if (this.selectFirstOnEnter) {
downArrowSimulator(this.$refs.input)
}
if (typeof (google.maps.places.Autocomplete) !== 'function') {
throw new Error('google.maps.places.Autocomplete is undefined. Did you add \'places\' to libraries when loading Google Maps?')
}
this.autoCompleter = new google.maps.places.Autocomplete(this.$refs.input, options)
const {placeholder, place, defaultPlace, className, label, selectFirstOnEnter, ...rest} = props // eslint-disable-line
bindProps(this, this.autoCompleter, rest)
this.autoCompleter.addListener('place_changed', () => {
this.$emit('place_changed', this.autoCompleter.getPlace())
})
})
},
created () {
console.warn('The PlaceInput class is deprecated! Please consider using the Autocomplete input instead') // eslint-disable-line no-console
},
props: props,
}

120
src/components/polygon.js Normal file
View File

@@ -0,0 +1,120 @@
import mapElementFactory from './mapElementFactory.js'
const props = {
draggable: {
type: Boolean
},
editable: {
type: Boolean,
},
options: {
type: Object
},
path: {
type: Array,
twoWay: true,
noBind: true,
},
paths: {
type: Array,
twoWay: true,
noBind: true,
},
}
const events = [
'click',
'dblclick',
'drag',
'dragend',
'dragstart',
'mousedown',
'mousemove',
'mouseout',
'mouseover',
'mouseup',
'rightclick'
]
export default mapElementFactory({
props: {
deepWatch: {
type: Boolean,
default: false
}
},
events,
mappedProps: props,
name: 'polygon',
ctr: () => google.maps.Polygon,
beforeCreate (options) {
if (!options.path) delete options.path
if (!options.paths) delete options.paths
},
afterCreate (inst) {
var clearEvents = () => {}
// Watch paths, on our own, because we do not want to set either when it is
// empty
this.$watch('paths', (paths) => {
if (paths) {
clearEvents()
inst.setPaths(paths)
const updatePaths = () => {
this.$emit('paths_changed', inst.getPaths())
}
const eventListeners = []
const mvcArray = inst.getPaths()
for (let i = 0; i < mvcArray.getLength(); i++) {
let mvcPath = mvcArray.getAt(i)
eventListeners.push([mvcPath, mvcPath.addListener('insert_at', updatePaths)])
eventListeners.push([mvcPath, mvcPath.addListener('remove_at', updatePaths)])
eventListeners.push([mvcPath, mvcPath.addListener('set_at', updatePaths)])
}
eventListeners.push([mvcArray, mvcArray.addListener('insert_at', updatePaths)])
eventListeners.push([mvcArray, mvcArray.addListener('remove_at', updatePaths)])
eventListeners.push([mvcArray, mvcArray.addListener('set_at', updatePaths)])
clearEvents = () => {
eventListeners.map(([obj, listenerHandle]) => // eslint-disable-line no-unused-vars
google.maps.event.removeListener(listenerHandle))
}
}
}, {
deep: this.deepWatch,
immediate: true,
})
this.$watch('path', (path) => {
if (path) {
clearEvents()
inst.setPaths(path)
const mvcPath = inst.getPath()
const eventListeners = []
const updatePaths = () => {
this.$emit('path_changed', inst.getPath())
}
eventListeners.push([mvcPath, mvcPath.addListener('insert_at', updatePaths)])
eventListeners.push([mvcPath, mvcPath.addListener('remove_at', updatePaths)])
eventListeners.push([mvcPath, mvcPath.addListener('set_at', updatePaths)])
clearEvents = () => {
eventListeners.map(([obj, listenerHandle]) => // eslint-disable-line no-unused-vars
google.maps.event.removeListener(listenerHandle))
}
}
}, {
deep: this.deepWatch,
immediate: true,
})
}
})

77
src/components/polyline.js Normal file
View File

@@ -0,0 +1,77 @@
import mapElementFactory from './mapElementFactory.js'
const props = {
draggable: {
type: Boolean
},
editable: {
type: Boolean,
},
options: {
twoWay: false,
type: Object
},
path: {
type: Array,
twoWay: true
},
}
const events = [
'click',
'dblclick',
'drag',
'dragend',
'dragstart',
'mousedown',
'mousemove',
'mouseout',
'mouseover',
'mouseup',
'rightclick'
]
export default mapElementFactory({
mappedProps: props,
props: {
deepWatch: {
type: Boolean,
default: false,
}
},
events,
name: 'polyline',
ctr: () => google.maps.Polyline,
afterCreate (inst) {
var clearEvents = () => {}
this.$watch('path', (path) => {
if (path) {
clearEvents()
this.$polylineObject.setPath(path)
const mvcPath = this.$polylineObject.getPath()
const eventListeners = []
const updatePaths = () => {
this.$emit('path_changed', this.$polylineObject.getPath())
}
eventListeners.push([mvcPath, mvcPath.addListener('insert_at', updatePaths)])
eventListeners.push([mvcPath, mvcPath.addListener('remove_at', updatePaths)])
eventListeners.push([mvcPath, mvcPath.addListener('set_at', updatePaths)])
clearEvents = () => {
eventListeners.map(([obj, listenerHandle]) => // eslint-disable-line no-unused-vars
google.maps.event.removeListener(listenerHandle))
}
}
}, {
deep: this.deepWatch,
immediate: true,
})
}
})

41
src/components/rectangle.js Normal file
View File

@@ -0,0 +1,41 @@
import mapElementFactory from './mapElementFactory.js'
const props = {
bounds: {
type: Object,
twoWay: true
},
draggable: {
type: Boolean,
default: false,
},
editable: {
type: Boolean,
default: false,
},
options: {
type: Object,
twoWay: false
}
}
const events = [
'click',
'dblclick',
'drag',
'dragend',
'dragstart',
'mousedown',
'mousemove',
'mouseout',
'mouseover',
'mouseup',
'rightclick'
]
export default mapElementFactory({
mappedProps: props,
name: 'rectangle',
ctr: () => google.maps.Rectangle,
events,
})

21
src/components/streetViewPanorama.vue Normal file
View File

@@ -0,0 +1,21 @@
<template>
<div class="vue-street-view-pano-container">
<div ref="vue-street-view-pano" class="vue-street-view-pano"></div>
<slot></slot>
</div>
</template>
<script>
export default (function (x) { return x.default || x })(require('./streetViewPanoramaImpl.js'))
</script>
<style lang="css">
.vue-street-view-pano-container {
position: relative;
}
.vue-street-view-pano-container .vue-street-view-pano {
left: 0; right: 0; top: 0; bottom: 0;
position: absolute;
}
</style>

147
src/components/streetViewPanoramaImpl.js Normal file
View File

@@ -0,0 +1,147 @@
import bindEvents from '../utils/bindEvents.js'
import {bindProps, getPropsValues} from '../utils/bindProps.js'
import mountableMixin from '../utils/mountableMixin.js'
import TwoWayBindingWrapper from '../utils/TwoWayBindingWrapper.js'
import WatchPrimitiveProperties from '../utils/WatchPrimitiveProperties.js'
import { mappedPropsToVueProps } from './mapElementFactory.js'
const props = {
zoom: {
twoWay: true,
type: Number
},
pov: {
twoWay: true,
type: Object,
trackProperties: ['pitch', 'heading']
},
position: {
twoWay: true,
type: Object,
noBind: true,
},
pano: {
twoWay: true,
type: String
},
motionTracking: {
twoWay: false,
type: Boolean
},
visible: {
twoWay: true,
type: Boolean,
default: true,
},
options: {
twoWay: false,
type: Object,
default () { return {} }
}
}
const events = [
'closeclick',
'status_changed',
]
export default {
mixins: [mountableMixin],
props: mappedPropsToVueProps(props),
replace: false, // necessary for css styles
methods: {
resize () {
if (this.$panoObject) {
google.maps.event.trigger(this.$panoObject, 'resize')
}
},
},
provide () {
const promise = new Promise((resolve, reject) => {
this.$panoPromiseDeferred = {resolve, reject}
})
return {
'$panoPromise': promise,
'$mapPromise': promise, // so that we can use it with markers
}
},
computed: {
finalLat () {
return this.position &&
(typeof this.position.lat === 'function') ? this.position.lat() : this.position.lat
},
finalLng () {
return this.position &&
(typeof this.position.lng === 'function') ? this.position.lng() : this.position.lng
},
finalLatLng () {
return {
lat: this.finalLat,
lng: this.finalLng,
}
}
},
watch: {
zoom (zoom) {
if (this.$panoObject) {
this.$panoObject.setZoom(zoom)
}
}
},
mounted () {
return this.$gmapApiPromiseLazy().then(() => {
// getting the DOM element where to create the map
const element = this.$refs['vue-street-view-pano']
// creating the map
const options = {
...this.options,
...getPropsValues(this, props),
}
delete options.options
this.$panoObject = new google.maps.StreetViewPanorama(element, options)
// binding properties (two and one way)
bindProps(this, this.$panoObject, props)
// binding events
bindEvents(this, this.$panoObject, events)
// manually trigger position
TwoWayBindingWrapper((increment, decrement, shouldUpdate) => {
// Panos take a while to load
increment()
this.$panoObject.addListener('position_changed', () => {
if (shouldUpdate()) {
this.$emit('position_changed', this.$panoObject.getPosition())
}
decrement()
})
const updateCenter = () => {
increment()
this.$panoObject.setPosition(this.finalLatLng)
}
WatchPrimitiveProperties(
this,
['finalLat', 'finalLng'],
updateCenter
)
})
this.$panoPromiseDeferred.resolve(this.$panoObject)
return this.$panoPromise
})
.catch((error) => {
throw error
})
},
}

126
src/main.js Normal file
View File

@@ -0,0 +1,126 @@
import lazy from './utils/lazyValue'
import {loadGmapApi} from './manager'
import {createApp} from 'vue'
import Marker from './components/marker'
import Polyline from './components/polyline'
import Polygon from './components/polygon'
import Circle from './components/circle'
import Rectangle from './components/rectangle'
import GmapCluster from './components/cluster'
// Vue component imports
import InfoWindow from './components/infoWindow.vue'
import Map from './components/map.vue'
import StreetViewPanorama from './components/streetViewPanorama.vue'
import PlaceInput from './components/placeInput.vue'
import Autocomplete from './components/autocomplete.vue'
import MapElementMixin from './components/mapElementMixin'
import MapElementFactory from './components/mapElementFactory'
import MountableMixin from './utils/mountableMixin'
// HACK: Cluster should be loaded conditionally
// However in the web version, it's not possible to write
// `import 'vue2-google-maps/src/components/cluster'`, so we need to
// import it anyway (but we don't have to register it)
// Therefore we use babel-plugin-transform-inline-environment-variables to
// set BUILD_DEV to truthy / falsy
const Cluster = (process.env.BUILD_DEV === '1')
? undefined
: (s => s.default || s)(require('./components/cluster'))
let GmapApi = null
// export everything
export {loadGmapApi, Marker, Polyline, Polygon, Circle, Cluster, Rectangle,
InfoWindow, Map, PlaceInput, MapElementMixin, MapElementFactory, Autocomplete,
MountableMixin, StreetViewPanorama}
export function install (Vue, options) {
// Set defaults
options = {
installComponents: true,
autobindAllEvents: false,
...options
}
// Update the global `GmapApi`. This will allow
// components to use the `google` global reactively
// via:
// import {gmapApi} from 'vue2-google-maps'
// export default { computed: { google: gmapApi } }
GmapApi = createApp({data: {gmapApi: null}});
const defaultResizeBus = createApp()
// Use a lazy to only load the API when
// a VGM component is loaded
let gmapApiPromiseLazy = makeGmapApiPromiseLazy(options)
Vue.mixin({
created () {
this.$gmapDefaultResizeBus = defaultResizeBus
this.$gmapOptions = options
this.$gmapApiPromiseLazy = gmapApiPromiseLazy
}
})
Vue.$gmapDefaultResizeBus = defaultResizeBus
Vue.$gmapApiPromiseLazy = gmapApiPromiseLazy
if (options.installComponents) {
Vue.component('GmapMap', Map)
Vue.component('GmapMarker', Marker)
Vue.component('GmapInfoWindow', InfoWindow)
Vue.component('GmapCluster', GmapCluster)
Vue.component('GmapPolyline', Polyline)
Vue.component('GmapPolygon', Polygon)
Vue.component('GmapCircle', Circle)
Vue.component('GmapRectangle', Rectangle)
Vue.component('GmapAutocomplete', Autocomplete)
Vue.component('GmapPlaceInput', PlaceInput)
Vue.component('GmapStreetViewPanorama', StreetViewPanorama)
}
}
function makeGmapApiPromiseLazy (options) {
// Things to do once the API is loaded
function onApiLoaded () {
GmapApi.gmapApi = {}
return window.google
}
if (options.load) { // If library should load the API
return lazy(() => { // Load the
// This will only be evaluated once
if (typeof window === 'undefined') { // server side -- never resolve this promise
return new Promise(() => {}).then(onApiLoaded)
} else {
return new Promise((resolve, reject) => {
try {
window['vueGoogleMapsInit'] = resolve
loadGmapApi(options.load, options.loadCn)
} catch (err) {
reject(err)
}
})
.then(onApiLoaded)
}
})
} else { // If library should not handle API, provide
// end-users with the global `vueGoogleMapsInit: () => undefined`
// when the Google Maps API has been loaded
const promise = new Promise((resolve) => {
if (typeof window === 'undefined') {
// Do nothing if run from server-side
return
}
window['vueGoogleMapsInit'] = resolve
}).then(onApiLoaded)
return lazy(() => promise)
}
}
export function gmapApi () {
return GmapApi.gmapApi && window.google
}

73
src/manager.js Normal file
View File

@@ -0,0 +1,73 @@
let isApiSetUp = false
/**
* @param apiKey API Key, or object with the URL parameters. For example
* to use Google Maps Premium API, pass
* `{ client: <YOUR-CLIENT-ID> }`.
* You may pass the libraries and/or version (as `v`) parameter into
* this parameter and skip the next two parameters
* @param version Google Maps version
* @param libraries Libraries to load (@see
* https://developers.google.com/maps/documentation/javascript/libraries)
* @param loadCn Boolean. If set to true, the map will be loaded from google maps China
* (@see https://developers.google.com/maps/documentation/javascript/basics#GoogleMapsChina)
*
* Example:
* ```
* import {load} from 'vue-google-maps'
*
* load(<YOUR-API-KEY>)
*
* load({
* key: <YOUR-API-KEY>,
* })
*
* load({
* client: <YOUR-CLIENT-ID>,
* channel: <YOUR CHANNEL>
* })
* ```
*/
export const loadGmapApi = (options, loadCn) => {
if (typeof document === 'undefined') {
// Do nothing if run from server-side
return
}
if (!isApiSetUp) {
isApiSetUp = true
const googleMapScript = document.createElement('SCRIPT')
// Allow options to be an object.
// This is to support more esoteric means of loading Google Maps,
// such as Google for business
// https://developers.google.com/maps/documentation/javascript/get-api-key#premium-auth
if (typeof options !== 'object') {
throw new Error('options should be an object')
}
// libraries
if (Array.prototype.isPrototypeOf(options.libraries)) {
options.libraries = options.libraries.join(',')
}
options['callback'] = 'vueGoogleMapsInit'
let baseUrl = 'https://maps.googleapis.com/'
if (typeof loadCn === 'boolean' && loadCn === true) {
baseUrl = 'https://maps.google.cn/'
}
let url = baseUrl + 'maps/api/js?' +
Object.keys(options)
.map((key) => encodeURIComponent(key) + '=' + encodeURIComponent(options[key]))
.join('&')
googleMapScript.setAttribute('src', url)
googleMapScript.setAttribute('async', '')
googleMapScript.setAttribute('defer', '')
document.head.appendChild(googleMapScript)
} else {
throw new Error('You already started the loading of google maps')
}
}

48
src/utils/TwoWayBindingWrapper.js Normal file
View File

@@ -0,0 +1,48 @@
/**
* When you have two-way bindings, but the actual bound value will not equal
* the value you initially passed in, then to avoid an infinite loop you
* need to increment a counter every time you pass in a value, decrement the
* same counter every time the bound value changed, but only bubble up
* the event when the counter is zero.
*
Example:
Let's say DrawingRecognitionCanvas is a deep-learning backed canvas
that, when given the name of an object (e.g. 'dog'), draws a dog.
But whenever the drawing on it changes, it also sends back its interpretation
of the image by way of the @newObjectRecognized event.
<input
type="text"
placeholder="an object, e.g. Dog, Cat, Frog"
v-model="identifiedObject" />
<DrawingRecognitionCanvas
:object="identifiedObject"
@newObjectRecognized="identifiedObject = $event"
/>
new TwoWayBindingWrapper((increment, decrement, shouldUpdate) => {
this.$watch('identifiedObject', () => {
// new object passed in
increment()
})
this.$deepLearningBackend.on('drawingChanged', () => {
recognizeObject(this.$deepLearningBackend)
.then((object) => {
decrement()
if (shouldUpdate()) {
this.$emit('newObjectRecognized', object.name)
}
})
})
})
*/
export default function TwoWayBindingWrapper (fn) {
let counter = 0
fn(
() => { counter += 1 },
() => { counter = Math.max(0, counter - 1) },
() => counter === 0,
)
}

24
src/utils/WatchPrimitiveProperties.js Normal file
View File

@@ -0,0 +1,24 @@
/**
* Watch the individual properties of a PoD object, instead of the object
* per se. This is different from a deep watch where both the reference
* and the individual values are watched.
*
* In effect, it throttles the multiple $watch to execute at most once per tick.
*/
export default function WatchPrimitiveProperties (vueInst, propertiesToTrack, handler, immediate = false) {
let isHandled = false
function requestHandle () {
if (!isHandled) {
isHandled = true
vueInst.$nextTick(() => {
isHandled = false
handler()
})
}
}
for (let prop of propertiesToTrack) {
vueInst.$watch(prop, requestHandle, {immediate})
}
}

10
src/utils/bindEvents.js Normal file
View File

@@ -0,0 +1,10 @@
export default (vueInst, googleMapsInst, events) => {
for (let eventName of events) {
if (vueInst.$gmapOptions.autobindAllEvents ||
vueInst.$attrs[eventName]) {
googleMapsInst.addListener(eventName, (ev) => {
vueInst.$emit(eventName, ev)
})
}
}
}

74
src/utils/bindProps.js Normal file
View File

@@ -0,0 +1,74 @@
import WatchPrimitiveProperties from '../utils/WatchPrimitiveProperties'
function capitalizeFirstLetter (string) {
return string.charAt(0).toUpperCase() + string.slice(1)
}
export function getPropsValues (vueInst, props) {
return Object.keys(props)
.reduce(
(acc, prop) => {
if (vueInst[prop] !== undefined) {
acc[prop] = vueInst[prop]
}
return acc
},
{}
)
}
/**
* Binds the properties defined in props to the google maps instance.
* If the prop is an Object type, and we wish to track the properties
* of the object (e.g. the lat and lng of a LatLng), then we do a deep
* watch. For deep watch, we also prevent the _changed event from being
* $emitted if the data source was external.
*/
export function bindProps (vueInst, googleMapsInst, props, options) {
for (let attribute in props) {
let {twoWay, type, trackProperties, noBind} = props[attribute]
if (noBind) continue
const setMethodName = 'set' + capitalizeFirstLetter(attribute)
const getMethodName = 'get' + capitalizeFirstLetter(attribute)
const eventName = attribute.toLowerCase() + '_changed'
const initialValue = vueInst[attribute]
if (typeof googleMapsInst[setMethodName] === 'undefined') {
throw new Error(`${setMethodName} is not a method of (the Maps object corresponding to) ${vueInst.$options._componentTag}`)
}
// We need to avoid an endless
// propChanged -> event $emitted -> propChanged -> event $emitted loop
// although this may really be the user's responsibility
if (type !== Object || !trackProperties) {
// Track the object deeply
vueInst.$watch(attribute, () => {
const attributeValue = vueInst[attribute]
googleMapsInst[setMethodName](attributeValue)
}, {
immediate: typeof initialValue !== 'undefined',
deep: type === Object
})
} else {
WatchPrimitiveProperties(
vueInst,
trackProperties.map(prop => `${attribute}.${prop}`),
() => {
googleMapsInst[setMethodName](vueInst[attribute])
},
vueInst[attribute] !== undefined
)
}
if (twoWay &&
(vueInst.$gmapOptions.autobindAllEvents ||
vueInst.$attrs[eventName])) {
googleMapsInst.addListener(eventName, (ev) => { // eslint-disable-line no-unused-vars
vueInst.$emit(eventName, googleMapsInst[getMethodName]())
})
}
}
}

16
src/utils/lazyValue.js Normal file
View File

@@ -0,0 +1,16 @@
// This piece of code was orignally written by sindresorhus and can be seen here
// https://github.com/sindresorhus/lazy-value/blob/master/index.js
export default fn => {
let called = false
let ret
return () => {
if (!called) {
called = true
ret = fn()
}
return ret
}
}

55
src/utils/mountableMixin.js Normal file
View File

@@ -0,0 +1,55 @@
/*
Mixin for objects that are mounted by Google Maps
Javascript API.
These are objects that are sensitive to element resize
operations so it exposes a property which accepts a bus
*/
export default {
props: ['resizeBus'],
data () {
return {
_actualResizeBus: null,
}
},
created () {
if (typeof this.resizeBus === 'undefined') {
this.$data._actualResizeBus = this.$gmapDefaultResizeBus
} else {
this.$data._actualResizeBus = this.resizeBus
}
},
methods: {
_resizeCallback () {
this.resize()
},
_delayedResizeCallback () {
this.$nextTick(() => this._resizeCallback())
}
},
watch: {
resizeBus (newVal, oldVal) { // eslint-disable-line no-unused-vars
this.$data._actualResizeBus = newVal
},
'$data._actualResizeBus' (newVal, oldVal) {
if (oldVal) {
oldVal.$off('resize', this._delayedResizeCallback)
}
if (newVal) {
// newVal.$on('resize', this._delayedResizeCallback)
}
}
},
unmounted () {
if (this.$data._actualResizeBus) {
this.$data._actualResizeBus.$off('resize', this._delayedResizeCallback)
}
}
}

28
src/utils/simulateArrowDown.js Normal file
View File

@@ -0,0 +1,28 @@
// This piece of code was orignally written by amirnissim and can be seen here
// http://stackoverflow.com/a/11703018/2694653
// This has been ported to Vanilla.js by GuillaumeLeclerc
export default (input) => {
var _addEventListener = (input.addEventListener) ? input.addEventListener : input.attachEvent
function addEventListenerWrapper (type, listener) {
// Simulate a 'down arrow' keypress on hitting 'return' when no pac suggestion is selected,
// and then trigger the original listener.
if (type === 'keydown') {
var origListener = listener
listener = function (event) {
var suggestionSelected = document.getElementsByClassName('pac-item-selected').length > 0
if (event.which === 13 && !suggestionSelected) {
var simulatedEvent = document.createEvent('Event')
simulatedEvent.keyCode = 40
simulatedEvent.which = 40
origListener.apply(input, [simulatedEvent])
}
origListener.apply(input, [event])
}
}
_addEventListener.apply(input, [type, listener])
}
input.addEventListener = addEventListenerWrapper
input.attachEvent = addEventListenerWrapper
}

26
test/.eslintrc.json Normal file
View File

@@ -0,0 +1,26 @@
{
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true
},
"extends": "standard",
"parserOptions": {
"sourceType": "module"
},
"rules": {
"comma-dangle": 0
},
"globals": {
"google": true,
"Vue": true,
"VueGoogleMaps": true
},
"plugins": [
"html"
],
"settings": {
"html/html-extensions": [".html", ".vue"]
}
}

95
test/basic.js Normal file
View File

@@ -0,0 +1,95 @@
import Lab from 'lab'
import assert from 'assert'
import fs from 'fs'
import path from 'path'
import {getPage, loadFile} from './test-setup/test-common'
export const lab = Lab.script()
lab.experiment('Basic tests', {timeout: 15000}, function () {
let page = null
async function loadPage () {
return loadFile(page, './test-pages/test-plain-map.html', {
waitUntil: 'domcontentloaded'
})
}
async function mountVue () {
return page.evaluateHandle(() =>
new Promise((resolve) => {
new Vue({
created () {
resolve(this)
},
}).$mount('#test1')
}))
}
lab.before({timeout: 15000}, getPage(p => { page = p }))
lab.test('Maps API is loaded', async function () {
await loadPage()
const vue = await mountVue()
assert(await page.evaluate(
(vue) =>
vue.$refs.map.$mapPromise
.then(() => vue.$refs.map.$mapObject instanceof google.maps.Map),
vue), '$mapPromise is defined')
assert(await page.evaluate(
(vue) =>
vue.$refs.map.$mapObject
.getDiv().parentNode.classList.contains('map-container'),
vue),
'Parent of $mapObject.div is a .map-container')
})
lab.test('Panning of map works', {timeout: 30000}, async function () {
await loadPage()
const vue = await mountVue()
const [top, right, bottom, left] = await page.evaluate(() => {
const el = document.querySelector('.map-container')
const top = el.offsetTop
const right = el.offsetLeft + el.offsetWidth
const bottom = el.offsetTop + el.offsetHeight
const left = el.offsetLeft
return [top, right, bottom, left]
})
// Wait for map to load first...
await page.evaluate((vue) =>
vue.$refs.map.$mapPromise
.then(() => new Promise(resolve => setTimeout(resolve, 500))),
vue)
// Then try to pan the page
await page.mouse.move(right - 4, top + 4)
await page.mouse.down()
await page.mouse.move(left + 4, bottom - 4, {steps: 20})
await new Promise(resolve => setTimeout(resolve, 100))
await page.mouse.up()
const {lat, lng} = await page.evaluate((vue) => {
const c = vue.$refs.map.$mapObject.getCenter()
return {lat: c.lat(), lng: c.lng()}
}, vue)
assert(lat > 1.45, 'Lat greater than 1.45')
assert(lng > 103.9, 'Lng greater than 103.9')
})
lab.test('Lodash library is not bloating up the library', async () => {
const libraryOutput = fs.readFileSync(
path.join(__dirname, '../dist/vue-google-maps.js'),
'utf-8'
)
if (/Lodash <http(.*)>/.test(libraryOutput)) {
assert(false,
'Lodash found! This is bad because you are bloating up the library')
}
})
})

38
test/gmapApi-guard.js Normal file
View File

@@ -0,0 +1,38 @@
import Lab from 'lab'
import assert from 'assert'
import {getPage, loadFile} from './test-setup/test-common'
export const lab = Lab.script()
lab.experiment('Effectiveness of gmapApi guard', {timeout: 15000}, function () {
let page = null
let isError = false
async function loadPage () {
return loadFile(page, './test-pages/test-gmapApi.html', {
waitUntil: 'networkidle0'
})
}
lab.before({timeout: 15000}, getPage(p => {
isError = false
page = p
page.on('error', (err) => {
isError = err
})
page.on('pageerror', (err) => {
isError = err
})
return p
}))
lab.test('gmapGuard prevents errors', async function () {
await loadPage()
assert(!isError)
assert(await page.evaluate(() => {
return google && (window.vue.$refs.myMarker.position instanceof google.maps.LatLng)
}), 'Marker is loaded with a position')
})
})

65
test/maps-not-loaded.js Normal file
View File

@@ -0,0 +1,65 @@
import Lab from 'lab'
import assert from 'assert'
import {getPage, loadFile} from './test-setup/test-common'
export const lab = Lab.script()
lab.experiment('On-demand API loading', {timeout: 15000}, function () {
let page = null
async function loadPage () {
return loadFile(page, './test-pages/test-page-without-maps.html', {
waitUntil: 'networkidle0'
})
}
async function mountVue () {
return page.evaluateHandle(() =>
new Promise((resolve) => {
new Vue({
data: {
loadMap: false,
},
mounted () {
resolve(this)
},
}).$mount('#test1')
}))
}
lab.before({timeout: 15000}, getPage(p => { page = p }))
lab.test('Maps API is loaded only on demand', async function () {
await loadPage()
const vue = await mountVue()
assert(await page.evaluate(
(vue) => {
const allScriptElements = Array.prototype.slice.call(document.getElementsByTagName('SCRIPT'), 0)
return (
allScriptElements.every(s => !s.src.toLowerCase().includes('maps.googleapis.com')) &&
!window.google
)
},
vue), 'Google APIs are not loaded')
assert(await page.evaluate(
(vue) => {
return Promise.resolve(null)
.then(() => {
vue.loadMap = true
return new Promise((resolve) => setTimeout(resolve, 100))
})
.then(() => vue.$refs.gmap.$mapPromise.then(() => !!window.google))
.then((isGoogleLoaded) => {
const allScriptElements = Array.prototype.slice.call(document.getElementsByTagName('SCRIPT'), 0)
return (
isGoogleLoaded &&
allScriptElements.some(s => s.src.toLowerCase().includes('maps.googleapis.com'))
)
})
},
vue), 'Google APIs are loaded')
})
})

84
test/marker-with-infowindow.js Normal file
View File

@@ -0,0 +1,84 @@
import Lab from 'lab'
import assert from 'assert'
import {getPage, loadFile} from './test-setup/test-common'
export const lab = Lab.script()
lab.experiment('Marker / Infowindow tests', {timeout: 15000}, function () {
let page = null
async function loadPage () {
return loadFile(page, './test-pages/test-marker-with-infowindow.html', {
waitUntil: 'domcontentloaded'
})
}
lab.before({timeout: 15000}, getPage(p => { page = p }))
lab.test('Clicking the marker triggers the infowindow', async function () {
await loadPage()
await page.evaluate(() => {
// Ensure that the map has been created
return window.theVue.$refs.map.$mapPromise
.then(() => {
// Give some more time for the marker to initialize
return new Promise(resolve => setTimeout(resolve, 100))
})
})
// Is the infowindow hidden?
assert(await page.evaluate(() => {
return !document.getElementById('thediv') || (
document.getElementById('thediv').offsetWidth === 0 &&
document.getElementById('thediv').offsetHeight === 0
)
}),
'infowindow is hidden')
// Clicked is false
assert(await page.evaluate(() => {
return !window.theVue.clicked
}),
'marker is not clicked')
// Obtain the center
const [x, y] = await page.evaluate(() => {
const el = window.theVue.$refs.map.$el
return Promise.resolve([
el.offsetLeft + 0.5 * el.offsetWidth,
el.offsetTop + 0.5 * el.offsetHeight,
])
})
await page.mouse.click(x, y - 20)
// Clicked is now true!
assert(await page.evaluate(() => {
return new Promise(resolve => setTimeout(resolve, 100))
.then(() => {
return window.theVue.clicked
})
}),
'marker is clicked')
// Infowindow is now open!
assert(await page.evaluate(() => {
return document.getElementById('thediv').offsetWidth > 10
}),
'#thediv is visible')
// shut the infowindow
assert(await page.evaluate(() => {
window.theVue.infoWindow.open = false
return new Promise(resolve => setTimeout(resolve, 100))
.then(() => {
return !document.getElementById('thediv') || (
document.getElementById('thediv').offsetWidth === 0 &&
document.getElementById('thediv').offsetHeight === 0
)
})
}), 'setting open=false closes #thediv')
})
})

40
test/test-all-examples.js Normal file
View File

@@ -0,0 +1,40 @@
import Lab from 'lab'
import assert from 'assert'
import fs from 'fs'
import path from 'path'
import {getPage, loadFile} from './test-setup/test-common'
export const lab = Lab.script()
lab.experiment('Examples test', {timeout: 15000}, function () {
let page = null
async function loadPage (f) {
return loadFile(page, f, {
waitUntil: 'networkidle0'
})
}
lab.before({timeout: 15000}, getPage(p => { page = p }))
lab.test('Test all examples pages load without errors (does not test functionality)', {timeout: 50000}, async function () {
const files = fs.readdirSync(path.join(__dirname, '../examples')).filter(f => f.endsWith('.html'))
let isErrored = false
page.on('error', (err) => {
isErrored = err
})
page.on('pageerror', (err) => {
isErrored = err
})
assert(!isErrored)
for (let file of files) {
await loadPage('../examples/' + file)
if (isErrored) {
throw new Error(`The example file ../examples/${file} threw an error ${isErrored}`)
}
}
})
})

39
test/test-pages/test-gmapApi.html Normal file
View File

@@ -0,0 +1,39 @@
<head>
<style>
.map-container {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div id="test">
<h2>Test 1</h2>
<gmap-map
:center="{lat: 1.38, lng: 103.8}"
:zoom="12"
class="map-container"
ref="map">
<gmap-marker ref="myMarker" :position="google && new google.maps.LatLng(1.38, 103.8)"></gmap-marker>
</gmap-map>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<script src="../../dist/vue-google-maps.js"></script>
<script>
Vue.use(VueGoogleMaps, {
load: {
key: 'AIzaSyDf43lPdwlF98RCBsJOFNKOkoEjkwxb5Sc',
}
})
document.addEventListener('DOMContentLoaded', () => {
window.vue = new Vue({
computed: {
google: VueGoogleMaps.gmapApi
},
el: '#test',
})
})
</script>
</body>

71
test/test-pages/test-marker-with-infowindow.html Normal file
View File

@@ -0,0 +1,71 @@
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="app">
<gmap-map
:center="randomInitialLatLng"
:zoom="7"
style="height: 400px; width: 100%;"
ref="map"
id="themap">
<gmap-marker
:position="randomInitialLatLng"
:clickable="true"
@click="openInfoWindowTemplate(randomInitialLatLng)"
ref="markers">
</gmap-marker>
<gmap-info-window
:options="{maxWidth: 300}"
:position="infoWindow.position"
:opened="infoWindow.open"
@closeclick="infoWindow.open = false">
<div id="thediv">hello</div>
</gmap-info-window>
</gmap-map>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<script src="../../dist/vue-google-maps.js"></script>
<script>
Vue.use(VueGoogleMaps, {
load: {
key: 'AIzaSyDf43lPdwlF98RCBsJOFNKOkoEjkwxb5Sc',
}
})
document.addEventListener('DOMContentLoaded', () => {
window.theVue = new Vue({
el: '#app',
data () {
return {
infoWindow: {
position: {lat: 50, lng: 90},
open: false,
template: ''
},
clicked: false,
}
},
computed: {
randomInitialLatLng () {
return ({lat: 50 + Math.random(), lng: 90 + Math.random()})
}
},
methods: {
openInfoWindowTemplate (pos) {
this.infoWindow.position = pos
this.infoWindow.open = true
this.clicked = true
}
}
})
})
</script>
</body>
</html>

28
test/test-pages/test-page-without-maps.html Normal file
View File

@@ -0,0 +1,28 @@
<head>
<style>
.map-container {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div id="test1">
<h2>Test 1</h2>
<gmap-map v-if="loadMap" ref="gmap"></gmap-map>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<script src="../../dist/vue-google-maps.js"></script>
<script>
// This page does not have maps, but we use Vue2-google-maps
// Must ensure that Google Maps library is NEVER loaded
Vue.use(VueGoogleMaps, {
load: {
key: 'AIzaSyDf43lPdwlF98RCBsJOFNKOkoEjkwxb5Sc',
}
})
</script>
</body>

30
test/test-pages/test-plain-map.html Normal file
View File

@@ -0,0 +1,30 @@
<head>
<style>
.map-container {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div id="test1">
<h2>Test 1</h2>
<gmap-map
:center="{lat: 1.38, lng: 103.8}"
:zoom="12"
class="map-container"
ref="map">
</gmap-map>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<script src="../../dist/vue-google-maps.js"></script>
<script>
Vue.use(VueGoogleMaps, {
load: {
key: 'AIzaSyDf43lPdwlF98RCBsJOFNKOkoEjkwxb5Sc',
}
})
</script>
</body>

30
test/test-setup/babel-transform.js Normal file
View File

@@ -0,0 +1,30 @@
// Adapted from https://github.com/nlf/lab-babel/blob/master/lib/index.js
require('babel-polyfill')
var Babel = require('babel-core')
var internals = {}
internals.transform = function (content, filename) {
if (/^node_modules/.test(filename)) {
return content
}
var transformed = Babel.transform(content, {
filename: filename,
sourceMap: 'inline',
sourceFileName: filename,
auxiliaryCommentBefore: '$lab:coverage:off$',
auxiliaryCommentAfter: '$lab:coverage:on$',
presets: ['es2015'],
plugins: ['transform-object-rest-spread'],
})
return transformed.code
}
internals.extensions = ['js', 'jsx', 'es', 'es6']
internals.methods = []
for (var i = 0, il = internals.extensions.length; i < il; ++i) {
internals.methods.push({ ext: internals.extensions[i], transform: internals.transform })
}
module.exports = internals.methods

25
test/test-setup/compile-standalone.js Normal file
View File

@@ -0,0 +1,25 @@
import webpack from 'webpack'
import * as shell from 'shelljs'
import path from 'path'
export default new Promise((resolve, reject) => {
const webpackConfig = require('../../webpack.config.js')[0]
webpack(
{
...webpackConfig,
mode: 'development',
},
(err, status) => {
if (!err) {
shell.cp(
path.resolve(__dirname, '../../dist/vue-google-maps.js'),
path.resolve(__dirname, '../../examples/vue-google-maps.js')
)
resolve()
} else {
reject(err)
}
}
)
})

23
test/test-setup/test-common.js Normal file
View File

@@ -0,0 +1,23 @@
import Puppeteer from 'puppeteer'
import CompileStandalone from './compile-standalone'
import path from 'path'
const puppeteerPromise = CompileStandalone.then(() => {
let options = {}
if (process.env['THIS_IS_ON_TRAVIS_AND_SANDBOX_IS_NOT_ALLOWED'] === 'true') {
options.args = ['--no-sandbox', '--disable-setuid-sandbox']
}
return Puppeteer.launch(options)
})
export function getPage (p) {
return async () => {
p(await puppeteerPromise.then(browser => browser.newPage()))
}
}
export async function loadFile (page, relpath, options) {
return page.goto('file:///' + path.join(__dirname, '../', relpath), options)
}

53
webpack.config.js Normal file
View File

@@ -0,0 +1,53 @@
/* vim: set softtabstop=2 shiftwidth=2 expandtab : */
const webpack = require('webpack');
const path = require('path')
const baseConfig = {
entry: [
path.resolve('./src/main.js')
],
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: { target: 'node' }
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: [
/node_modules/,
]
},
{
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'file-loader?name=[name].[ext]?[hash]',
}]
},
],
},
mode: process.env.NODE_ENV || 'development'
}; /* baseConfig */
/**
* Web config uses a global Vue and Lodash object.
* */
const webConfig = {
...baseConfig,
externals: {
vue: 'Vue',
'marker-clusterer-plus': 'MarkerClusterer'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: "vue-google-maps.js",
library: ["VueGoogleMaps"],
libraryTarget: "umd"
}
}
module.exports = [
webConfig
];