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

Merge branch 'main' of https://github.com/fawmi/vue-google-maps

Browse Source 
# Conflicts:
#	docs/package-lock.json
This commit is contained in:
Fawad Mirzad
2021-02-14 07:38:21 +01:00
parent 6ca80a73a7 70d4c74b4d
commit af1289342d
25 changed files with 319 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
docs/src/.vuepress/config.js
View File

@@ -47,30 +47,31 @@ module.exports = {
{
title: 'Getting started',
path: '/docs/',
sidebarDepth: 2,
sidebarDepth: 0,
collapsable: false,
children: [
'/docs/introduction',
'/docs/getting-started',
]
},
{
title: 'Components',
collapsable: false,
path: '/components/',
sidebarDepth: 2,
sidebarDepth: 0,
children: [
'/components/introduction',
'/components/map',
'/components/marker',
'/components/info-window',
'/components/cluster',
'/components/polygon',
'/components/rectangle',
]
},
{
title: 'Advanced',
collapsable: false,
path: '/advanced/',
sidebarDepth: 2,
sidebarDepth: 0,
children: [
'/advanced/introduction',
]

17
docs/src/components/README.md
View File

@@ -1,10 +1,19 @@
# List
# Components
`@fawmi/vue-google-maps` provides a set of Vue.js 3 components wrapping the Google Maps API v3.
Currently `Map`, `Marker`, `InfoWindow`, `Polygon` and `Rectangle` are supported.
Currently `Map`, `Marker`, `InfoWindow`, `Cluster`, `Polygon` and `Rectangle` are supported.
Other components are still under development.
Checkout the docs page for each component to see how to use it.
[Map](./map.md)
Checkout getting started to read, how to install and use vue-google-maps
[Marker](./marker.md)
[InfoWindow](./info-window.md)
[Cluster](./cluster.md)
[Polygon](./polygon.md)
[Rectangle](./rectangle.md)

44
docs/src/components/cluster.md Normal file
View File

@@ -0,0 +1,44 @@
# Cluster
To cluster objects you simply wrap your markers with the cluster component.
```vue
<template>
<GmapMap
:center="center"
:zoom="7"
map-type-id="terrain"
style="width: 500px; height: 300px"
>
<GmapCluster>
<GmapMarker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:clickable="true"
:draggable="true"
@click="center=m.position"
/>
</GmapCluster>
</GmapMap>
</template>
<script>
export default {
name: 'App',
data() {
return {
center: {lat: 51.093048, lng: 6.842120},
markers: [
{
position: {
lat: 51.093048, lng: 6.842120
},
}
, // Along list of clusters
]
}
}
}
</script>
```

17
docs/src/components/introduction.md
View File

@@ -1,10 +1,19 @@
# Component list
# Components
`@fawmi/vue-google-maps` provides a set of Vue.js 3 components wrapping the Google Maps API v3.
Currently `Map`, `Marker`, `InfoWindow`, `Polygon` and `Rectangle` are supported.
Currently `Map`, `Marker`, `InfoWindow`, `Cluster`, `Polygon` and `Rectangle` are supported.
Other components are still under development.
Checkout the docs page for each component to see how to use it.
[Map](./map.md)
Checkout getting started to read, how to install and use vue-google-maps
[Marker](./marker.md)
[InfoWindow](./info-window.md)
[Cluster](./cluster.md)
[Polygon](./polygon.md)
[Rectangle](./rectangle.md)

2
docs/src/components/polygon.md Normal file
View File

@@ -0,0 +1,2 @@
# Polygon
Polygon is a simple wrapper around google's polygon component.

3
docs/src/components/rectangle.md Normal file
View File

@@ -0,0 +1,3 @@
# Rectangle
Polygon is a simple wrapper around google's polygon component.

54
docs/src/docs/README.md
View File

@@ -2,9 +2,59 @@
`@fawmi/vue-google-maps` provides a set of Vue.js 3 components wrapping the Google Maps API v3.
Currently `Map`, `Marker`, `InfoWindow`, `Polygon` and `Rectangle` are supported.
The following components are currently supported:
Other components are still under development.
`Map`, `Marker`, `Cluster`, `InfoWindow`, `Polygon`, `Rectangle`
Checkout getting started to read, how to install and use vue-google-maps
# Install and configure
to install it via NPM
```bash
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
Initialise the plugin in your `main.js`:
```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"
style="width: 100vw; height: 900px"
>
</GmapMap>
</template>
<script >
export default {
name: 'App',
data() {
return {
center: {lat: 51.093048, lng: 6.842120},
}
}
}
</script>
```

68
docs/src/docs/getting-started.md
View File

@@ -1,38 +1,60 @@
# Install and configure
# Introduction
## Install
`@fawmi/vue-google-maps` provides a set of Vue.js 3 components wrapping the Google Maps API v3.
The following components are currently supported:
`Map`, `Marker`, `Cluster`, `InfoWindow`, `Polygon`, `Rectangle`
Checkout getting started to read, how to install and use vue-google-maps
# Install and configure
to install it via NPM
```bash
npm install -S @fawmi/vue-google-maps
```
You can also install via Yarn
```bash
yarn add @fawmi/vue-google-maps
```
## Example
Here is a basic example
## Basic usage
You need an API Key. Learn how to [get an Api key ](https://developers.google.com/maps/documentation/javascript/get-api-key).
```javascript
##Configure Vue to use the Components
Initialise the plugin in your `main.js`:
```js
import { createApp } from 'vue'
import googleMap from '@fawmi/vue-google-maps'
import App from './App.vue';
const googleMapOption = {
apiKey: 'here_comes_your_api_key',
}
import * as VueGoogleMaps from '@fawmi/vue-google-maps'
const app = createApp(App);
app.use(googleMap, googleMapOption)
app.mount('#app')
app.use(VueGoogleMaps, {
load: {
key: 'YOUR_API_KEY_COMES_HERE',
},
}).mount('#app')
```
## Options
apiKey is required option to load maps, you may provide following additional options if you want.
## Use it anywhere in your components
###`mapIds`
Allows you to style the map using google cloud map styling
```vue
<template>
<GmapMap
:center="{lat: 51.093048, lng: 6.842120}"
:zoom="7"
map-type-id="terrain"
style="width: 100vw; height: 900px"
>
</GmapMap>
</template>
<script >
export default {
name: 'App',
data() {
return {
center: {lat: 51.093048, lng: 6.842120},
}
}
}
</script>
```

54
docs/src/docs/introduction.md Executable file → Normal file
View File

@@ -2,9 +2,59 @@
`@fawmi/vue-google-maps` provides a set of Vue.js 3 components wrapping the Google Maps API v3.
Currently `Map`, `Marker`, `InfoWindow`, `Polygon` and `Rectangle` are supported.
The following components are currently supported:
Other components are still under development.
`Map`, `Marker`, `Cluster`, `InfoWindow`, `Polygon`, `Rectangle`
Checkout getting started to read, how to install and use vue-google-maps
# Install and configure
to install it via NPM
```bash
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
Initialise the plugin in your `main.js`:
```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"
style="width: 100vw; height: 900px"
>
</GmapMap>
</template>
<script >
export default {
name: 'App',
data() {
return {
center: {lat: 51.093048, lng: 6.842120},
}
}
}
</script>
```

2
readme.md
View File

@@ -145,7 +145,7 @@ If you need to gain access to the `google` object, you can access it by getting
/>
</template>
<script>
import {gmapApi} from 'vue2-google-maps'
import {gmapApi} from '@fawmi/vue-google-maps'
export default {
mounted() {

8
src/.babelrc
View File

@@ -1,8 +0,0 @@
{
"presets": ["@babel/preset-env"],
"plugins": [
"@babel/plugin-proposal-object-rest-spread",
"transform-inline-environment-variables",
"minify-dead-code-elimination"
]
}

9
src/components/infoWindow.vue
View File

@@ -1,9 +1,6 @@
/* vim: set softtabstop=2 shiftwidth=2 expandtab : */
<template>
<div>
<div ref="flyaway">
<!-- so named because it will fly away to another component -->
<div ref="infoWindow">
<slot> </slot>
</div>
</div>
@@ -51,12 +48,12 @@ export default mapElementFactory({
},
mounted() {
const el = this.$refs.flyaway
const el = this.$refs.infoWindow
el.parentNode.removeChild(el)
},
beforeCreate(options) {
options.content = this.$refs.flyaway
options.content = this.$refs.infoWindow
if (this.$markerPromise) {
delete options.position

2
src/components/polygon.js
View File

@@ -54,7 +54,7 @@ export default mapElementFactory({
},
afterCreate(inst) {
var clearEvents = () => {}
let clearEvents = () => {}
// Watch paths, on our own, because we do not want to set either when it is
// empty

2
src/components/polyline.js
View File

@@ -45,7 +45,7 @@ export default mapElementFactory({
ctr: () => google.maps.Polyline,
afterCreate() {
var clearEvents = () => {}
let clearEvents = () => {}
this.$watch(
'path',

18
src/load-google-maps.js Normal file
View File

@@ -0,0 +1,18 @@
import {Env} from "@/utils/env";
import {createMapScript} from "@/utils/create-map-script";
let isApiSetUp = false
export function loadGMapApi (options) {
if (Env.isServer()) {
return;
}
if (!isApiSetUp) {
isApiSetUp = true
const googleMapScript = createMapScript(options);
document.head.appendChild(googleMapScript)
} else {
throw new Error('You already started the loading of google maps')
}
}

20
src/main.js
View File

@@ -1,5 +1,5 @@
import lazy from './utils/lazyValue'
import { loadGmapApi } from './manager'
import { loadGMapApi } from './load-google-maps'
import { createApp } from 'vue'
import Marker from './components/marker'
import Polyline from './components/polyline'
@@ -14,11 +14,11 @@ import Autocomplete from './components/autocomplete.vue'
import MapElementMixin from './components/mapElementMixin'
import MapElementFactory from './components/mapElementFactory'
import MountableMixin from './utils/mountableMixin'
import {Env} from "./utils/env";
let GmapApi = null
// export everything
export {
loadGmapApi,
loadGMapApi,
Marker,
Polyline,
Polygon,
@@ -34,18 +34,12 @@ export {
}
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: function () {
return { gmapApi: null }
@@ -93,14 +87,13 @@ function makeGmapApiPromiseLazy(options) {
return lazy(() => {
// Load the
// This will only be evaluated once
if (typeof window === 'undefined') {
// server side -- never resolve this promise
if (Env.isServer()) {
return new Promise(() => {}).then(onApiLoaded)
} else {
return new Promise((resolve, reject) => {
try {
window['vueGoogleMapsInit'] = resolve
loadGmapApi(options.load, options.loadCn)
loadGMapApi(options.load)
} catch (err) {
reject(err)
}
@@ -112,8 +105,7 @@ function makeGmapApiPromiseLazy(options) {
// 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
if (Env.isServer()) {
return
}
window['vueGoogleMapsInit'] = resolve

76
src/manager.js
View File

@@ -1,76 +0,0 @@
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
/* eslint-disable no-prototype-builtins */
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')
}
}

12
src/utils/bindProps.js
View File

@@ -1,8 +1,5 @@
import WatchPrimitiveProperties from '../utils/WatchPrimitiveProperties'
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1)
}
import {Str} from "./string";
export function getPropsValues(vueInst, props) {
return Object.keys(props).reduce((acc, prop) => {
@@ -26,8 +23,8 @@ export function bindProps(vueInst, googleMapsInst, props) {
if (noBind) continue
const setMethodName = 'set' + capitalizeFirstLetter(attribute)
const getMethodName = 'get' + capitalizeFirstLetter(attribute)
const setMethodName = 'set' + Str.capitalizeFirstLetter(attribute)
const getMethodName = 'get' + Str.capitalizeFirstLetter(attribute)
const eventName = attribute.toLowerCase() + '_changed'
const initialValue = vueInst[attribute]
@@ -42,8 +39,7 @@ export function bindProps(vueInst, googleMapsInst, props) {
// although this may really be the user's responsibility
if (type !== Object || !trackProperties) {
// Track the object deeply
vueInst.$watch(
attribute,
vueInst.$watch(attribute,
() => {
const attributeValue = vueInst[attribute]

25
src/utils/create-map-script.js Normal file
View File

@@ -0,0 +1,25 @@
export function createMapScript(options) {
const googleMapScript = document.createElement('SCRIPT')
if (typeof options !== 'object') {
throw new Error('options should be an object')
}
// libraries
/* eslint-disable no-prototype-builtins */
if (Array.prototype.isPrototypeOf(options.libraries)) {
options.libraries = options.libraries.join(',')
}
options['callback'] = 'vueGoogleMapsInit'
let baseUrl = 'https://maps.googleapis.com/maps/api/js?'
let url =
baseUrl +
Object.keys(options)
.map((key) => encodeURIComponent(key) + '=' + encodeURIComponent(options[key])).join('&')
googleMapScript.setAttribute('src', url)
googleMapScript.setAttribute('async', '')
googleMapScript.setAttribute('defer', '')
return googleMapScript;
}

5
src/utils/env.js Normal file
View File

@@ -0,0 +1,5 @@
export class Env {
static isServer() {
return typeof document === 'undefined';
}
}

3
src/utils/event.js Normal file
View File

@@ -0,0 +1,3 @@
export class eventUtils {
}

19
src/utils/lazyValue.js
View File

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

8
src/utils/simulateArrowDown.js
View File

@@ -2,17 +2,17 @@
// 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
const _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
const origListener = listener
listener = function (event) {
var suggestionSelected = document.getElementsByClassName('pac-item-selected').length > 0
const suggestionSelected = document.getElementsByClassName('pac-item-selected').length > 0
if (event.which === 13 && !suggestionSelected) {
var simulatedEvent = document.createEvent('Event')
const simulatedEvent = document.createEvent('Event')
simulatedEvent.keyCode = 40
simulatedEvent.which = 40
origListener.apply(input, [simulatedEvent])

5
src/utils/string.js Normal file
View File

@@ -0,0 +1,5 @@
export class Str {
static capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1)
}
}

2
test/test-pages/test-page-without-maps.html
View File

@@ -17,7 +17,7 @@
<script src="../../dist/vue-google-maps.js"></script>
<script>
// This page does not have maps, but we use Vue2-google-maps
// This page does not have maps, but we use @fawmi/vue-google-maps
// Must ensure that Google Maps library is NEVER loaded
Vue.use(VueGoogleMaps, {
load: {