Using multiple Google Maps API instances

Question

Using multiple Google Maps API instances

Navigation

#1 by (1 votes)

1

I need to draw a map several times and I have a function that loads the map and is the first one to be invoked when opening the page. Here is 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 create the map for the first time I use:

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

Then when the user selects an item in the combobox I recreates the map again:

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

Is this correct in terms of performance? When I do this, am I creating multiple instances for the map or not?

javascript google-maps google google-maps-api-3

asked by anonymous 02.12.2015 / 13:05

1 answer

How to apply slider effect in web page? Relate and Compare MySQL and VB6

score 1 · Accepted Answer

You are re-instantiating the map, you can simply wipe the map and reassemble all the elements again.

You can instantiate the map once, then go manage 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