0.0.4 • Published 5 years ago
vue-maps v0.0.4
Vue-maps
Vue maps is vue component for usage simple Usage of Google Maps.
Demo
Installation
npm install vue-mapsImport
import { GoogleMap } from 'vue-maps'
new Vue({
components: {
GoogleMap
},
data(){
return{
latitude: -33.950198,
longitude: 151.259302,
apiKey: "Google Api Key",
locations: [
{
title: "Bondi Beach",
latitude: -33.890542,
longitude: 151.274856
},
{
title: "Coogee Beach",
latitude: -33.923036,
longitude: 151.259052
},
{
title: "Cronulla Beach",
latitude: -34.028249,
longitude: 151.157507
},
{
title: "Manly Beach",
latitude: -33.80010128657071,
longitude: 151.28747820854187
},
{
title: "Maroubra Beach",
latitude: -33.950198,
longitude: 151.259302
}
]
}
}
})Usage
For Google Maps Usage
<GoogleMap
:latitude="latitude"
:longitude="longitude"
:apiKey="apiKey"
:zoom="8"
with-marker
:locations="locations"
/>Available Props
| Props | Type | Description |
|---|---|---|
| latitude | Float/Integer | Latitude is a measurement on a globe or map of location north or south of the Equator. |
| longitude | Float/Integer | Latitude is a measurement on a globe or map of location east or west of the Equator. |
| zoom | Integer | The maximum zoom level found at the given LatLng. Default: 10 |
| apiKey | String | Generated on google developers website. |
| with-marker | Boolean | Willing to show marker(s) on Google map. Default:true |
| locations | Array | Latitude, Longitude and title of the address(es) you want to show on the map as marker |
Dependency
This package is dependent on Google Maps and laravel-mix