meteor iron:router Uncaught TypeError: Cannot read property 'value' of null

Question

I found out iron:router is causing error. Using dburles:google-maps and iron:router packages to make this code work. my code as below: template.js:

Router.configure({
layoutTemplate: 'layout'
});
if (Meteor.isClient) {
Router.route('/', function () {
    this.render('whatisHappening')
});
}
if (Meteor.isClient) {
Meteor.startup(function () {
    GoogleMaps.load({v: '3', libraries: 'places'});
});
Template.whatisHappening.helpers({
    mapOptions: function () {
        if (GoogleMaps.loaded()) {
            var input = document.getElementById('autocomplete');
            var autocomplete = new google.maps.places.Autocomplete(input,{types: ['geocode']});
            google.maps.event.addListener(autocomplete, 'place_changed', function () {
                console.log(autocomplete.getPlace())
            });
        }
    }
});
}

layout.html

<template name="layout">
<a href="/">address search</a> |
    <a href="/x">some other page</a>
{{> yield}}
</template>

<template name="whatisHappening">
    <input type="text" id="autocomplete" placeholder="some address" size="50">
    {{mapOptions}}
</template>

if I don't use this iron:router it doesn't throw any error, it works perfectly. is this kind of bug or do I need to improve my coding?

and how can I spot this kind of errors caused by packages?, it wasted my whole day.

Answer 1

I have wrapped with autorun which reactively updates the DOM.