WARP - Map Tests + ngMap

index.html

<div ng-app="App" ng-controller="ctrl" ng-cloak="false" layout="row" class="bbapp" md-theme="{{theme}}" md-theme-watch="true">
  <div flex></div>
  <div flex="100" md-whiteframe="5" class="bkgc">
    <md-toolbar layout-padding layout="row" layout-xs="column" md-whiteframe="5" class="md-hue-2"> <b><i>NEAR CHOW !</i></b>
      <span flex></span>
      <md-switch ng-model="nightMode" ng-change="toggle()" aria-label="Night Mode">
        <h6>Night Mode</h6>
      </md-switch>
    </md-toolbar>
    <md-content layout-padding ng-if="render">
      <ng-map center="current-location" zoom="19" id="elMap" styles="{{nightMode ? styles2 : styles1 }}" map-initialized="initPlaces(map)">
        <marker position="current-location" title="Current Location"></marker>
      </ng-map>
    </md-content>
    <md-content>
      <md-list>
        <md-list-item class="md-3-line" ng-repeat="result in results" ng-click="restaurantSelect(result.geometry.location)">
          <div class="md-list-item-text noright">
            <h3 ng-style="{color: 'orange'}" flex="90"><b>{{result.name}}</b></h3>
            <p>{{result.vicinity}}</p>
            <span class="md-secondary">
              Rating: <b ng-style="{color: 'orange'}">{{result.rating ? (result.rating | number: 1) : "n/a"}}<br /> </b>                      
            <md-button class="md-raised md-warn md-small {
    min-width: 1%;
}" flex="8" ng-click="restaurantRate(result.place_id)">Rate it !</md-button>
  </span>
          </div>
          <md-divider inset=""></md-divider>
        </md-list-item>
      </md-list>
    </md-content>
  </div>
  <div flex></div>
</div>

script.js

// Note, needs to be served over HTTPS without CORS conflicts
var app = angular.module("App", ["ngMaterial", "ngMap"]);
// Theming
app.config(function($mdThemingProvider) {
  $mdThemingProvider
    .theme("default")
    .primaryPalette("grey")
    .warnPalette("orange");
  $mdThemingProvider.theme("night").primaryPalette("grey").dark();
  $mdThemingProvider.alwaysWatchTheme(true);
});

app.controller("ctrl", [
  "$scope",
  "$http",
  "$timeout",
  "NgMap",
  "$window",
  function($scope, $http, $timeout, NgMap, $window) {
    // Scope vars
    $scope.results = [];
    $scope.theme = "night";
    $scope.nightMode = true;
    $scope.styles1 = [];
    $scope.styles2 = [
      { elementType: "geometry", stylers: [{ color: "#242f3e" }] },
      { elementType: "labels.text.stroke", stylers: [{ color: "#242f3e" }] },
      { elementType: "labels.text.fill", stylers: [{ color: "#746855" }] },
      {
        featureType: "administrative.locality",
        elementType: "labels.text.fill",
        stylers: [{ color: "#d59563" }, { visibility: "off" }]
      },
      {
        featureType: "poi",
        elementType: "labels.text.fill",
        stylers: [{ color: "#d59563" }]
      },
      {
        featureType: "poi.park",
        elementType: "geometry",
        stylers: [{ color: "#263c3f" }, { visibility: "off" }]
      },
      {
        featureType: "poi.park",
        elementType: "labels.text.fill",
        stylers: [{ color: "#6b9a76" }, { visibility: "off" }]
      },
      {
        featureType: "poi.government",
        stylers: [{ visibility: "off" }]
      },
      {
        featureType: "poi.medical",
        stylers: [{ visibility: "off" }]
      },
      {
        featureType: "poi.place_of_worship",
        stylers: [{ visibility: "off" }]
      },
      {
        featureType: "poi.school",
        stylers: [{ visibility: "off" }]
      },
      {
        featureType: "poi.sports_complex",
        stylers: [{ visibility: "off" }]
      },
      {
        featureType: "road",
        elementType: "geometry",
        stylers: [{ color: "#38414e" }]
      },
      {
        featureType: "road",
        elementType: "geometry.stroke",
        stylers: [{ color: "#212a37" }]
      },
      {
        featureType: "road",
        elementType: "labels.text.fill",
        stylers: [{ color: "#9ca5b3" }]
      },
      {
        featureType: "road.highway",
        elementType: "geometry",
        stylers: [{ color: "#746855" }]
      },
      {
        featureType: "road.highway",
        elementType: "geometry.stroke",
        stylers: [{ color: "#1f2835" }]
      },
      {
        featureType: "road.highway",
        elementType: "labels.text.fill",
        stylers: [{ color: "#f3d19c" }]
      },
      {
        featureType: "transit",
        elementType: "geometry",
        stylers: [{ color: "#2f3948" }]
      },
      {
        featureType: "transit.station",
        elementType: "labels.text.fill",
        stylers: [{ color: "#d59563" }]
      },
      {
        featureType: "water",
        elementType: "geometry",
        stylers: [{ color: "#17263c" }]
      },
      {
        featureType: "water",
        elementType: "labels.text.fill",
        stylers: [{ color: "#515c6d" }]
      },
      {
        featureType: "water",
        elementType: "labels.text.stroke",
        stylers: [{ color: "#17263c" }]
      }
    ];
    // Util Vars
    // scope functions:

    $scope.initPlaces = function(map) {
      $scope.myMap = map;
      $scope.$apply();

      $scope.service = new google.maps.places.PlacesService($scope.myMap);
      $scope.request = {
        location: {
          lat: $scope.myMap.getCenter().lat(),
          lng: $scope.myMap.getCenter().lng()
        },
        rankBy: google.maps.places.RankBy.DISTANCE,
        type: ["restaurant"]
      };
      $scope.service.nearbySearch($scope.request, $scope.callback);
    };

    $scope.callback = function(results, status) {
      $scope.$apply(function() {
        $scope.results = results;
      });
    };

    $scope.toggle = function() {
      $scope.theme = $scope.nightMode ? "night" : "default";
      $scope.myMap.styles = $scope.nightMode ? $scope.styles2 : $scope.styles1;
      $scope.myMap.setOptions({ styles: $scope.myMap.styles });
    };

    $scope.restaurantSelect = function(location) {
    var marker = new google.maps.Marker({
      position: location,
      map: $scope.myMap
      });
    };

    $scope.restaurantRate = function(restaurantId) {
      $window.open('//search.google.com/local/writereview?placeid='+restaurantId);
    };
    // Init:
    $timeout(function() {
      $scope.render = true;
    }, 100);
  }
]);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js"></script>
<script src="https://maps.google.com/maps/api/js?key=AIzaSyBchPnlX-iSIaAhMCUUrIU19Weh1U3OWaE&libraries=places"></script>

style.css

body,
html {
  background-color: #666;
}

.bkgc {
  background-color: #fafafa;
}

.bbapp {
  padding-top: 20px;
  padding-left: 8px;
  padding-right: 8px;
}

/* Fancy Night Mode Switch*/

md-switch.md-night-theme.md-checked .md-thumb {
  background-color: rgb(255,255,255);
  background-color: rgba(255, 255, 255, 0.4);
}

md-switch.md-night-theme.md-checked .md-bar {
  background-color: rgb(1, 3, 47);
  background-color: rgba(1, 3, 47, 0.5);
}

.md-hue-2 b{
  color:orange;
}


.md-button.md-small {
    min-width: 1%;
    font-size:12px;
}

styles

<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

warp-map-tests-ngmap.markdown

WARP - Map Tests + ngMap

Using Angular v1.x with ngMap to render google maps & Angular material. some tests for a coding assignment, also fancy night mode :)

A Pen by Eugenio Keno Leon on CodePen.

License.