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

Clean up code

Browse Source
This commit is contained in:
Fawad Mirzad
2021-02-13 18:00:17 +01:00
parent 664dba173b
commit 27095b88a3
18 changed files with 3 additions and 2162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.env
View File

@@ -1 +0,0 @@
VUE_APP_TITLE=Vue3 Mobile

1
.env.development
View File

@@ -1 +0,0 @@
VUE_APP_API_BASE_URL=https://development.example.com

1
.env.production
View File

@@ -1 +0,0 @@
VUE_APP_API_BASE_URL=https://production.example.com

0
.eslintignore
View File

39
components/Circle.vue
View File

@@ -1,39 +0,0 @@
<template>
<div>Cirlce</div>
</template>
<script >
import { inject } from "vue";
export default {
props: {
position: {
required: true
},
radius: {
required: true
}
},
setup(props) {
const mapPromise = inject(
"mapPromise"
);
if (mapPromise) {
mapPromise.then((googleMap) => {
new google.maps.Circle({
strokeColor: "red",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map: googleMap,
center: new google.maps.LatLng(props.position.lat, props.position.lng),
radius: props.radius
});
});
}
return {};
}
};
</script>

3
components/InfoWindow.vue
View File

@@ -1,3 +0,0 @@
<template>
<slot></slot>
</template>

98
components/Map.vue
View File

@@ -1,98 +0,0 @@
<template>
<div id="map" ref="mapContainer">
<slot></slot>
</div>
</template>
<script>
import { Loader } from "../utils/load-google-maps";
import { fitMapToMarkers } from "../utils/center-markers";
import { ref, provide, watch, inject } from "vue";
export default {
props: {
center: {
required: false
},
zoom: {
type: Number,
default: 12
},
mapTypeId: {
default: "terrain"
},
mapStyles: {
type: Array,
required: true
},
centerGeoCoordinates: {
type: Array,
required: false
},
options: {
zoomControl: true,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
rotateControl: false,
fullscreenControl: true,
disableDefaultUI: false
}
},
setup: function(props) {
const mapContainer = ref(null);
const apiKey = inject(
"apiKey"
);
const mapIds = inject(
"mapIds"
);
const mapsLoader = new Loader({
apiKey: apiKey,
version: "weekly",
mapIds: mapIds,
libraries: [
"places",
"drawing",
"geometry",
"visualization",
"localContext"
]
});
const disableDefaultUi = props?.options?.disableDefaultUI ? true : false
const mapPromise = mapsLoader.load().then(() => {
const map = new google.maps.Map(mapContainer.value, {
zoom: props.zoom,
mapId: "889b7f2cfa338388",
center: new google.maps.LatLng(51.2228924, 6.788524),
disableDefaultUI: disableDefaultUi,
gestureHandling: "auto",
});
if (props.centerGeoCoordinates && props.centerGeoCoordinates.length) {
fitMapToMarkers(props.centerGeoCoordinates, map);
}
return map;
});
provide("mapPromise", mapPromise);
return {
mapContainer,
mapPromise
};
}
};
</script>
<style>
#map {
height: 80vh;
}
</style>

64
components/Marker.vue
View File

@@ -1,64 +0,0 @@
<template>
<div ref="markerRef" >
<slot></slot>
</div>
</template>
<script>
import {inject, ref, computed} from "vue";
export default {
props: {
location: {
required: true
},
infoWindow: {
type: String,
required: false
},
icon: {
required: false
}
},
setup(props) {
const markerRef = ref();
const mapPromise = inject(
"mapPromise"
);
const hasLocation = computed(()=> props?.location?.lat && props?.location?.lng);
if (mapPromise && hasLocation.value) {
mapPromise.then((googleMap) => {
const infoWindow = new google.maps.InfoWindow();
const options = {
position: new google.maps.LatLng(
props.location.lat,
props.location.lng
),
map: googleMap
};
if (props.icon) {
options.icon = props.icon
}
const marker = new google.maps.Marker({
...options,
});
marker.addListener("click", (event) => {
infoWindow.setContent(markerRef.value.innerHTML);
infoWindow.open(googleMap, marker);
});
});
}
return {
markerRef,
};
return {};
}
};
</script>

35
components/Polygon.vue
View File

@@ -1,35 +0,0 @@
<template>
<div>marker</div>
</template>
<script >
import { inject } from "vue";
export default {
props: {
coords: {
}
},
setup(props) {
const mapPromise = inject(
"mapPromise"
);
if (mapPromise) {
mapPromise.then((googleMap) => {
const bermudaTriangle = new google.maps.Polygon({
paths: props.coords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
});
bermudaTriangle.setMap(googleMap);
});
}
return {};
}
};
</script>

38
components/Rectangle.vue
View File

@@ -1,38 +0,0 @@
<template>
<div>
auto complete
</div>
</template>
<script >
import { inject } from "vue";
export default {
props: {
bounds: {
required: true
},
},
setup(props) {
const mapPromise = inject(
"mapPromise"
);
if (mapPromise) {
mapPromise.then((map) => {
const rectangle = new google.maps.Rectangle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map,
bounds: props.bounds
});
});
}
return {};
}
};
</script>

19
index.js
View File

@@ -1,19 +0,0 @@
import GoogleMap from './components/Map'
import Marker from './components/Marker'
import Circle from './components/Circle'
import Polygon from './components/Polygon'
import Rectangle from './components/Rectangle'
import InfoWindow from './components/InfoWindow'
export default {
install: (app, options) => {
app.component('GoogleMap', GoogleMap)
app.component('Marker', Marker)
app.component('Circle', Circle)
app.component('Polygon', Polygon)
app.component('Rectangle', Rectangle)
app.component('InfoWindow', InfoWindow)
app.provide('apiKey', options.apiKey)
app.provide('mapIds', options.mapIds)
}
}

1816
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@@ -1,7 +1,7 @@
{
"name": "@fawmi/vue-google-maps",
"description": "Google Map components for Vue.js 3",
"version": "0.5.1",
"version": "0.5.2",
"private": false,
"main": "src/main.js",
"bugs": {

4
service/commands/build.js
View File

@@ -1,9 +1,5 @@
'use strict'
const loadEnv = require('../utils/loadEnv')
loadEnv()
loadEnv('production')
const rm = require('rimraf')
const webpack = require('webpack')

5
service/config/css.js
View File

@@ -14,9 +14,6 @@ const genStyleRules = () => {
esModule: false, // css-loader using ES Modules as default in v4, but vue-style-loader support cjs only.
},
}
const postcssLoader = {
loader: 'postcss-loader'
}
const extractPluginLoader = {
loader: MiniCssExtractPlugin.loader,
}
@@ -25,7 +22,7 @@ const genStyleRules = () => {
}
function createCSSRule(test, loader, loaderOptions) {
const loaders = [cssLoader, postcssLoader]
const loaders = [cssLoader]
if (isProd) {
loaders.unshift(extractPluginLoader)

39
service/utils/loadEnv.js
View File

@@ -1,39 +0,0 @@
'use strict'
const path = require('path')
const dotenv = require('dotenv')
const dotenvExpand = require('dotenv-expand')
const { error } = require('./logger')
module.exports = function loadEnv(mode) {
const basePath = path.resolve(process.cwd(), `.env${mode ? `.${mode}` : ``}`)
const localPath = `${basePath}.local`
const load = (envPath) => {
try {
const env = dotenv.config({ path: envPath, debug: process.env.DEBUG })
dotenvExpand(env)
} catch (err) {
// only ignore error if file is not found
if (err.toString().indexOf('ENOENT') < 0) {
error(err)
}
}
}
load(localPath)
load(basePath)
// by default, NODE_ENV and BABEL_ENV are set to "development" unless mode
// is production or test. However the value in .env files will take higher
// priority.
if (mode) {
const defaultNodeEnv = mode === 'production' || mode === 'test' ? mode : 'development'
if (process.env.NODE_ENV == null) {
process.env.NODE_ENV = defaultNodeEnv
}
if (process.env.BABEL_ENV == null) {
process.env.BABEL_ENV = defaultNodeEnv
}
}
}

0
utils/center-markers.js → src/utils/center-markers.js
View File

0
utils/load-google-maps.js → src/utils/load-google-maps.js
View File