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

Update dependencies and improve build system

Browse Source
This commit is contained in:
Fawad Mirzad
2021-02-13 17:30:46 +01:00
parent 04431e1b39
commit 9a20c42459
57 changed files with 8395 additions and 1064 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/components/autocomplete.vue
View File

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

30
src/components/autocompleteImpl.js
View File

@@ -1,10 +1,10 @@
import {bindProps, getPropsValues} from '../utils/bindProps.js'
import { bindProps, getPropsValues } from '../utils/bindProps.js'
import downArrowSimulator from '../utils/simulateArrowDown.js'
import {mappedPropsToVueProps} from './mapElementFactory'
import { mappedPropsToVueProps } from './mapElementFactory'
const mappedProps = {
bounds: {
type: Object
type: Object,
},
componentRestrictions: {
type: Object,
@@ -16,7 +16,7 @@ const mappedProps = {
type: Array,
default: function () {
return []
}
},
},
}
@@ -24,34 +24,36 @@ const props = {
selectFirstOnEnter: {
required: false,
type: Boolean,
default: false
default: false,
},
options: {
type: Object
}
type: Object,
},
}
export default {
mounted () {
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?')
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.options,
}
this.$autocomplete = new google.maps.places.Autocomplete(this.$refs.input, finalOptions)
bindProps(this, this.$autocomplete, mappedProps)
this.$watch('componentRestrictions', v => {
this.$watch('componentRestrictions', (v) => {
if (v !== undefined) {
this.$autocomplete.setComponentRestrictions(v)
}
@@ -66,6 +68,6 @@ export default {
},
props: {
...mappedPropsToVueProps(mappedProps),
...props
}
...props,
},
}

10
src/components/circle.js
View File

@@ -4,11 +4,11 @@ const props = {
center: {
type: Object,
twoWay: true,
required: true
required: true,
},
radius: {
type: Number,
twoWay: true
twoWay: true,
},
draggable: {
type: Boolean,
@@ -20,8 +20,8 @@ const props = {
},
options: {
type: Object,
twoWay: false
}
twoWay: false,
},
}
const events = [
@@ -35,7 +35,7 @@ const events = [
'mouseout',
'mouseover',
'mouseup',
'rightclick'
'rightclick',
]
export default mapElementFactory({

46
src/components/cluster.vue
View File

@@ -7,52 +7,52 @@ import mapElementFactory from './mapElementFactory.js'
const props = {
maxZoom: {
type: Number,
twoWay: false
twoWay: false,
},
batchSizeIE: {
type: Number,
twoWay: false
twoWay: false,
},
calculator: {
type: Function,
twoWay: false
twoWay: false,
},
enableRetinaIcons: {
type: Boolean,
twoWay: false
twoWay: false,
},
gridSize: {
type: Number,
twoWay: false
twoWay: false,
},
ignoreHidden: {
type: Boolean,
twoWay: false
twoWay: false,
},
imageExtension: {
type: String,
twoWay: false
twoWay: false,
},
imagePath: {
type: String,
twoWay: false
twoWay: false,
},
imageSizes: {
type: Array,
twoWay: false
twoWay: false,
},
minimumClusterSize: {
type: Number,
twoWay: false
twoWay: false,
},
styles: {
type: Array,
twoWay: false
twoWay: false,
},
zoomOnClick: {
type: Boolean,
twoWay: false
}
twoWay: false,
},
}
const events = [
@@ -65,7 +65,7 @@ const events = [
'mouseup',
'mousedown',
'mouseover',
'mouseout'
'mouseout',
]
export default mapElementFactory({
@@ -75,13 +75,17 @@ export default mapElementFactory({
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')
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) {
ctrArgs: ({ map, ...otherOptions }) => [map, [], otherOptions],
afterCreate(inst) {
const reinsertMarkers = () => {
const oldMarkers = inst.getMarkers()
inst.clearMarkers()
@@ -93,14 +97,14 @@ export default mapElementFactory({
}
}
},
updated () {
updated() {
if (this.$clusterObject) {
this.$clusterObject.repaint()
}
},
beforeUnmount () {
beforeUnmount() {
/* Performance optimization when destroying a large number of markers */
this.$children.forEach(marker => {
this.$children.forEach((marker) => {
if (marker.$clusterObject === this.$clusterObject) {
marker.$clusterObject = null
}

85
src/components/infoWindow.vue
View File

@@ -2,13 +2,90 @@
<template>
<div>
<div ref="flyaway"> <!-- so named because it will fly away to another component -->
<slot>
</slot>
<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'))
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()
})
},
})
</script>

82
src/components/infoWindowImpl.js
View File

@@ -1,82 +0,0 @@
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()
})
}
})

199
src/components/map.vue
View File

@@ -9,19 +9,188 @@
</template>
<script>
export default (function (x) { return x.default || x })(require('./mapImpl.js'))
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,
},
}
</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>

302
src/components/mapElementFactory.js
View File

@@ -1,149 +1,153 @@
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
}, {})
}
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
}, {})
}

4
src/components/mapElementMixin.js
View File

@@ -9,10 +9,10 @@
* */
export default {
inject: {
'$mapPromise': { default: 'abcdef' }
$mapPromise: { default: 'abcdef' },
},
provide () {
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

144
src/components/mapImpl.js
View File

@@ -1,5 +1,5 @@
import bindEvents from '../utils/bindEvents.js'
import {bindProps, getPropsValues} from '../utils/bindProps.js'
import { bindProps, getPropsValues } from '../utils/bindProps.js'
import mountableMixin from '../utils/mountableMixin.js'
import TwoWayBindingWrapper from '../utils/TwoWayBindingWrapper.js'
@@ -25,7 +25,7 @@ const props = {
},
mapTypeId: {
twoWay: true,
type: String
type: String,
},
tilt: {
twoWay: true,
@@ -33,8 +33,10 @@ const props = {
},
options: {
type: Object,
default () { return {} }
}
default() {
return {}
},
},
}
const events = [
@@ -54,27 +56,26 @@ const events = [
]
// Plain Google Maps methods exposed here for convenience
const linkedMethods = [
'panBy',
'panTo',
'panToBounds',
'fitBounds'
].reduce((all, methodName) => {
const linkedMethods = ['panBy', 'panTo', 'panToBounds', 'fitBounds'].reduce((all, methodName) => {
all[methodName] = function () {
if (this.$mapObject) { this.$mapObject[methodName].apply(this.$mapObject, arguments) }
if (this.$mapObject) {
this.$mapObject[methodName].apply(this.$mapObject, arguments)
}
}
return all
}, {})
// Other convenience methods exposed by Vue Google Maps
const customMethods = {
resize () {
resize() {
if (this.$mapObject) {
google.maps.event.trigger(this.$mapObject, 'resize')
}
},
resizePreserveCenter () {
if (!this.$mapObject) { return }
resizePreserveCenter() {
if (!this.$mapObject) {
return
}
const oldCenter = this.$mapObject.getCenter()
google.maps.event.trigger(this.$mapObject, 'resize')
@@ -84,98 +85,97 @@ const customMethods = {
/// Override mountableMixin::_resizeCallback
/// because resizePreserveCenter is usually the
/// expected behaviour
_resizeCallback () {
_resizeCallback() {
this.resizePreserveCenter()
}
},
}
export default {
mixins: [mountableMixin],
props: mappedPropsToVueProps(props),
provide () {
provide() {
this.$mapPromise = new Promise((resolve, reject) => {
this.$mapPromiseDeferred = { resolve, reject }
})
return {
'$mapPromise': this.$mapPromise
$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
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
finalLng() {
return this.center && typeof this.center.lng === 'function'
? this.center.lng()
: this.center.lng
},
finalLatLng() {
return { lat: this.finalLat, lng: this.finalLng }
},
finalLatLng () {
return {lat: this.finalLat, lng: this.finalLng}
}
},
watch: {
zoom (zoom) {
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']
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)
// 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)
// 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())
// 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)
}
decrement()
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())
})
const updateCenter = () => {
increment()
this.$mapObject.setCenter(this.finalLatLng)
}
this.$mapPromiseDeferred.resolve(this.$mapObject)
WatchPrimitiveProperties(
this,
['finalLat', 'finalLng'],
updateCenter
)
return this.$mapObject
})
this.$mapObject.addListener('zoom_changed', () => {
this.$emit('zoom_changed', this.$mapObject.getZoom())
.catch((error) => {
throw error
})
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,

49
src/components/marker.js
View File

@@ -3,7 +3,7 @@ import mapElementFactory from './mapElementFactory.js'
const props = {
animation: {
twoWay: true,
type: Number
type: Number,
},
attribution: {
type: Object,
@@ -11,31 +11,30 @@ const props = {
clickable: {
type: Boolean,
twoWay: true,
default: true
default: true,
},
cursor: {
type: String,
twoWay: true
twoWay: true,
},
draggable: {
type: Boolean,
twoWay: true,
default: false
default: false,
},
icon: {
twoWay: true
},
label: {
twoWay: true,
},
label: {},
opacity: {
type: Number,
default: 1
default: 1,
},
options: {
type: Object
type: Object,
},
place: {
type: Object
type: Object,
},
position: {
type: Object,
@@ -43,15 +42,15 @@ const props = {
},
shape: {
type: Object,
twoWay: true
twoWay: true,
},
title: {
type: String,
twoWay: true
twoWay: true,
},
zIndex: {
type: Number,
twoWay: true
twoWay: true,
},
visible: {
twoWay: true,
@@ -69,7 +68,7 @@ const events = [
'mouseup',
'mousedown',
'mouseover',
'mouseout'
'mouseout',
]
/**
@@ -91,26 +90,26 @@ export default mapElementFactory({
ctr: () => google.maps.Marker,
inject: {
'$clusterPromise': {
$clusterPromise: {
default: null,
},
},
render (h) {
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
} 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
)
return h('div', this.$slots.default)
}
},
emits: ['center_changed', 'zoom_changed', 'bounds_changed'],
unmounted () {
if (!this.$markerObject) { return }
unmounted() {
if (!this.$markerObject) {
return
}
if (this.$clusterObject) {
// Repaint will be performed in `updated()` of cluster
@@ -120,7 +119,7 @@ export default mapElementFactory({
}
},
beforeCreate (options) {
beforeCreate(options) {
if (this.$clusterPromise) {
options.map = null
}
@@ -128,7 +127,7 @@ export default mapElementFactory({
return this.$clusterPromise
},
afterCreate (inst) {
afterCreate(inst) {
if (this.$clusterPromise) {
this.$clusterPromise.then((co) => {
co.addMarker(inst)

10
src/components/placeInput.vue
View File

@@ -1,10 +0,0 @@
<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
View File

@@ -1,75 +0,0 @@
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,
}

122
src/components/polygon.js
View File

@@ -2,13 +2,13 @@ import mapElementFactory from './mapElementFactory.js'
const props = {
draggable: {
type: Boolean
type: Boolean,
},
editable: {
type: Boolean,
},
options: {
type: Object
type: Object,
},
path: {
type: Array,
@@ -33,88 +33,98 @@ const events = [
'mouseout',
'mouseover',
'mouseup',
'rightclick'
'rightclick',
]
export default mapElementFactory({
props: {
deepWatch: {
type: Boolean,
default: false
}
default: false,
},
},
events,
mappedProps: props,
name: 'polygon',
ctr: () => google.maps.Polygon,
beforeCreate (options) {
beforeCreate(options) {
if (!options.path) delete options.path
if (!options.paths) delete options.paths
},
afterCreate (inst) {
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()
this.$watch(
'paths',
(paths) => {
if (paths) {
clearEvents()
inst.setPaths(paths)
inst.setPaths(paths)
const updatePaths = () => {
this.$emit('paths_changed', inst.getPaths())
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))
}
}
const eventListeners = []
},
{
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())
}
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))
clearEvents = () => {
eventListeners.map((
[obj, listenerHandle] // eslint-disable-line no-unused-vars
) => google.maps.event.removeListener(listenerHandle))
}
}
},
{
deep: this.deepWatch,
immediate: true,
}
}, {
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,
})
}
)
},
})

61
src/components/polyline.js
View File

@@ -2,18 +2,18 @@ import mapElementFactory from './mapElementFactory.js'
const props = {
draggable: {
type: Boolean
type: Boolean,
},
editable: {
type: Boolean,
},
options: {
twoWay: false,
type: Object
type: Object,
},
path: {
type: Array,
twoWay: true
twoWay: true,
},
}
@@ -28,7 +28,7 @@ const events = [
'mouseout',
'mouseover',
'mouseup',
'rightclick'
'rightclick',
]
export default mapElementFactory({
@@ -37,41 +37,46 @@ export default mapElementFactory({
deepWatch: {
type: Boolean,
default: false,
}
},
},
events,
name: 'polyline',
ctr: () => google.maps.Polyline,
afterCreate (inst) {
afterCreate() {
var clearEvents = () => {}
this.$watch('path', (path) => {
if (path) {
clearEvents()
this.$watch(
'path',
(path) => {
if (path) {
clearEvents()
this.$polylineObject.setPath(path)
this.$polylineObject.setPath(path)
const mvcPath = this.$polylineObject.getPath()
const eventListeners = []
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))
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,
}
}, {
deep: this.deepWatch,
immediate: true,
})
}
)
},
})

8
src/components/rectangle.js
View File

@@ -3,7 +3,7 @@ import mapElementFactory from './mapElementFactory.js'
const props = {
bounds: {
type: Object,
twoWay: true
twoWay: true,
},
draggable: {
type: Boolean,
@@ -15,8 +15,8 @@ const props = {
},
options: {
type: Object,
twoWay: false
}
twoWay: false,
},
}
const events = [
@@ -30,7 +30,7 @@ const events = [
'mouseout',
'mouseover',
'mouseup',
'rightclick'
'rightclick',
]
export default mapElementFactory({

21
src/components/streetViewPanorama.vue
View File

@@ -1,21 +0,0 @@
<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
View File

@@ -1,147 +0,0 @@
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
})
},
}