JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;language=en"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js"></script>
<script src="https://rawgithub.com/nlaplante/angular-google-maps/master/dist/angular-google-maps.js"></script>
<div id="ng-app" ng-app="myApp">
    <div ng-controller="MyCtrl">
        <google-map center="center" zoom="zoom" draggable="true">
            <markers models='markers' coords="'self'" icon='map.marker.icon'></markers>
            <marker coords='map.marker.pos' icon='map.marker.icon'></marker>
        </google-map>
    </div>
</div>
<script>
    console.info("hit1");

    angular.module('myApp', ['google-maps'])
        .controller('MyCtrl', function($scope) {
        console.info("inside MyCtrl");
        $scope.center = {
            latitude: 45,
            longitude: -73
        };
        $scope.markers = [{
            latitude: 45.1,
            longitude: -72.6,
            title: 'Marker 1'
        }, {
            latitude: 45.1,
            longitude: -74,
            title: 'Marker 2'
        }, {
            latitude: 45.4,
            longitude: -73.4,
            title: 'Marker 2'
        }, {
            latitude: 45,
            longitude: -73.2,
            title: 'Plane'
        }];
        $scope.zoom = 8;
        $scope.map = {}
        $scope.map['marker'] = {
            icon: 'http://www.amsterdamfoodie.nl/wp-content/themes/AFRefresh/images/editing/green.png',
            pos: {
                latitude: 45,
                longitude: -73.1
            }
        }

    });
    console.info("hit2");
</script>

CSS

.angular-google-map-container {
    width: 100%;
    height: 600px;
}
/* fix for Twitter Bootstrap handling of responsive images */
 .angular-google-map img {
    max-width: inherit;
}
.angular-google-map {
    top: 80px;
}