title: Re use Google maps instance within modal
body: <p>I have a map in a modal which i would like to display a map of locations for each individual product activated by a click event (note my locations are post codes):</p>
  
  <p>Modal</p>
  
  <pre><code>&lt;div id="myModal" class="modal"&gt;
      &lt;div class="modal-content"&gt;
          &lt;span class="modal-close"&gt;x&lt;/span&gt;
          &lt;div id="map_canvas"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Product</p>
  
  <pre><code>if (Model.locationsExist &gt; 1)
  {
      &lt;div class="maplink"&gt;See @Model.locationsExist locations on map&lt;/div&gt;
  }
  else
  {
      &lt;div class="maplink"&gt;See on map&lt;/div&gt;
  }
  @Html.HiddenFor(x =&gt; x.locationString, new { @class = "locstring" })
  </code></pre>
  
  <p>Map Globals</p>
  
  <pre><code>var map;
  var elevator;
  var myOptions = {
      zoom: 5,
      center: new google.maps.LatLng(53.90, -3.00),
      mapTypeId: 'roadmap'
  };
  
  var addresses;
  var gmarkers = [];
  </code></pre>
  
  <p>Map creation -I have a function that iterates an array of postcodes and adds them to the map ... also to a global array so that I can remove them later as per <a href="https://stackoverflow.com/questions/16482949/google-map-api-removing-markers">this post</a></p>
  
  <pre><code>function loadmap(locs){           
  
      map = new google.maps.Map($('#map_canvas')[0], myOptions);
  
      addresses = locs.split('|');
  
          for (var x = 0; x &lt; addresses.length; x++) {
              var marker = $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[x] + '&amp;sensor=false', null, function (data) {
                  var p = data.results[0].geometry.location
                  var latlng = new google.maps.LatLng(p.lat, p.lng);
                  new google.maps.Marker({
                      position: latlng,
                      map: map
                  });
  
              });
  
              gmarkers.push(marker);                
          }
  
          addresses = [];
      };
  
  function removeMarkers() {
      for (i = 0; i &lt; gmarkers.length; i++) {
              gmarkers[i].setMap(null);
          }
      };
  </code></pre>
  
  <p>Map open and close - I show the modal on the click of the link in my product thumbnail. This runs the creation code. The when i click the close link the pins should be removed. Then new pins added if another map link is clicked.</p>
  
  <pre><code>$(document).on('click', '.maplink', function () {
          loadmap($(this).siblings('.locstring').val());
          $('#myModal').css("display", "block");
      });
  
  $(document).on('click', '.modal-close', function () {
          $('#myModal').css("display", "none");
          removeMarkers();
      });
  </code></pre>
  
  <p>The first time I click the modal shows and the map is fine. It works. I close and then click another link and the map seems to bug out:</p>
  
  <p><a href="https://i.stack.imgur.com/666qB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/666qB.png" alt="enter image description here"></a></p>
  
  <p>I have looked at numerous posts and this is the 5th version I have tried. Has anyone had this before?</p>