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.
77 lines
2.3 KiB
77 lines
2.3 KiB
<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>
|
|
|