title: google maps infoWindow click event re-renders map-canvas in Meteor
body: <p>Hey Im trying to use google maps within my MeteorJS project to have google maps display on a map all customers, and then to display an infoWindow when you click on one of the markers.</p>
  
  <p>problem is anytime you click on the marker it re-renders the map from scratch, i know this has to do with the the reactivity of the Session variable being set when the infoWindow is being clicked.</p>
  
  <p>is there any way avoid the map being re-rendered when the session variable is changing?</p>
  
  <p>thanks.</p>
  
  <p>below is the JS and template im using in my project.</p>
  
  <pre class="lang-html prettyprint-override"><code> &lt;template name="customers_map"&gt;
   {{#constant}}
   &lt;div id="mapWrapper"&gt;
      &lt;div id="map-canvas"&gt;&lt;/div&gt;
   &lt;/div&gt;
   {{/constant}}
  &lt;/template&gt;
  </code></pre>
  
  <p>the code for making the google maps and markers.</p>
  
  <pre class="lang-js prettyprint-override"><code>Template.customers_map.rendered = function() {
  
  $("#map-canvas").height("400px");
  
  if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(p) {
          Session.set("myLat", p.coords.latitude);
          Session.set("myLng", p.coords.longitude);
      });
  }
  
  Deps.autorun(function(){
  
      var mapOptions = {
          center: new google.maps.LatLng(Session.get("myLat"), Session.get("myLng")),
          zoom: 15,
          zoomControl: true,
          zoomControlOptions: {style: google.maps.ZoomControlStyle.SMALL},
          streetViewControl: false,
          mapTypeControl: false,
          scaleControl: true,
          mapTypeId: google.maps.MapTypeId.SMALL
      }
  
  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
  
  var infowindow = new google.maps.InfoWindow({
    content: Template.customers_infoWindow()
    });
  
  Customers.find().forEach(function(customer) {
  
      if (customer.loc != null) {
          var geo = customer.geoLocation();
          var marker = new google.maps.Marker({
              position: new google.maps.LatLng(geo.lat, geo.lng),
              title: customer.name(),
              icon:'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
          });
  
          marker.setMap(map);
  
          google.maps.event.addListener(marker, 'click', function() {
              Session.set("customerId", customer._id);
              infowindow.open(map,marker);
          });
  
      } else {
          console.log(customer.name() + " has no geoLocation");
      };
  
  });
  
  });
  
  };
  </code></pre>
  
  <p>the infoWindow template</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template name="customers_infoWindow"&gt;
      &lt;h1&gt;{{record.name}}&lt;/h1&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>and the js for the infoWindow template</p>
  
  <pre class="lang-html prettyprint-override"><code>Template.customers_infoWindow.record = function() {
    return Customers.findOne({_id: Session.get("customerId")});
  }
  </code></pre>