OK, I think I know what's happening my `Meteor.startup(function() {
GoogleMaps.load({ key: '<my key>', libraries: 'places'});
});` is not running. If I run it manually through Safari console, the map shows up.
I thought Meteor.startup should only run once Cordova is ready... thoughts?
const directionsService = new GoogleMaps.DirectionsService();
const directionsDisplay = new GoogleMaps.DirectionsRenderer();
function createRoute(start, end) {
directionsService.route({
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
console.log('Nepovedlo se: ' + status);
}
});
}
Morning! I searched a lot on the Web for a solution but still need help. I have a map on which I show markers from a Meteor collection and a list on the left with the same collection items. I can click these markers to show an infoWindow and the corresponding list item on the left gets selected (Session variable).
I'm trying to get the reverse effect also, ie get the appropriate marker 'click' event to fire when I select an element in my list. However, when I handle the list item 'click' event, I'm outside of the GoogleMaps.ready scope where my markers array is defined. Can anyone point me in the right direction please?
Hey @dburles! I'm following your example for the reactive maps. I'm in the process of creating my own map based web application in Meteor as well so I'm using yours as a guide to, at the very least, just initialize the map. When I follow your code for initializing the map in my app, I get an error in the console telling me I need an API Key from Google Maps. Okay, fine, got my API key from Google Maps... but after putting it in, the map is still not initializing on my web application.
From there I started comparing notes and looking through the Github forums on the reactive maps example. There didn't seem to be any spot in yours that you'd put an API Key in... so
Meteor.startup(function(){
GoogleMaps.load();
});
Seemed to work find in yours. In mine, after poking through Github, I have it set as
Meteor.startup(function(){
GoogleMaps.load({v: "3", key: "allthelettersandnumbersofmyAPIkey_here", libraries: "geometry, places"})
});
Syntactically, shouldn't this be correct? I still have a blank page where my map should be though.
I've downloaded your copy of the application from GitHub and when I fire it up, it runs fine. I'm creating my application in Meteor 1.6 and I think your reactive map example is done in Meteor 1.2 -
so now I'm wondering if this is a meteor compatibility issue, or a Google Maps API issue (or both)?
It might be a scoping issue - from what I can see right now var squarePoly is only available to the userAddArea template?
(For anyone who is reading this thread after the fact, I'm feeling a bit sheepish as the answer to my issue was very straightforward - it was the dimensions of my container set out in CSS. Apparently you can't have full width and full height on a Google Map. As a designer I love the aesthetics that can be created with CSS... but now I know why my developer friends hate CSS! LOL)