vue2-google-maps - npm Package Compare versions

Comparing version 0.2.2 to 0.3.0

API.md

 # vue2-google-maps
 
 ## Note on events
-__All events are prefixed with `g-`. Example : `g-click` for compatibility with the previous
-version of `vue-google-maps`. (TODO: decide whether to disable this, since Vue 2.x distinguishes
-between component events and native DOM events)__
+__Update(16 Oct 2016): All events are NO LONGER prefixed with `g-`__
 
+Most of the properties and events here are not documented unless they do not
+exist in the original [Google Maps API](https://developers.google.com/maps/documentation/javascript/reference).
+Otherwise they behave similarly to a direct call to the API so you are advised to read that
+instead.
+
+An exception is two-way bindings -- the `center_changed` event on Map instances
+have no argument, but in vue2-google-maps they do in order to ease two-way updates.
+
 ## Table of Contents
 
 * [vue2-google-maps](#vue2-google-maps)
-   * [Table of Contents](#table-of-contents)
+   * [Note on events](#note-on-events)
    * [<a name="user-content-getting-started-cdn"></a> Getting Started (with CDN)](#-getting-started-with-cdn)
@@ -27,2 +33,4 @@ * [<a name="user-content-getting-started-npm"></a> Getting Started (with NPM)](#-getting-started-with-npm)
             * [fitBounds()](#fitbounds)
+            * [resize()](#resize)
+            * [resizePreserveCenter()](#resizepreservecenter)
          * [Properties](#properties)
@@ -197,2 +205,9 @@ * [center : {lat: number, lng: number} | google.maps.LatLng†](#center--lat-number-lng-number--googlemapslatlng)
             * [place_changed](#place_changed)
+      * [DeferredReadyMixin](#deferredreadymixin)
+         * [Hooks](#hooks)
+            * [beforeDeferredReady() : () =&gt; Promise](#beforedeferredready----promise)
+            * [deferredReady() : () =&gt; Promise](#deferredready----promise)
+      * [MapElementMixin (mixes in <code>DeferredReadyMixin</code>)](#mapelementmixin-mixes-in-deferredreadymixin)
+         * [Fields](#fields-6)
+            * [$map : Map](#map--map)
 
@@ -301,9 +316,50 @@ ## <a name="getting-started-cdn"></a> Getting Started (with CDN)
 
+##### `resize()`
+A shorthand for:
+```js
+google.maps.event.trigger(mapComponent.mapObject, 'resize')
+```
+
+##### `resizePreserveCenter()`
+The same as `resize()`, but keeps the center of the map.
+
 #### Properties
 ##### `center : {lat: number, lng: number} | google.maps.LatLng`&dagger;
+
+__Warning__: Do not do the following if you need two-way binding:
+```html
+<gmap-map :center="center" @center_changed="updateCenter"></gmap-map>
+```
+```js
+methods: {
+  updateCenter(center) {
+    this.center = {
+      lat: center.lat(),
+      lng: center.lng()
+    }
+  }
+}
+```
+
+The center reported by `center_changed` is not guaranteed to be the same
+as the center you give to the maps. As a result, you are going to get an endless
+loop:
+`this.center = {...} --> center_changed --> this.center = {...} --> center_changed --> ...`
+
+Instead, if you need two-way binding, save the center from `center_changed`
+in a separate property, and synchronize it with the map center only when you
+really need to. Refer to [app.vue](examples/src/app.vue#L426) in the examples.
+
+__Can we get the old behaviour back?__ No. `vue-google-maps` v0.1.x was able
+to prevent the infinite loop
+because it handled two-way binding on its own, and therefore can set up the
+event listeners to break the endless loop before it happens.
+In `vue2-google-maps` the events are provided by the parent component.
+The Map component is not able to tell which of the event listeners are listening
+for all events, and which event listeners are listening only for UI-initiated
+events for the purpose of two-way binding
+(or maybe it could, with some extra attributes. Submit a PR ^.^). Therefore
+the responsibility of breaking the infinite loop now lies with you, the user.
+
 ##### `zoom : number`&dagger;
-Map's ***initial*** zoom and centre. If you need to change the
-centre of the map after setting it initially, you need to call
-`setCenter()` on the map object. (If doesn't seem like
-the correct behaviour, please file an issue.)
 ##### `mapTypeId`&dagger;
@@ -523,1 +579,25 @@ ##### `options`
 ##### `place_changed`
+
+### `DeferredReadyMixin`
+#### Hooks
+##### `beforeDeferredReady() : () => Promise`
+Actions to be performed before `deferredReady()` is called.
+These is executed **after** all ancestor components' `deferredReady()` have
+been called.
+
+##### `deferredReady() : () => Promise`
+A hook that waits for ancestors' `deferredReady()` to complete (i.e. Promise resolved)
+before it is itself called.
+
+This Mixin is used in this package in order to initialize the Map component
+only after the Maps API has been loaded, and to initialize map elements only after
+the ancestor Map component has been initialized.
+
+### `MapElementMixin` (mixes in `DeferredReadyMixin`)
+This mixin adds a `beforeDeferredReady()` hook which initializes `this.$map`.
+
+#### Fields
+##### `$map : Map`
+A reference to the ancestor Map component. This is available only after
+`deferredReady()` has been called. You can access the map by:
+`this.$map.mapObject`.

package.json

 {
   "name": "vue2-google-maps",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "This is a google map component for Vue.js, updated for Vue 2 compatibility",
@@ -10,3 +10,4 @@ "main": "index.js",
     "test": "lab -T node_modules/lab-babel -t 100 -S test",
-    "deploy": "npm run build && cd examples && webpack && gh-pages -d ."
+    "build-example": "npm run build && shx cp dist/vue-google-maps.js examples && cd examples && webpack",
+    "deploy": "npm run build-example && gh-pages -d ."
   },
@@ -37,2 +38,3 @@ "dependencies": {
     "less-loader": "^2.2.2",
+    "shx": "^0.2.0",
     "style-loader": "^0.13.0",
@@ -39,0 +41,0 @@ "stylus-loader": "^1.4.0",

README.md

@@ -9,5 +9,19 @@ # vue-google-maps
 
-API documentation is still pending, but by and large, unless you are using two-way bindings,
-you should be able to re-use the code you wrote for Vue 1.x.
+## Installation
 
+### With npm (Recommended)
+
+```
+npm install vue2-google-maps
+```
+
+### Manually
+
+Just download `dist/vue-google-maps.js` file and include it from your HTML.
+[Example](http://xkjyeah.github.io/vue-google-maps/overlay.html).
+
+### Basic usage / Documentation
+
+See [API](API.md).
+
 ## Demo:
@@ -81,32 +95,3 @@
 
-## Installation
 
-### With npm (Recommended)
-
-```
-npm install vue-google-maps
-```
-
-You can append `--save` or `--save-dev` to add it to your dependency (if yor project also uses npm)
-
-### Manually
-
-Just download the `index.js` file on the root directory of this repository
-
-### Basic usage
-
-#### Reference `vue-google-maps` into your project
-
-If you are using a cool bundler (recommended) you can just do :
-
-```javascript
-import {load, Map, Marker} from 'vue-google-maps'
-```
-
-Or if you prefer the older ES5 syntax:
-
-```javascript
-const VueGoogleMap = require('vue-google-maps')
-```
-
 #### Standalone / CDN
@@ -167,6 +152,1 @@
 or for [localisation](https://developers.google.com/maps/documentation/javascript/basics).
-
-## Full documentation
-
-See [API](API.md).
-

src/utils/eventsBinder.js

@@ -7,3 +7,3 @@ /* vim: set softtabstop=2 shiftwidth=2 expandtab : */
   _.forEach(events, (eventName) => {
-    const exposedName = 'g-' + eventName;
+    const exposedName = eventName;
     googleMapObject.addListener(eventName, (ev) => {
@@ -10,0 +10,0 @@ vueElement.$emit(exposedName, ev);

src/utils/propsBinder.js

@@ -41,3 +41,3 @@ /* vim: set softtabstop=2 shiftwidth=2 expandtab : */
           else {
-            vueElement.$emit('g-' + eventName, googleMapsElement[getMethodName]());
+            vueElement.$emit(eventName, googleMapsElement[getMethodName]());
           }
@@ -44,0 +44,0 @@ }

toc.txt

    * [vue2-google-maps](#vue2-google-maps)
+      * [Note on events](#note-on-events)
       * [Table of Contents](#table-of-contents)
@@ -187,1 +188,8 @@ * [<a name="user-content-getting-started-cdn"></a> Getting Started (with CDN)](#-getting-started-with-cdn)
                * [place_changed](#place_changed)
+         * [DeferredReadyMixin](#deferredreadymixin)
+            * [Hooks](#hooks)
+               * [beforeDeferredReady() : () =&gt; Promise](#beforedeferredready----promise)
+               * [deferredReady() : () =&gt; Promise](#deferredready----promise)
+         * [MapElementMixin (mixes in <code>DeferredReadyMixin</code>)](#mapelementmixin-mixes-in-deferredreadymixin)
+            * [Fields](#fields-6)
+               * [$map : Map](#map--map)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2204591

increased by3.66%

Number of package files

45

increased by4.65%

Lines of code

942

increased by20.92%

Worsened metrics

Dev dependency count

26

increased by4%

Number of lines in readme file

150

decreased by-11.76%

No dependency changes