yogiben / meteor-autoform-map Goto Github PK
View Code? Open in Web Editor NEWGoogle maps input for Meteor Autoform
Google maps input for Meteor Autoform
If we don't know where the user is the default location should be the whole world (as much as I like australia ;) )
Would be nice to implement the official Google Maps API options for complete control.
https://developers.google.com/maps/documentation/javascript/tutorial#MapOptions
Hello,
Could you add a way to have the coordinates in the opposite order (longitude,latitude) ?
Mainly due of http://docs.mongodb.org/manual/applications/geospatial-indexes/#spherical
Thank you
Hi, I asked that because I think it would be nice to retrieve some properties of this google autocomplete input field , like in this packcage https://github.com/abdj/autoform-google-places-input/
When user's position is being calculated, there is a delay.
The icon should be replaced by
fa fa-spin fa-circle-o-notch
until position is found
Hey there,
I'm so grateful about this package. Thanks a lot for making and sharing it.
However, I noticed that the location values are stored as strings in collection. I wonder if there's any specific reason to do so? I would be very happy to have the field stored in {"lng": Number, "lat": Number} in order to enable geospatial search in MongoDB. Wondering if there's any quick workaround?
I'm trying to understand your code (I'm pretty new to JS), and can submit a pull request if you would give me some code review. Please let me know if this works. Thanks a lot.
Hesen
Hi,
Is there an easy way to change the google map settings? Language is something I want to change.
First off, thank you so much for this slice of code. This may not be a bug report as much as a request for help.
I've defined this in a Schema as such
location: {
label: "Place a marker on your approximate location",
type: String,
autoform: {
type: 'map',
afFieldInput: {
searchBox: true,
autolocate: true,
geolocation: true,
defaultLat: 42.056,
defaultLon: -87.674,
zoom:15
}
}
},
Calling it as such:
{{> afQuickField name="location" }}
However, if I try to use the search box (and press Enter), it submits that current form. I've tried to (unsuccessfully) curtail the behavior with this
'click .af-map-search-box ' : function( event ) {
event.preventDefault();
}
Is there a better way to mitigate this?
Hi ,
I have issue that a map is did not rendered at all , only google logo appear on left bottom side , but when i resize the browser window , the map suddenly appear ,
how could i fix this ?
Hello!
I have that schema
@Places = new Mongo.Collection('Places')
PlacesSchema = new SimpleSchema
title:
type: String
label: "Title"
max: 250
index: 1
location:
type: [Number] # lng, lat
decimal: true
label: 'Location'
autoform:
type: 'map'
afFieldInput:
searchBox: true
height: '400px'
zoom: 3
and on server startup
Meteor.startup ->
Places._ensureIndex({'location': '2dsphere'});
After that my field looks like
location: Object
type: "Point"
▼coordinates: Array[2]
0: 145.29833681
1: -40.75822243
Notice, Object
, not Array
.
As result it doesnt render map in form, only gray rectangle...
I try method rendered
in afFieldInput
rendered: (map) ->
console.log this
console.log map
and it shows my
Object {name: "location"}
undefined
I cant get the map object (.
How I can set coordinates or see map?
Hi , Thanks for this package, it was working wonderfully well till I added dburles:google-maps package. Please check this link for details:
http://stackoverflow.com/questions/29886354/meteor-autoform-maps-google-maps-package-error
The map in the autoform does not render with TypeError. Could you please provide guidance?
Thanks for making this package. It may be worth adding a quick note to the README that a google maps package is required. I used dburles:google-maps
Hi guys, I'm getting this error on browser console:
yogiben_autoform-map.js:179 Uncaught TypeError: Cannot read property 'zoom' of undefined
My setup:
https://github.com/filipenevola/easytennis/blob/master/collections/place.coffee#L26
It looks like a bug because even when I ommit 'zoom' config it fails.
Right now, meteor-autoform-map requires autoform 4.2.2, which means we're stuck with bugs in autoform 4.2.2 that we'd rather not have.
How do you feel about just depending on autoform 4? I understand that there are tradeoffs with that, but I suspect the rate at which autoform updates is going to be much higher than the rate at which autoform updates and breaks meteor-autoform-map.
Is it somehow possible to additionally save the address from the search box?
With the current solution we only save lat,lng which is pretty much perfect when displaying a map, but when using different views (text vs map) the lat,lng attributes are kind of useless - an option to save both would be awesome.
My current workaroud would be to have a submit callback which reads the inputfield and saves the data to an additional field.
Regards,
lukas
Hi!
I'm trying to use the form with a schema defined in Collections2 and most of the afFieldInput items don't seem to be working for me. Here is what I've put into my collection:
startLocation: {
type: String,
autoform: {
afFieldInput: {
type: 'map',
mapType: 'terrain',
zoom: '8',
searchBox: true,
width: '50%',
defaultLat: '46.073',
defaultLng: '-100.546',
geolocation: true,
}
}
}
The width, searchBox, and geolocation seem to work but I'm not getting the proper zoom or centering based on Lat Lng.,
An example on how to use the googleMaps option to specify the options would be great too.
Thanks for a great tool!
Map always loads fully zoomed out. Changing zoom in options doesn't change anything.
I get the following error in the console:
Uncaught TypeError: Cannot read property 'zoom' of undefined autoform-map.coffee:70 (anonymous function)
Is it possible to have autocomplete input field without map?
This package is awesome, thanks, I am hoping you would be able to make a helper to display the resulting map for use in a template. Thanks
Hello,
Is there a way to have options on the afQuickField, to have something like this :
{{> afQuickField name="location" options=mapOptions}}
And then a helper like this:
Template.templateTest.helpers
mapOptions:->
{
mapType:'roadmap'
width:'200px'
height:'200px'
defaultLat:57.15075513030167
defaultLng:-2.1279549163819134
searchBox:true
zoom:12
}
Kind regards
The parameter zoom level is only used, when autolocate is set to true.
'location.coordinates':
type: String
autoform:
type: 'map'
afFieldInput:
type: 'map'
searchBox: true
defaultLat: 47.806
defaultLng: 14.085
zoom: 6
height: '300px'
# autolocate: true
geolocation:true shows a button, but doesn't work when pressed (tested both Safari/Chrome)
searchBox: true (no search box is displayed)
I tested this with your admin package.
If i set a function for the rendered option this function is like called 15 times and every time the map object is undefined.
location: {
type: String,
autoform: {
type: 'map',
afFieldInput: {
defaultLat: "52.520645",
defaultLng: "13.409779",
geolocation: true,
searchBox: true,
autolocate: false,
zoom:15,
height: "400px",
rendered: function (gmap) {
console.log("set current gmap");
console.log(gmap) ;
Session.set("currentGoogleMap", gmap);
}
}
}
},
i looked through your code and can't find an obvious error.
if typeof @data.atts.rendered == 'function'
@data.atts.rendered @data.map
looks fine to me, but the map is undefined :/
OT: i would love to debug this myself, but i can't find the place to alter the code of your installed package.
there is a error in console
Refused to load the script 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&callback=GoogleMaps.initialize' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline'".
When option set to true, field appear with search capabilities
Having { lat: 30, lng: 60} instead of '30,60' would be nice.
Hi!
Have this error after map rendered
From docs: https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error
Is any way to set my existing api key?
Amazing plugin, however, can you please make a Leaflet version for us open-source only guys?
Pretty please.
When trying to get current Location, the following error appears in the console:
Uncaught TypeError: _this.setMarker is not a function
I'm using the out-of-the-box sample code and when I select a location I get an exception and the location doesn't get saved.
It's here:
google.maps.event.addListener searchBox, 'places_changed', =>
location = searchBox.getPlaces()[0].geometry.location
@data.setMarker @data.map, location # <<<<<<<
@data.map.setCenter location
> this
Nl {__e3_: Object, gm_bindings_: Object, gm_accessors_: Object, constructor: function, getPlaces: function…}
> this.data
undefined
Backtrace:
[Error] TypeError: undefined is not an object (evaluating '_this.data.marker.setMap')
(anonymous function) (yogiben_autoform-map.js, line 194)
dispatch (jquery.js, line 4698)
handle (jquery.js, line 4366)
reset ([native code], line 0)
autoFormResetForm (aldeed_autoform.js, line 2127)
autoFormActionCallback (aldeed_autoform.js, line 6494)
wrappedCallbackForParsingServerErrors (aldeed_collection2.js, line 449)
wrappedCallback (mongo.js, line 621)
(anonymous function) (meteor.js, line 978)
_maybeInvokeCallback (ddp.js, line 3860)
dataVisible (ddp.js, line 3889)
(anonymous function) ([native code], line 0)
(anonymous function) (ddp.js, line 4718)
forEach ([native code], line 0)
forEach (underscore.js, line 156)
_runAfterUpdateCallbacks (ddp.js, line 4717)
_livedata_data (ddp.js, line 4707)
onMessage (ddp.js, line 3721)
(anonymous function) (ddp.js, line 2717)
forEach ([native code], line 0)
forEach (underscore.js, line 156)
onmessage (ddp.js, line 2716)
dispatchEvent (ddp.js, line 156)
_dispatchMessage (ddp.js, line 1141)
_didMessage (ddp.js, line 1199)
onmessage (ddp.js, line 1346)
A great package for displaying maps is conflicting with the google maps api used in this package. Is is possible to use https://atmospherejs.com/dburles/google-maps instead?
I am getting this error:
Exception from Tracker afterFlush function: debug.js:41 TypeError: Cannot read property 'SearchBox' of undefined at initTemplateAndGoogleMaps (autoform-map.coffee:82) at null.<anonymous> (autoform-map.coffee:112) at view.js:199 at Function.Template._withTemplateInstanceFunc (template.js:457) at view.js:197 at Object.Blaze._withCurrentView (view.js:538) at viewAutorun (view.js:196) at Tracker.Computation._compute (tracker.js:323) at new Tracker.Computation (tracker.js:211) at Object.Tracker.autorun (tracker.js:562)
The map displays fine, but the search box does not appear.
However if I reload the page that contains this template then there is no problem. So the problem only appears when I get to the page from another page on the own site.
After geolocation, map should be centred around point and zoomed to an appropriate level.
Please support the latest autoform. I cant find any alternative map for autoform either.
Hi,
I've been using a basic autoform-map successfully (thanks!), however I can't seem to get any changes from adding map options. Example below is ensuring searchBox is turn off, but the search box is always rendered (I know it is supposed to be off by default):
{{#autoForm id="viewUserProfile" schema="Schema.User" doc=currentUser type="readonly"}}
{{> afQuickField name="profile.location" width="125px" height="75px" searchBox=false zoom=4 label=false}}
{{/autoForm}}
Also not had luck trying to include other API options such as 'disableDefaultUI'. Can you provide a simple example or are they not possible as it stands?
It looks like the package is - unfortunately - not compatible with AutoForm v6.0, at least dependecy wise.
$ meteor add yogiben:autoform-map
=> Errors while adding packages:
While selecting package versions:
error: Potentially incompatible change required to top-level dependency: aldeed:autoform 5.8.1, was 6.0.0.
Constraints on package "aldeed:autoform":
* aldeed:[email protected] <- yogiben:autoform-map 0.2.0
To allow potentially incompatible changes to top-level dependencies, you must pass --allow-incompatible-update on the
command line.
Has anyone found a workaround to get this to work on a mobile device? Selecting the address from a list does not work
If option set to true, user is asked for location when map loads & marker is set and map is centred.
I have something like this in my template:
{{#autoForm id="myForm" ... }}
{{> afQuickField name="location" }}
<div class="form-group">
<label>Formatted Address</label>
<input type="text" class="form-control" value="{{formattedAddress}}">
</div>
{{/autoForm}}
The location
field get rendered as a map and works as it should, and the formatted address will show where the user put the marker on the map.
That's where I'm stuck. I'm not sure what I should be using from the formattedAddress
helper. I tried using AutoForm.getFieldValue('location', 'myForm');
but it never recomputes the value.
Thanks for the help.
I saw this was a recent addition? I have searchBox set to true in my autoform options but it isn't showing. Any idea?
Hey there!
I wonder, could we fill address in input here? http://screencast.com/t/ekSpK3aMZ
I found same issue, but solution doesn't work for me.
Here is my schema if need: http://screencast.com/t/qQBJUi4z5
That would be the following style format. Also, is there any way to get the street address etc?
Schema.loc = new SimpleSchema({
type: {
type: String,
allowedValues: ['Point']
},
coordinates: {
type: [Number],
decimal: true,
minCount: 2,
maxCount: 2
}
});
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.