Make a map element blank, disappear (Google Maps JavaScript API, v3)

Question

There are many calls for help with the maps API where a blank white div is undesirable. In my case it's desirable.

I know how to make a map appear.

map.setCenter(new google.maps.LatLng(latitude, longitude));

I know how to make directions appear.

directionsService.route(request, function(result, status) {
    if (status === google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(result);
    }
});

Occasionally I just want the map element to "go white." Later I want to put a map or directions back in there.

I've tried this:

$('#map').empty();

It works, but after that I can never make a map appear again. What's the correct way?

I suppose I could make and delete map instances but this bug report says each destroyed map instance leaks 2MB memory, and Google officially discourages the practice (here and here). I'd really rather not overlay a white rectangle, or make the map display:none. Is there no better way?

(My application is a map next to an address entry form. When sufficient detail has been entered, a map automatically appears. If the field contents are deleted, the map goes blank again.)

score 0 · Answer 1 · answered Aug 11 '17 at 01:22

I would just set the map div's innerHTML to "".

document.getElementById('map_canvas').innerHTML = "";

(but $("#map_canvas").empty(); works as well)

Once you do that you need to recreate and reinitialize the map object.

map = new google.maps.Map(document.getElementById("map_canvas"), {
  center: new google.maps.LatLng(37.4419, -122.1419),
  zoom: 13,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

proof of concept fiddle

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var displayMap = true;
  google.maps.event.addDomListener(document.getElementById('btn'), 'click', function() {
    if (displayMap) {
      document.getElementById('map_canvas').innerHTML = "";
    } else {
      map = new google.maps.Map(
        document.getElementById("map_canvas"), {
          center: new google.maps.LatLng(37.4419, -122.1419),
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
    }
    displayMap = !displayMap;

  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<input type="button" id="btn" value="toggle map" />
<div id="map_canvas"></div>

I mentioned this goes against google advice. See [this answer](https://stackoverflow.com/a/10660672/673991) which quotes a video where googloids say "they don't really support use cases that involve creating/destroying successive map instances." Or did I misunderstand something? — Bob Stein, Aug 11 '17 at 01:37
A 2011 [bug report](https://issuetracker.google.com/issues/35821412) "Destroying Google Map Instance Never Frees Memory" (about 2MB each) received an [official response](https://issuetracker.google.com/issues/35821412#comment32) in 2015 "I'm labeling this as **won't fix**, because this is technically difficult. We're not really sure in how many places we're leaking." — Bob Stein, Aug 11 '17 at 10:35

score 0 · Accepted Answer · answered Aug 11 '17 at 16:57

Set the map visibility to hidden.

Better yet, use a class.

CSS:

.map-hide {
    visibility: hidden;
}

jQuery:

$('#map').addClass('map-hide');
$('#map').removeClass('map-hide');

JavaScript (IE10+):

document.getElementById("map").classList.add('map-hide');
document.getElementById("map").classList.remove('map-hide');

Add the class to blank the map. Remove it when rendering the map.

Adding and removing a class is better in case multiple parts of the code turn visibility on or off for different reasons.

Setting a map's visibility to hidden is better than setting its display to none, which can permanently ruin map rendering. I saw one clue to this in the docs about Map.fitBounds() breaking.

Make a map element blank, disappear (Google Maps JavaScript API, v3)

2 Answers2