JSFiddle - React, Tailwind, and code Playground

by Adam Doherty

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.7.0/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.1.0-X.10/angular-google-maps.min.js"></script>
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
<div id="main" ng-app="DublinBikesApp" ng-controller="DublinBikesAppController">
    <div id="map-canvas">
        <ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>
    </div>
</div>

CSS

html, body, #main, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
}

JavaScript

angular.module('DublinBikesApp', ['uiGmapgoogle-maps'])
    .controller('DublinBikesAppController', ['$scope', '$http', function ($scope, $http) {
    $scope.map = {
        center: {
            latitude: 45,
            longitude: -73
        },
        zoom: 8
    };
    $scope.api = "https://api.jcdecaux.com/vls/v1/stations?contract=Dublin&apiKey=aab95464b7949e7f0e15d3bb1ea908e568be4688";
    $http.get($scope.api).
    success(function (data, status, headers, config) {
        $scope.bikes = data;
    }).
    error(function (data, status, headers, config) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
    });

    $scope.initialize = function () {
        var myLatlng = new google.maps.LatLng(53.342661, -6.260147);
        var mapOptions = {
            zoom: 13,
            center: myLatlng,
            styles: [{
                "featureType": "administrative",
                "elementType": "labels.text.fill",
                "stylers": [{
                    "color": "#444444"
                }]
            }, {
                "featureType": "landscape",
                "elementType": "all",
                "stylers": [{
                    "color": "#f2f2f2"
                }]
            }, {
                "featureType": "poi",
                "elementType": "all",
                "stylers": [{
                    "visibility": "off"
                }]
            }, {
                "featureType": "road",
                "elementType": "all",
                "stylers": [{
                    "saturation": -100
                }, {
                    "lightness": 45
                }]
            }, {
                "featureType": "road.highway",
                "elementType": "all",
                "stylers": [{
                    "visibility": "simplified"
                }]
            }, {
                "featureType": "road.arterial",
                "elementType":...