CODEWITHSUNDEEP
google-mapsmeteor
George Katsanos
George Katsanos

Reputation: 14185

Using Meteor's Template.rendered for google maps

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...

Upvotes: 2

Views: 976

Answers (1)

Tarang
Tarang

Reputation: 75955

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());
}

});

Upvotes: 1

Related Questions