From 62595c242169dc0c91be9a0fd0f26063fedfe496 Mon Sep 17 00:00:00 2001 From: Fawad Mirzad Date: Sat, 13 Feb 2021 18:58:41 +0100 Subject: [PATCH 01/12] Extract sting utility to an external function --- src/utils/bindProps.js | 12 ++++-------- src/utils/string.js | 5 +++++ 2 files changed, 9 insertions(+), 8 deletions(-) create mode 100644 src/utils/string.js diff --git a/src/utils/bindProps.js b/src/utils/bindProps.js index cb888bc..593cec1 100644 --- a/src/utils/bindProps.js +++ b/src/utils/bindProps.js @@ -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] diff --git a/src/utils/string.js b/src/utils/string.js new file mode 100644 index 0000000..830844d --- /dev/null +++ b/src/utils/string.js @@ -0,0 +1,5 @@ +export class Str { + static capitalizeFirstLetter(string) { + return string.charAt(0).toUpperCase() + string.slice(1) + } +} From 6cb357d41e327450d9f1e9da9fbfe251ebbefff7 Mon Sep 17 00:00:00 2001 From: Fawad Mirzad Date: Sat, 13 Feb 2021 19:09:37 +0100 Subject: [PATCH 02/12] Improve code quality --- src/.babelrc | 8 ---- src/main.js | 6 +-- src/manager.js | 76 ++++------------------------------ src/utils/create-map-script.js | 32 ++++++++++++++ src/utils/env.js | 5 +++ src/utils/event.js | 3 ++ 6 files changed, 52 insertions(+), 78 deletions(-) delete mode 100644 src/.babelrc create mode 100644 src/utils/create-map-script.js create mode 100644 src/utils/env.js create mode 100644 src/utils/event.js diff --git a/src/.babelrc b/src/.babelrc deleted file mode 100644 index 32aec79..0000000 --- a/src/.babelrc +++ /dev/null @@ -1,8 +0,0 @@ -{ - "presets": ["@babel/preset-env"], - "plugins": [ - "@babel/plugin-proposal-object-rest-spread", - "transform-inline-environment-variables", - "minify-dead-code-elimination" - ] -} diff --git a/src/main.js b/src/main.js index 6ead270..bdf3267 100644 --- a/src/main.js +++ b/src/main.js @@ -1,5 +1,5 @@ import lazy from './utils/lazyValue' -import { loadGmapApi } from './manager' +import { loadGMapApi } from './manager' import { createApp } from 'vue' import Marker from './components/marker' import Polyline from './components/polyline' @@ -18,7 +18,7 @@ let GmapApi = null // export everything export { - loadGmapApi, + loadGMapApi, Marker, Polyline, Polygon, @@ -100,7 +100,7 @@ function makeGmapApiPromiseLazy(options) { return new Promise((resolve, reject) => { try { window['vueGoogleMapsInit'] = resolve - loadGmapApi(options.load, options.loadCn) + loadGMapApi(options.load, options.loadCn) } catch (err) { reject(err) } diff --git a/src/manager.js b/src/manager.js index 69f9fbc..10191de 100644 --- a/src/manager.js +++ b/src/manager.js @@ -1,74 +1,16 @@ -let isApiSetUp = false +import {Env} from "@/utils/env"; +import {createMapScript} from "@/utils/create-map-script"; -/** - * @param apiKey API Key, or object with the URL parameters. For example - * to use Google Maps Premium API, pass - * `{ client: }`. - * 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() - * - * load({ - * key: , - * }) - * - * load({ - * client: , - * channel: - * }) - * ``` - */ -export const loadGmapApi = (options, loadCn) => { - if (typeof document === 'undefined') { - // Do nothing if run from server-side - return +let isApiSetUp = false +export function loadGMapApi (options) { + + if (Env.isServer()) { + 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', '') + const googleMapScript = createMapScript(options); document.head.appendChild(googleMapScript) } else { throw new Error('You already started the loading of google maps') diff --git a/src/utils/create-map-script.js b/src/utils/create-map-script.js new file mode 100644 index 0000000..e08a340 --- /dev/null +++ b/src/utils/create-map-script.js @@ -0,0 +1,32 @@ +export function createMapScript(options) { + 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/' + + 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', '') + + return googleMapScript; +} diff --git a/src/utils/env.js b/src/utils/env.js new file mode 100644 index 0000000..694a4af --- /dev/null +++ b/src/utils/env.js @@ -0,0 +1,5 @@ +export class Env { + static isServer() { + return typeof document === 'undefined'; + } +} diff --git a/src/utils/event.js b/src/utils/event.js new file mode 100644 index 0000000..5dfa5fa --- /dev/null +++ b/src/utils/event.js @@ -0,0 +1,3 @@ +export class eventUtils { + +} From 455a95912c584b7642005ae65ccf10bef1d00550 Mon Sep 17 00:00:00 2001 From: Fawad Mirzad Date: Sat, 13 Feb 2021 19:12:12 +0100 Subject: [PATCH 03/12] Remove outdated informations --- src/utils/create-map-script.js | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/utils/create-map-script.js b/src/utils/create-map-script.js index e08a340..ae03106 100644 --- a/src/utils/create-map-script.js +++ b/src/utils/create-map-script.js @@ -1,10 +1,5 @@ export function createMapScript(options) { 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') } @@ -15,14 +10,12 @@ export function createMapScript(options) { options.libraries = options.libraries.join(',') } options['callback'] = 'vueGoogleMapsInit' - let baseUrl = 'https://maps.googleapis.com/' + let baseUrl = 'https://maps.googleapis.com/maps/api/js?' let url = baseUrl + - 'maps/api/js?' + Object.keys(options) - .map((key) => encodeURIComponent(key) + '=' + encodeURIComponent(options[key])) - .join('&') + .map((key) => encodeURIComponent(key) + '=' + encodeURIComponent(options[key])).join('&') googleMapScript.setAttribute('src', url) googleMapScript.setAttribute('async', '') From 402a03b842ebcb4c46aea44429dd744f7d0476d9 Mon Sep 17 00:00:00 2001 From: Fawad Mirzad Date: Sat, 13 Feb 2021 19:15:55 +0100 Subject: [PATCH 04/12] Improve file naming --- src/{manager.js => load-google-maps.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/{manager.js => load-google-maps.js} (100%) diff --git a/src/manager.js b/src/load-google-maps.js similarity index 100% rename from src/manager.js rename to src/load-google-maps.js From 01eee58476eb16ac6fac6402fb244745f323b43d Mon Sep 17 00:00:00 2001 From: Fawad Mirzad Date: Sat, 13 Feb 2021 19:16:09 +0100 Subject: [PATCH 05/12] Improve code --- src/components/infoWindow.vue | 9 +++------ src/main.js | 2 +- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/components/infoWindow.vue b/src/components/infoWindow.vue index 49fa819..3675770 100644 --- a/src/components/infoWindow.vue +++ b/src/components/infoWindow.vue @@ -1,9 +1,6 @@ -/* vim: set softtabstop=2 shiftwidth=2 expandtab : */ - +``` + diff --git a/docs/src/components/introduction.md b/docs/src/components/introduction.md index 9dbe5f5..d4b98a7 100755 --- a/docs/src/components/introduction.md +++ b/docs/src/components/introduction.md @@ -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 \ No newline at end of file +[Marker](./marker.md) + +[InfoWindow](./info-window.md) + +[Cluster](./cluster.md) + +[Polygon](./polygon.md) + +[Rectangle](./rectangle.md) diff --git a/docs/src/components/polygon.md b/docs/src/components/polygon.md new file mode 100644 index 0000000..07a6eee --- /dev/null +++ b/docs/src/components/polygon.md @@ -0,0 +1,2 @@ +# Polygon +Polygon is a simple wrapper around google's polygon component. diff --git a/docs/src/components/rectangle.md b/docs/src/components/rectangle.md new file mode 100644 index 0000000..8009a1e --- /dev/null +++ b/docs/src/components/rectangle.md @@ -0,0 +1,3 @@ +# Rectangle +Polygon is a simple wrapper around google's polygon component. + diff --git a/docs/src/docs/README.md b/docs/src/docs/README.md index 604b485..0e4e27f 100644 --- a/docs/src/docs/README.md +++ b/docs/src/docs/README.md @@ -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 \ No newline at end of file +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 + + + +``` diff --git a/docs/src/docs/getting-started.md b/docs/src/docs/getting-started.md index 4e0ef3a..0e4e27f 100644 --- a/docs/src/docs/getting-started.md +++ b/docs/src/docs/getting-started.md @@ -1,38 +1,60 @@ +# Introduction + +`@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 -## Install - -to install it via NPM +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 + + +``` diff --git a/docs/src/docs/introduction.md b/docs/src/docs/introduction.md old mode 100755 new mode 100644 index 604b485..0e4e27f --- a/docs/src/docs/introduction.md +++ b/docs/src/docs/introduction.md @@ -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 \ No newline at end of file +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 + + + +```