JSFiddle - React, Tailwind, and code Playground

by Shakib Ibn Daud

HTML

<link rel="stylesheet" href="http://code.ionicframework.com/1.0.0-rc.3/css/ionic.min.css">
<script src="http://code.ionicframework.com/1.0.0-rc.4/js/ionic.bundle.min.js"></script>
<body ng-app="main">
    <ion-pane ng-controller="LocationCtrl">
        <ion-header-bar class="bar-dark">
            <button ui-sref="main" class="button button-icon icon ion-navicon"></button>
             <h1 class="title">Directions</h1>

        </ion-header-bar>
        <ion-content>
            <div id="map" data-tap-disabled="true" style="width: 100%;
  height: 100%;"></div>
        </ion-content>
        <ion-footer-bar class="bar-dark"> <a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>

        </ion-footer-bar>
    </ion-pane>
</body>

CSS

.scroll {
    height: 100%;
}
#map {
    width: 100%;
    height: 100%;
}

JavaScript

'use strict';
angular.module('main', ['ionic'])
    .controller('LocationCtrl', function ($scope, $ionicLoading, $compile, $window) {
    function initialize() {
        google.maps.event.addDomListener(window, 'load');

        var myLatlng = new google.maps.LatLng(43.07493, -89.381388);

        var mapOptions = {
            center: myLatlng,
            zoom: 16,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"),
        mapOptions);

        //Marker + infowindow + angularjs compiled ng-click
        var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
        var compiled = $compile(contentString)($scope);

        var infowindow = new google.maps.InfoWindow({
            content: compiled[0]
        });

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Uluru (Ayers Rock)'
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });

        $scope.map = map;
    }

    $window.initialize = initialize; // callback in global context

    function loadScript(src) {
        var script = document.createElement("script");
        script.type = "text/javascript";
        document.getElementsByTagName("head")[0].appendChild(script);
        script.src = src;
    }

    loadScript('http://www.google.com.mt/jsapi');
    loadScript('http://maps.googleapis.com/maps/api/js?key=&v=3&sensor=true&callback=initialize');



    $scope.centerOnMe = function () {
        if (!$scope.map) {
            return;
        }

        $scope.loading = $ionicLoading.show({
            content: 'Getting location',
            showBackdrop: false
        });

        navigator.geolocation.getCurrentPosition(function (pos) {
            $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
           ...