JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;dummy=.js"></script>
<script type='text/template' id='tpl'>
<div class='main-content' id='map-container'>
    <div id="map-canvas"></div>
</div>
</script>

<a href='#'>Map</a>
<a href='#other'>other</a>
<div id='content'>
    
</div>

CSS

#map-canvas{
    height:300px;
    width:300px;
}
.temp {position: absolute; visibility:hidden; }

JavaScript

var template = _.template($('#tpl').html());
var MapView = Backbone.View.extend({
    className: 'view',
    
    initialize: function () {          
        this.render();      
    },

    initMap: function () {
        this.$el.addClass('temp');
        $('body').append(this.$el);
         var myLatlng = new google.maps.LatLng(51.903679, -8.468274);

         var mapOptions = {
            center: myLatlng,
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        this.map = new google.maps.Map(this.$el.find('#map-canvas')[0], mapOptions);
        
        this.$el.remove();
        this.$el.removeClass('temp');
    },
    
    render: function () {
        this.$el.html(template({}));
        this.initMap();       
    },
});

var Router = Backbone.Router.extend({

    routes: {
        "": function() {
            var container = $('#content');
            container.empty();
 
            var v = new MapView();
            container.append(v.$el);
        },
        "other": function() {
            var container = $('#content');
            container.empty();
        }
    }
});
var r = new Router();
Backbone.history.start();