Using Meteor's Template.rendered for google maps - google-maps

Question

I am using the following code:
Template.categories.rendered = function() {
var map = new GMaps({
div: '#map_canvas',
lat: -12.043333,
lng: -77.028333
});
}
to execute the Gmaps.js plugin - and it works, everytime I Submit a form, the layout gets re-rendered and my google maps get a re-paint too.
I also used constant to try to isolate it... And isolate.. Nothing. (it's not inside a template)
{{#constant}}
<div id="map_canvas"></div>
{{/constant}}
I tried changing Template.categories.rendered to Template.categories.created but I got a bunch of errors. I was hoping 'created' only gets executed once..
edit I made a new template 'maps' and separated the forms form the map
but I'm afraid this is not a viable solution as I want to communicate between the map and the form.. notably I want to get the latitude and longitude and automatically fill in a field...

Answer 1

Try putting your map in a seperate template e.g
<template name="categories">
{{>map}}
{{>other_form_with_submit_button}}
</template>
So you put your map in the
<template name="map">
<div id="map_canvas></div>
</template>
<template name="other_form_with_submit_button">
.. your form data
</template>
You should still be able to communicate to the map like normal, the DOM doesn't even notice much of the difference
Template.other_form_with_submit_button.events({
'submit' : function() {
var lat = "-12.043333",
var lng = "-77.028333";
var map = new GMaps({
div: '#map_canvas',
lat: -12.043333,
lng: -77.028333
});
}
}
Similarly while moving the map you can attach a listener and have it change the textbox like you wish:
Template.map.rendered = function() {
var map = new GMaps({
div: '#map_canvas',
lat: -12.043333,
lng: -77.028333
});
//Im not sure what you're using to get the location but this is the example if moving the center could be used
google.maps.event.addListener(map, 'center_changed', function() {
$("#lat").val(map.getPosition().lat());
$("#lng").val(map.getPosition().lng());
}
});