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

    <a href="geo:51.903679,-8.468274">
        <div id="map-canvas"></div>
    </a>

</div>
</script>

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

CSS

#map-canvas{
    height:300px;
    width:300px;
}

JavaScript

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

    initMap: function () {
         myLatlng = new google.maps.LatLng(51.903679, -8.468274);

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

            map = new google.maps.Map(this.$el.find('#map-canvas')[0],
                                      mapOptions);


         marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Christians Brothers College Cork'
        });

        google.maps.event.trigger(map, 'resize');
           
            google.maps.event.trigger($('#map-canvas'), 'resize');
    },

    render: function () {
        this.$el.html(template({}));
        this.initMap();       
    },
});

var Router = Backbone.Router.extend({

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