title: refresh map in angularjs
body: <p>its been a while, I am trying angular google maps, i have created the map successfully, but refreshing the map is not working out.. don't know why, i have given refresh in homectrl</p>
  
  <blockquote>
    <ol>
    <li>i have created a home page where user enters a place where he wants to see in map.when user clicks submit button, it will go to the next page.</li>
    <li>map page receive the name which user enter and shows in the text box in map view, First i have initialized the map, when user click the view button for this input, the map is shown for searched place.the code is in perfect working condition, but when i refresh the map is not displayed and get initialized..??</li>
    </ol>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('starter', ['ngMaterial', 'ngCordova', 'ngRoute']);
  app.config(function($routeProvider) {
    $routeProvider
      .when('/home', {
        templateUrl: 'templates/home.html',
        controller: 'homeCtrl'
      })
      .when('/map:companyName', {
        templateUrl: 'templates/map.html',
        controller: 'mapCtrl'
      })
      .otherwise({
        redirectTo: '/home'
      })
  });
  
  app.controller('homeCtrl', ['$scope', '$location','$route',
    function($scope, $location,$route) {
      $scope.save = function(companyName) {
        $location.path('/map' + companyName);
      };
      $scope.refresh = function() {
        $route.reload();
      }
    }
  ]);
  app.service('Map', function($q) {
    this.init = function() {
      var options = {
        center: new google.maps.LatLng(40.7127837, -74.00594130000002),
        zoom: 13,
        disableDefaultUI: true
      }
      this.map = new google.maps.Map(
        document.getElementById("map"), options
      );
      this.places = new google.maps.places.PlacesService(this.map);
    }
    this.search = function(str) {
      var d = $q.defer();
      this.places.textSearch({
        query: str
      }, function(results, status) {
        if (status == 'OK') {
          d.resolve(results[0]);
        } else d.reject(status);
      });
      return d.promise;
    }
    this.addMarker = function(res) {
      if (this.marker) this.marker.setMap(null);
      this.marker = new google.maps.Marker({
        map: this.map,
        position: res.geometry.location,
        animation: google.maps.Animation.DROP
      });
      this.map.setCenter(res.geometry.location);
    }
  });
  
  app.controller('mapCtrl', function($scope, $routeParams, Map) {
    $scope.place = {};
    console.log($routeParams.companyName);
    $scope.searchPlace = $routeParams.companyName;
    $scope.search = function() {
      $scope.apiError = false;
      Map.search($scope.searchPlace)
        .then(
          function(res) { // success
            console.log("res: " + res);
            Map.addMarker(res);
            $scope.place.name = res.name;
            $scope.place.lat = res.geometry.location.lat();
            $scope.place.lng = res.geometry.location.lng();
          },
          function(status) { // error
            $scope.apiError = true;
            $scope.apiStatus = status;
          }
        );
    }
    Map.init();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#map { 
      height: 400px;
      margin: 20px 0;
      border-radius: 5px;
      border: 1px solid silver;
  }/* Empty. Add your own CSS if you like */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&gt;
    &lt;title&gt; Map Home&lt;/title&gt;
    &lt;link href="css/style.css" rel="stylesheet"&gt;
    &lt;link href="js/angular-material.min.css" rel="stylesheet"&gt;
    &lt;script src="js/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/angular-animate.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/angular-aria.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/angular-material.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/ng-cordova.js"&gt;&lt;/script&gt;
    &lt;script src="js/angular-route.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/angular-material-icons.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;language=en"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&amp;sensor=false"&gt;&lt;/script&gt;
    &lt;!-- cordova script (this will be a 404 during development) --&gt;
    &lt;script src="cordova.js"&gt;&lt;/script&gt;
  
    &lt;!-- your app's js --&gt;
    &lt;script src="js/app.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-app="starter" ng-controller="homeCtrl"&gt;
    &lt;md-toolbar style="position:fixed !important;" layout="row"&gt;
      &lt;md-button aria-label="refresh" ng-click="refresh()"&gt;
        &lt;ng-md-icon icon="refresh"&gt;&lt;/ng-md-icon&gt;
      &lt;/md-button&gt;
    &lt;/md-toolbar&gt;
    &lt;div style="padding-top:56px !important;" ng-view&gt;&lt;/div&gt;
    &lt;script type="text/ng-template" id="templates/home.html"&gt;
    &lt;div layout-gt-sm="row" ng-controller="homeCtrl"&gt;
    &lt;md-input-container class="md-block" flex-gt-sm&gt;
      &lt;label&gt;Company name&lt;/label&gt;
      &lt;input type="text" ng-model="companyName"&gt;
    &lt;/md-input-container&gt;
  &lt;/div&gt;
  &lt;div layout="row" layout-align="center center"&gt;
    &lt;md-button class="md-primary" type="button" ng-click="save(companyName)"&gt;
      &lt;label&gt;Viewplace&lt;/label&gt;
    &lt;/md-button&gt;
  &lt;/div&gt;
  &lt;/script&gt;
  &lt;script type="text/ng-template" id="templates/map.html"&gt;
    &lt;div class="container" ng-controller="mapCtrl"&gt;
      &lt;form name="searchForm" novalidate ng-submit="search()"&gt;
        &lt;div class="input-group"&gt;
          &lt;input ng-bind="searchPlace" name="place" type="text" class="form-control" ng-model="searchPlace" required autofocus /&gt;
          &lt;span class="input-group-btn"&gt;
            &lt;button class="btn btn-primary" ng-disabled="searchForm.$invalid"&gt;View Place&lt;/button&gt;
          &lt;/span&gt;
        &lt;/div&gt;
      &lt;/form&gt;
      &lt;div id="map"&gt;&lt;/div&gt;
      &lt;form name="resForm" class="form-horizontal" novalidate ng-submit="send()"&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  
  Please Help me guys, Thank for the help in advance.. </p>