3

In this AngularJS SPA using NgMap, I have map pins being set on data filtering. On initial load of the map, the map is centered on some place out in the ocean, not the coordinates I have set in the map object in the center parameter. I've also tried setting this on the map initialization without any success.

  $scope.$on('mapInitialized', function(event, map) {

    var myLatlng = new google.maps.LatLng(43.6650000, -79);
    var mapOptions = {
      draggable: true,
      zoom: 4,
      center: myLatlng
    }
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);


  });
<map zoom="3" center="[43.6650000,-79]" scrollwheel="false" zoom-to-include-markers="true">
  <marker ng-repeat="site in filteredPins track by $index" position="[{{site.Latitude}},{{site.Longitude}}]" id="{{site.Id}}" title="{{site.SiteName}}"></marker>
</map>

Where/how does one set the initial map location on load if not through the <map> center param, or the center option in the map options when the map is initialized?

Plunkr: http://plnkr.co/edit/u75fJT?p=preview

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
TWLATL
  • 2,859
  • 4
  • 25
  • 37

3 Answers3

2

Your code is correct, the initial map center is exactly at the coordinates you've specified, the problem seems to be on the html zoom-to-include-markers="true" that is changing the map center after loaded

<map zoom="3" center="[43.6650000,-79]" scrollwheel="false" zoom-to-include-markers="true">

remove zoom-to-include-markers="true" and it will work

Bruno
  • 543
  • 2
  • 7
  • 21
  • please how can I calculate the map dynamically? I have a polygon and I want that the whole polygon be shown. Have you any idea how can I do it? – Ne AS May 05 '17 at 15:23
0

It seems the latitude and longitude you provided is in ocean. I have tried it also and show me in ocean. :).

Just change the latitude and longitude to the correct location, just note, zoom-to-include-markers="true" working well in mine, it doesn't cause the map to display the coordinate in ocean.

Kerisnarendra
  • 877
  • 9
  • 14
0

I had this problem because the map init occurred when the value bound to center was [0,0]. when the actual center was populated into the controller, the map was not visible so it didnt re-center.

the way i solved it was by doing an explicit $scope.$digest when I made the map visible

dancl
  • 689
  • 5
  • 13