Where communities thrive

Join over 1.5M+ people
Join over 100K+ communities
Free without limits
Create your own community

Explore more communities

dburles/meteor-google-maps

Meteor package for the Google Maps Javascript API v3

People

Repo info

Activity

addinall

@addinall

https://github.com/addinall/react

Thanks mate. I am working from a few tutorials and all are using different patterns to do a simple todo list. What I want isn't mush harder just for the start of my
experiments with this. I want a map and a list on the same page, put using two components. The map should do stuff then a member of a list is chosen!
Just getting something on the screen would be a big start! I liftef the list part from a todo tutorial which WAS working stand alone.

Since I buggered it, the development tools just show empty object.

David Burles

@dburles

why not have a layout component that renders both app and assetMap in their containers?

then your document can be just a single div that you render that component to

this becomes your "layout" component https://github.com/addinall/react/blob/master/client/main.html#L43-L56

also you'll want to extend from React.Component not just Component

that might cause you some grief

addinall

@addinall

I'll take any advice! The stuff that comes with the tutorials is not all that clear on how to build. Thank you! This is only me experimenting at the moment. I decided it was time for a new toolset and drop PHP and Perl after a long time! I will just go look at your link now.

What I am trying to do as proof of concept, if I have "Mark's phone" as an asset, and click on it to make it live, I'd like to see where I am on a map! I have done it in jQuery with the old API and begging data from PHP/mySQL. I thought I would do something newer!

David Burles

@dburles

cool no problem, a bit of a shift in thinking no doubt :)

here's a tiny react/meteor example that might help too https://github.com/dburles/simple-meteor-react-demo

addinall

@addinall

Sort of! I started in Ada and assembler about 35 years ago! But have been doing the PHP/jQuery thing for a decade or so. Thanks for the links. I'll start having a play now!

Gurjit Singh

@gurjit03

HI guys map is not displaying on correct location , does anyone facing similar problem ?

Gurjit Singh

@gurjit03

?? anyone here ?

Mathieu K

@KudMath

Hello here, do you guys know if there is a way to make request from server?

KHB

@tdotholla

Don't think so... the map is a client-side javascript object and the API relies on a dom element to render...
what are you trying to do from the server?? You'll have to create a Meteor MEthod (if using meteor) on the server, and make a client-side request for it

or something similar if using another framework

Mathieu K

@KudMath

yep that's what I just did... It'd be nice to be able to issue requests from server tho

David Burles

@dburles

@KudMath There's probably an npm package that you could use for the server

Stephen Mayeux

@StephenMayeux

Hey guys, how's it going?

I am new to Meteor, but I found this package on atmosphere and it's really cool! I had a couple of questions about it though.

I followed along with the Reactive Map tutorial on the author's blog, and that was simple enough to follow along. But a couple of questions

Stephen Mayeux

@StephenMayeux

1) The tutorial demonstrated how to add and display markers on the map, but that is with the autopublish package. What if I wanted to remove autopublish and insecure... would I have to use methods and subscriptions to write and read from MongoDB?

2) I want to create a CRUD app that will not only display ALL the markers but also display markers by a certain set of criteria. For example, I want to display markers by userId, a range of dates, and other criteria. Is it possible to do all this within one template?

David Burles

@dburles

Hey @StephenMayeux

yes, you'll need to write some publications and subscribe to them and methods to write to the db (the guide can help you with that https://guide.meteor.com/)
Sure that's possible, just query (and publish) for the userId that you wish to view

openqubit

@openqubit

Hello,i want to hide a marker after 10 minutes. Is it possible to hide a marker without deleting the marker using mongodb's time to live TTL feature?

David Burles

@dburles

@openqubit you would want to handle it on the client rather than on the server (the TTL feature will actually remove data)

Stephen Mayeux

@StephenMayeux

thanks @dburles! Would you recommend creating multiple templates to achieve the same effect? Like one map template just to display all the markers (with no click events to add a new marker). And another map template to display a single marker (for example, if there is a route like /view/restaurants/39jw0923h8 then only view the location for a particular location). etc

openqubit

@openqubit

@dburles Thanks for your response. I have that fixed on the client side. In your example shown here https://github.com/dburles/reactive-maps-example/blob/master/reactive-maps-example.js i did run the code here https://canadarm.herokuapp.com/ When i am scrolling to an new area of the map,the dreaded grey area is visible. Since this is a well known problem with numerous answers on stackoverflow http://stackoverflow.com/questions/3838580/google-map-comes-partially-grey-area-comes-instead-of-images-from-google-server?noredirect=1&lq=1 how would we solve the grey spaces as someone scrolls the map?.

David Burles

@dburles

@StephenMayeux I'd say having seperate maps makes sense since you'll be handling them quite differently

@openqubit not too sure on that one, though i've seen similar issues with dynamic height containers (such as modals) being a problem, forcing the map to resize can fix that problem

Stephen Mayeux

@StephenMayeux

Thanks again @dburles! I really like this package, and appreciate your advice as usual. Can I share my app with you once it's ready?

David Burles

@dburles

@StephenMayeux no prob, sure thing

openqubit

@openqubit

@dburles Thanks for your input. I have recently run into a problem with SPA(single page apps). Sometimes i want to have two maps in two divs of the same page. In that case,i am thinking of doing this https://gist.github.com/openqubit/292872006f029b431003422749ce397a

David Burles

@dburles

@openqubit looks good to me

openqubit

@openqubit

@dburles Cool,thanks.

openqubit

@openqubit

Hello,i have added an events code block but it just wont fire not sure why,this is the code https://github.com/openqubit/rm/blob/master/reactive-maps-example.js

openqubit

@openqubit

Oh never mind, i figured it out.

Ankit Verma

@ankitv89

Can anyone point me how to use markerclusterer with this package?

Shravan Shandilya

@shravan-shandilya

Hey guys. How and where do I set google map application key? 3
down vote
Google maps requires an API key for new projects since june 2016

openqubit

@openqubit

if (Meteor.isClient) {
  Meteor.startup(function() {
    GoogleMaps.load({
    key: 'A*************************g'
    });
  });
}

or look at this fiddle https://jsfiddle.net/9dgL1t8t/

Shravan Shandilya

@shravan-shandilya

@openqubit Thanks! Will check it out.

Shravan Shandilya

@shravan-shandilya

Its working fine now! Thanks @openqubit

openqubit

@openqubit

@shravan-shandilya You are welcome.

James Corey

@mmjames04

My code looks identical to dburles' example app...any idea why I'm getting this error? insert failed: Method '/markers/insert' not found

openqubit

@openqubit

Have you defined a markers collection Markers = new Mongo.Collection('markers'); If its not that,check your subscriptions and publishing.

James Corey

@mmjames04

Thanks...I've moved onto other tutorials that seem to be working fine. Not sure what was the problem.

openqubit

@openqubit

Oh cool,i am glad it works for you.

David Burles

@dburles

@mmjames04 looks like you haven't defined the collection on the server, only on the client :)

adamgins

@adamgins

hi just upgraded to meteor 1.4.1.1 and iOS 10 and having a problem with maps not showing up (black iframe) on Cordova. Works fine on mobile. I tried

//App.accessRule('*.google.com/*');
//App.accessRule('*.googleapis.com/*');
//App.accessRule('*.gstatic.com/*');

and App.accessRule('.google.com/', { type: 'navigation' } );
App.accessRule('.googleapis.com/', { type: 'navigation' } );
App.accessRule('.gstatic.com/', { type: 'navigation' } )