Akryum / Vue Googlemaps
Integrate Google Maps in your Vue application
Stars: β 516
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Vue Googlemaps
Vue Gmaps
Search places and address using Google Maps API
Stars: β 108 (-79.07%)
Mutual labels: google-maps, vuejs2
Jquery Store Locator Plugin
A store locator plugin using Google Maps API version 3
Stars: β 471 (-8.72%)
Mutual labels: google-maps
Vue Grid Layout
A draggable and resizable grid layout, for Vue.js.
Stars: β 5,170 (+901.94%)
Mutual labels: vuejs2
Dashboard
A dashboard scaffolding based on Vue.js 3.0 created by Vite.
Stars: β 497 (-3.68%)
Mutual labels: vuejs2
Trail Android
π Simple, smooth animation for route / polylines on google maps using projections.
Stars: β 465 (-9.88%)
Mutual labels: google-maps
Vue Socket.io Extended
βοΈβ‘οΈ Socket.io bindings for Vue.js and Vuex (inspired by Vue-Socket.io)
Stars: β 506 (-1.94%)
Mutual labels: vuejs2
Sing App Vue Dashboard
Vue.js admin dashboard template built with Bootstrap 4.5
Stars: β 482 (-6.59%)
Mutual labels: vuejs2
Vue Develop Template
A Vue.js template that can support more than 100 thousand lines of code in our business, I hope it can help you too~
Stars: β 481 (-6.78%)
Mutual labels: vuejs2
Vue Mq
π± π» Define your breakpoints and build responsive design semantically and declaratively in a mobile-first way with Vue.
Stars: β 474 (-8.14%)
Mutual labels: vuejs2
Vue Masonry
π Vue.js directive for masonry blocks layouting β
Stars: β 509 (-1.36%)
Mutual labels: vuejs2
Xamarin.forms.googlemaps
Map library for Xamarin.Forms using Google maps API
Stars: β 483 (-6.4%)
Mutual labels: google-maps
Vue Stripe Elements
A Vue 2 component collection for StripeElements
Stars: β 498 (-3.49%)
Mutual labels: vuejs2
Vue Password Strength Meter
π Password strength meter based on zxcvbn in vue.js
Stars: β 510 (-1.16%)
Mutual labels: vuejs2
Vue Star Rating
βοΈ A simple, highly customisable star rating component for Vue 2.x. / 3.x
Stars: β 509 (-1.36%)
Mutual labels: vuejs2
vue-googlemaps
Integrate Google Maps in your Vue application in a "Vue-way".
This library is Work In Progress. More components will be available in the 1.0 release.
The main objective of the library is to use Google Maps using Vue components in a way that feels natural to Vue developpers (with props, events, slots...).
Sponsors
Gold
Silver
Bronze
Table of Contents
Installation
npm i -S vue-googlemaps
yarn add vue-googlemaps
You need to polyfill some ES2015 features in old browsers.
Usage
You need a Google API key from the developer console.
import 'vue-googlemaps/dist/vue-googlemaps.css'
import VueGoogleMaps from 'vue-googlemaps'
Vue.use(VueGoogleMaps, {
load: {
// Google API key
apiKey: 'your-google-api-key',
// Enable more Google Maps libraries here
libraries: ['places'],
// Use new renderer
useBetaRenderer: false,
},
})
Builtin components
(Documentation is work-in-progress)
- Circle
- Geocoder
- Map
- Marker
- NearbyPlaces
- PlaceDetails
- UserPosition
- More to come!
Create you own components
Here is an example of what a Marker
component would look like:
import { MapElement } from 'vue-googlemaps'
// Those Vue props will update automatically
// (Two-way binding with .sync modifier)
const boundProps = [
'animation',
'clickable',
'cursor',
'draggable',
// ...
]
// Events from Google Maps emitted as Vue events
const redirectedEvents = [
'click',
'rightclick',
'dblclick',
'drag',
// ...
]
export default {
mixins: [
// You need to use this mixin
MapElement,
],
// When Google Maps is ready
googleMapsReady () {
const options = Object.assign({}, this.$props)
options.map = this.$_map
// Create Google Maps objects
this.$_marker = new window.google.maps.Marker(options)
// Bind the Vue props
this.bindProps(this.$_marker, boundProps)
// Emit the events from Google Maps
this.redirectEvents(this.$_marker, redirectedEvents)
},
beforeDestroy () {
// Teardown
if (this.$_marker) {
this.$_marker.setMap(null)
}
},
}
Quick Examples
Map with markers
<googlemaps-map
:center.sync="center"
:zoom.sync="zoom"
:options="mapOptions"
@idle="onIdle"
@click="onMapClick">
<!-- User Position -->
<googlemaps-user-position
@update:position="setUserPosition"
/>
<googlemaps-marker
v-for="marker of markers"
:key="marker._id"
:label="{
color: marker === currentmarker ? 'white' : 'black',
fontFamily: 'Material Icons',
fontSize: '20px',
text: 'star_rate',
}"
:position="marker.position"
@click="selectMarker(marker._id)"
/>
</googlemaps-map>
Place Details
<googlemaps-place-details
:request="{
placeId: placeId
}"
@results="results => ..."
>
<template slot-scope="props">
<div class="name">{{ props.results.name }}</div>
<div class="address">{{ props.results.formatted_address }}</div>
</template>
</googlemaps-place-details>
Geocoder
<googlemaps-geocoder
:request="{
location: latLng,
}"
@results="results => ..."
>
<template slot-scope="props">
<div class="name">{{ props.results[1].name }}</div>
<div class="address">{{ props.results[0].formatted_address }}</div>
</template>
</googlemaps-geocoder>
Nearby places
<googlemaps-map
@idle="map => mapBounds = map.getBounds()"
/>
<googlemaps-nearby-places
:request="{
bounds: mapBounds
}"
:filter="result => !result.types.includes('locality')"
@results="results => ..."
>
<template slot-scope="props">
<div v-if="props.loading">Loading...</div>
<div v-for="result of props.result">
<div>
<img
v-if="result.photos"
:src="result.photos[0].getUrl({ maxWidth: 80, maxHeight: 80 })"
/>
{{ result.name }}
</div>
<div>{{ result.vicinity }}</div>
</div>
</template>
</googlemaps-nearby-places>
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].