You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
78 lines
2.3 KiB
78 lines
2.3 KiB
6 years ago
|
<template>
|
||
|
<gmap-map
|
||
|
id="map"
|
||
|
:center="center"
|
||
|
:zoom="13"
|
||
|
:options="options"
|
||
|
map-type-id="terrain"
|
||
|
>
|
||
|
<gmap-marker :position="center">
|
||
|
</gmap-marker>
|
||
|
</gmap-map>
|
||
|
</template>
|
||
|
<script>
|
||
|
import {API_KEY} from './Maps/API_KEY'
|
||
|
import Vue from 'vue'
|
||
|
import * as VueGoogleMaps from 'vue2-google-maps'
|
||
|
Vue.use(VueGoogleMaps, {
|
||
|
load: {
|
||
|
key: API_KEY
|
||
|
}
|
||
|
})
|
||
|
export default {
|
||
|
data () {
|
||
|
return {
|
||
|
center: {
|
||
|
lat: 40.748817,
|
||
|
lng: -73.985428
|
||
|
},
|
||
|
options: {
|
||
|
styles: [{
|
||
|
'featureType': 'water',
|
||
|
'stylers': [{'saturation': 43}, {'lightness': -11}, {'hue': '#0088ff'}]
|
||
|
}, {
|
||
|
'featureType': 'road',
|
||
|
'elementType': 'geometry.fill',
|
||
|
'stylers': [{'hue': '#ff0000'}, {'saturation': -100}, {'lightness': 99}]
|
||
|
}, {
|
||
|
'featureType': 'road',
|
||
|
'elementType': 'geometry.stroke',
|
||
|
'stylers': [{'color': '#808080'}, {'lightness': 54}]
|
||
|
}, {
|
||
|
'featureType': 'landscape.man_made',
|
||
|
'elementType': 'geometry.fill',
|
||
|
'stylers': [{'color': '#ece2d9'}]
|
||
|
}, {
|
||
|
'featureType': 'poi.park',
|
||
|
'elementType': 'geometry.fill',
|
||
|
'stylers': [{'color': '#ccdca1'}]
|
||
|
}, {
|
||
|
'featureType': 'road',
|
||
|
'elementType': 'labels.text.fill',
|
||
|
'stylers': [{'color': '#767676'}]
|
||
|
}, {
|
||
|
'featureType': 'road',
|
||
|
'elementType': 'labels.text.stroke',
|
||
|
'stylers': [{'color': '#ffffff'}]
|
||
|
}, {'featureType': 'poi', 'stylers': [{'visibility': 'off'}]}, {
|
||
|
'featureType': 'landscape.natural',
|
||
|
'elementType': 'geometry.fill',
|
||
|
'stylers': [{'visibility': 'on'}, {'color': '#b8cb93'}]
|
||
|
}, {'featureType': 'poi.park', 'stylers': [{'visibility': 'on'}]}, {
|
||
|
'featureType': 'poi.sports_complex',
|
||
|
'stylers': [{'visibility': 'on'}]
|
||
|
}, {'featureType': 'poi.medical', 'stylers': [{'visibility': 'on'}]}, {
|
||
|
'featureType': 'poi.business',
|
||
|
'stylers': [{'visibility': 'simplified'}]
|
||
|
}]
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</script>
|
||
|
<style>
|
||
|
#map {
|
||
|
min-height: calc(100vh - 123px);
|
||
|
}
|
||
|
</style>
|