Use of various instances of Google Maps API

Question

I need to draw a map several times and I have a function that loads the map and is the first to be invoked when opening the page. Follows the body of the function:

 map = new google.maps.Map(document.getElementById('map'), {
   zoom:  8,
   center: new google.maps.LatLng(-15.8307603,-47.9088141),

   mapTypeId: google.maps.MapTypeId.ROADMAP
 });

    myService.clearTimeouts();
 for(var j = 0; j < $kinvey.arrayIdColetor.length;  j++){ 
   drawLatLong(j, $kinvey.arrayIdColetor);          
 }

 $scope.map = new google.maps.Map(document.getElementById('map'), map); 

After loading the map, the user can select an item from a combobox to change the map data according to the selected item. For this I use the following function:

function showMapSelected(a, arrayIdColetor) {
  $scope.map = null;
  resetScopeData();
  map = new google.maps.Map(document.getElementById('map'), {
   zoom:  8,
   center: new google.maps.LatLng(-15.8307603,-47.9088141),

   mapTypeId: google.maps.MapTypeId.ROADMAP
 }); 

  drawLatLong(a, arrayIdColetor);          

  $scope.map = new google.maps.Map(document.getElementById('map'), map);
}

As you can see, when I first create the map I use:

$scope.map = new google.maps.Map(document.getElementById('map'), map);

then when the user selects an item in the combobox I recreate the map again:

$scope.map = new google.maps.Map(document.getElementById('map'), map);

Is this correct with respect to performance? When I do this, I am creating multiple instances for the map or not?

Answer 1

You are re-instating the map, you can simply clear the map and assemble all the elements again.

You can instantiate the map 1 time, then go managing the elements within it.

For example, remove all markers from maps

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
  setMapOnAll(null);
}

// Sets the map on all markers in the array.
function setMapOnAll(map) {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(map);
  }
}

See examples here