CODEWITHSUNDEEP
angularjsangularjs-scopeangularjs-google-maps
Amjid Backer
Amjid Backer

Reputation: 1

NgMaps Center not working (Dynamic Point)

I'm using NgMaps in my Angular app

I'm trying to give the center point dynamically, but it's taking some other points which is not given by me:

HTML:

<ng-map zoom="5" center="{{center}}" style="height:600px">
</ng-map>

In controller:

$scope.center =[18.9750, 72.8258];

Here's the Plnkr Code:

http://plnkr.co/edit/hbNZdSKuUZqVSsJN7he3?p=preview

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

  <link rel="stylesheet" href="style.css">

  <!-- JS -->
  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
  <!-- load angular, ngRoute, ngAnimate -->
  <script src="http://code.angularjs.org/1.4.7/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
  <script src="http://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
  <script src="app.js"></script>

</head>

<body ng-controller="MainCtrl">
  <ng-map zoom="8" center="{{center}}" style="height:600px">
    <!-- <ng-map zoom="5" center="[20.1450107,77.8764691]" style="height:600px"> -->
    <custom-control id="home" position="TOP_RIGHT" index="1000">
      <div style="background-color: rgba(0,0,0,.5); color:#fff;width:200px;padding: 10px;" ng-if="customMarkers[0].clustors">
        <table class="table table-condensed">
          <thead>
            <tr>
              <th style="width: 50%">Priority</th>
              <th style="width: 50%">Color</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="(key, value) in customMarkers[0].clustors">
              <td>Priority {{$index}}</td>
              <td class="{{clustorcolors[$index]}}"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </custom-control>

    <div ng-repeat="(key, value) in customMarkers[0].clustors">
      <div ng-repeat="point in value">
        <custom-marker position="{{point.coordinate}}" on-mouseover="clustormouseover()" on-mouseout="clustormouseout()">
          <div class="mappointer {{clustorcolors[$parent.$index]}}" ng-click="clickme(key,$index)">
            <div class="infobox" id="clustor_{{$parent.$index}}_{{$index}}" ng-show="point.visibility">
              BM_M_EXECTIVE : {{point.BM_M_EXECTIVE}},<br>
              BM_PROFIT : {{point.BM_PROFIT}},<br>
              BM_QUANTITY : {{point.BM_QUANTITY}},<br>
              BM_NAME : {{point.BM_NAME}},<br>
              BM_DISTRICT : {{point.BM_DISTRICT}},<br>
              BM_TOTALPURCHASE : {{point.BM_TOTALPURCHASE}},<br>
            </div>
          </div>
        </custom-marker>
      </div>
    </div>
  </ng-map>
</body>

</html>

Upvotes: 0

Views: 378

Answers (2)

Mr. B.
Mr. B.

Reputation: 8717

I had the same problem, because ngMap does not recognize the $interpolateProvider (according to @allenhwkim). Solution:

HTML:

<ng-map id="map" zoom="5" style="height:600px"></ng-map>

Javascript:

var that = this;    
NgMap.getMap('map').then(function(map) {
    that.map = map;
    that.map.setCenter(new google.maps.LatLng(18.9750, 72.8258));
});

I hope, it helps someone. Thanks @allenhwkim for ngMap!

Upvotes: 0

allenhwkim
allenhwkim

Reputation: 27748

I don't know your case, but it seems working fine with me with the following example.

http://plnkr.co/edit/cec5b88WpZcoiSd1Mq28?p=preview

javascript

  vm.center = "37.7699298, -122.4469157";
  vm.setCenter = function() {
    vm.center = "38.7699298, -123.4469157";
  }
});

html 

  center: {{vm.center}}<br/>
  <button ng-click="vm.setCenter()">Set Center to "38.7699298, -123.4469157"</button>
</div>

Upvotes: 0

Related Questions