Clear Google Maps initial State

Question

I'm using ngMap on a project where I have different maps on different views. I have one initial page where I show a map and draw a polygon and some markers. My controller is like this:

 $scope.showInitialMap = function( map ) {
    /*Resize image to show on map*/
    var iconGood = {
      url: 'modules/cars/img/ambulance_ok.png',
      scaledSize: new google.maps.Size( 40, 40 ),
      origin: new google.maps.Point( 0, 0 ),
      anchor: new google.maps.Point( 0, 0 )
    };
    /*Get all cars*/
    $scope.tracks = Tracks.getTaxisRealTime( function() {

      angular.forEach( $scope.tracks, function( c ) {
        var infowindow = new google.maps.InfoWindow( {
          content: contentString
        } );
        /*Set marker position fo each car*/
        var marker = new google.maps.Marker( {
          position: {
            lat: c.Latitude,
            lng: c.Longitude
          },
          icon: iconGood,
          map: map
        } );
      } );
      /*draw map*/
      setArea( map );
    } );
  };

and I just add it to the view like this:

<section data-ng-controller="MapsCtrl" ng-init="InitTaxiHistory()">
    <ng-map center="[19.54, -96.91]" zoom="13" style="height: 600px;"   min-zoom="12">
    </ng-map>
</section>

The problem is that when I go to a different view where I also show a map, it keeps the same state where I left the previous map.

How do I reset the map? Or how create 2 different instances for a map?

score 1 · Answer 1 · edited May 23 '17 at 12:10

1

Creating new instance of Google Map will make question complex and not recommended at all.

see relevant issues:

Solution

And for your situation, you can deal with each ng-map with making googlemap show different things according to your current controller.

<ng-map>
  <marker ng-repeat="marker in tracks" position="{{marker. Latitude}}, {{marker. Longitude}}"></marker>
<ng-map>

the markers will be removed automitically if there isn't data in $scope.tracks and if $scope.tracks is undefined.

Plunker demo.

edited May 23 '17 at 12:10

Community

1
1

answered May 08 '17 at 03:45

Pengyy

37,383
15
83
73

Is not other way to do it on code with the api? I tried your solutions but is a pain in the ass for all the stuff I do with the map, show a infowindow on each marker from database, and in other window I consult a direction between points but I use a recursive function because is more than 23 points that google allow. I need clear all the stuff, markers, polygons, directions etc. – Ellebkey May 09 '17 at 04:08
@Ellebkey unfortunately you can't do that with ng-map. it seems canbe done by deleting the entire div which wrapped the googlemap (got from the issue link in answer but i didn't test it). – Pengyy May 09 '17 at 04:12

score 1 · Answer 2 · answered May 19 '17 at 14:25

Since NgMap extends google.maps.Map object to store all the objects (markers, shapes) you could clear the map by calling setMap() method:

$scope.clearMap = function () {
    //clear markers
    for (var k in $scope.map.markers) {
        $scope.map.markers[k].setMap(null);
    }
    //clear shapes
    for (var k in $scope.map.shapes) {
        $scope.map.shapes[k].setMap(null);
    };
};

Example

var app = angular.module('appMaps', ['ngMap']);
app.controller('mapCtrl', function ($scope, NgMap) {

    $scope.cities = [
        { id: 1, name: 'Oslo', pos: [59.923043, 10.752839] },
        { id: 2, name: 'Stockholm', pos: [59.339025, 18.065818] },
        { id: 3, name: 'Copenhagen', pos: [55.675507, 12.574227] },
        { id: 4, name: 'Berlin', pos: [52.521248, 13.399038] },
        { id: 5, name: 'Paris', pos: [48.856127, 2.346525] }
    ];


    NgMap.getMap().then(function (map) {
        $scope.map = map;
    });


    $scope.clearMap = function () {
        //clear markers
        for (var k in $scope.map.markers) {
            $scope.map.markers[k].setMap(null);
        }
        //clear shapes
        for (var k in $scope.map.shapes) {
            $scope.map.shapes[k].setMap(null);
        };
    };

    $scope.showMap = function () {
        //clear markers
        for (var k in $scope.map.markers) {
            $scope.map.markers[k].setMap($scope.map);
        }
        //clear shapes
        for (var k in $scope.map.shapes) {
            $scope.map.shapes[k].setMap($scope.map);
        };
    };

});

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="appMaps" ng-controller="mapCtrl">
        <button ng-click="clearMap()">Clear All</button> 
        <button ng-click="showMap()">Show All</button>  
        <map center="[59.339025, 18.065818]" zoom="4">
            <marker id='ID{{city.id}}' ng-repeat="city in cities" position="{{city.pos}}" >
            </marker>

            <shape name="rectangle" bounds="[ [57.190, 16.149], [59.899, 20.443] ]"></shape>
        </map>
</div>

Actually I've been researching and what I've found until now is that the implementation of Maps create only one instance on all the system. So to be available to "clear" the map I just have to declare the variables globally and then when I use a ng-init function every time is call it, the controller will set the parameters to 0. — Ellebkey, May 19 '17 at 16:51

Clear Google Maps initial State

2 Answers2