title: Drop Down Menu and Google Maps
body: <p>I have a drop down menu to show different Google Maps. The Dining map shows up, but when I switch to another map, like say Parks, it shows a gray box with the marker icon on the top left corner, and you see a 1 second view/flash of another map underneath it. It works when I put "visible" in each "neighborhood-listing" class, but then there's multiple maps showing at the same time rather than only one.</p>
  
  <p>HTML</p>
  
  <pre><code>   &lt;div class="explore"&gt;
      &lt;h4&gt;Explore Your New Neighborhood&lt;/h4&gt;
      &lt;select id="neighborhood-select"&gt;
        &lt;option value="Dining"&gt;Dining&lt;/option&gt;
        &lt;option value="Shopping"&gt;Shopping&lt;/option&gt;
        &lt;option value="Schools"&gt;Schools&lt;/option&gt;
        &lt;option value="Parks"&gt;Parks&lt;/option&gt;
        &lt;option value="Hospitals"&gt;Hospitals&lt;/option&gt;
        &lt;option value="Colleges"&gt;Colleges&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
    &lt;div class="explore-images featured-image"&gt;
      &lt;div class="neighborhood-listing Dining visible"&gt;
        &lt;div class="neighborhood-btns"&gt;
         &lt;div id="map-dining"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="neighborhood-listing Shopping "&gt;
        &lt;div class="neighborhood-btns"&gt;
          &lt;div id="map-shopping"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt; 
      &lt;div class="neighborhood-listing Parks "&gt;
        &lt;div class="neighborhood-btns"&gt;
          &lt;div id="map-parks"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt; 
      &lt;div class="neighborhood-listing Hospitals "&gt;
        &lt;div class="neighborhood-btns"&gt;
          &lt;div id="map-hospitals"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt; 
      &lt;div class="neighborhood-listing Colleges "&gt;
        &lt;div class="neighborhood-btns"&gt;
          &lt;div id="map-colleges"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="neighborhood-listing Schools "&gt;
        &lt;div class="neighborhood-btns"&gt; 
        &lt;div id="map-schools"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.explore-images .neighborhood-listing,
  .explore-images .leasing-plan {
  display: none;
  }
  .explore-images .neighborhood-listing.visible,
  .explore-images .leasing-plan.visible {
  display: block;
  }
  
  .explore {
  padding: 2.5% 5%;
  background-color: #f2efef;
  }
  .explore h4 {
  margin-top: 0;
  margin-bottom: .5em;
  }
  
  /* .directory-btns, */
  .neighborhood-btns {
  position: relative;
  top: 0;
  right: 0;
  }
  
  @media screen and (max-width: 480px) {
  .desktop {
      display: none;
  }
  .mobile {
      display: block;
  }
  }
  
  #map-dining, #map-shopping, #map-schools, #map-parks, #map-hospitals, #map-colleges{
  width:100%;
  height: 400px;
  }
  </code></pre>
  
  <p>I am hoping to have each map show up properly (like "Dining") when selected from the drop-down menu and prevent the 1 second view of another map (during transition) from occurring, basically have it smoothly transition to the next selected map.</p>
  
  <p>Link to <a href="https://jsfiddle.net/sf82/fbt9p701/1/" rel="nofollow">JS Fiddle</a>. </p>
  
  <hr>
  
  <p><em><b>SOLVED</b></em></p>
  
  <p>I really like the smooth transition of Godwin's jsfiddle, only if the resizing was as smooth! I also really like how geocode zip's jsfiddle worked, the resizing was perfect! It was just the transition wasn't as smooth since it still had the beige box view with the marker on the top left during transition. So what I did was sort of combine the two codes, and it pretty much was what I was looking for. Thank you all so much, I'm really grateful for all your help!</p>
  
  <p>Edited JS Fiddle with working code:
  <a href="https://jsfiddle.net/sf82/fbt9p701/1/" rel="nofollow">https://jsfiddle.net/sf82/fbt9p701/1/</a></p>
  
  <p>CSS changed:</p>
  
  <pre><code>.explore-images .neighborhood-listing,
  .explore-images .leasing-plan {
      visibility: hidden;
      position: absolute;
      height: 400px;
      width: 100%;
  }
  .explore-images .neighborhood-listing.visible,
  .explore-images .leasing-plan.visible {
      display: block;         
      visibility: visible;
  }
  </code></pre>
  
  <p>JS added:</p>
  
  <pre><code>jQuery(document).ready(function ($) {
  $('#leasing-select, #neighborhood-select, #store-directories-select').change(function () {
      var new_image = $(this).val();
      $('.explore-images .visible').fadeOut().removeClass('visible');
      $('.explore-images .' + new_image).fadeIn(function () {
          resizeMap(new_image);
      }).addClass('visible');
  
  });
  });
  
  function resizeMap(type) {
  var typeL = type.toLowerCase();
  switch (typeL) {
      case 'dining':
          google.maps.event.trigger(map, 'resize');
          map.setCenter(mapOptions.center);
          break;
      case 'shopping':
          google.maps.event.trigger(map2, 'resize');
          map2.setCenter(mapOptions.center);
          break;
      case 'schools':
          google.maps.event.trigger(map3, 'resize');
          map3.setCenter(mapOptions.center);
          break;
      case 'parks':
          google.maps.event.trigger(map4, 'resize');
          map4.setCenter(mapOptions.center);
          break;
      case 'hospitals':
          google.maps.event.trigger(map5, 'resize');
          map5.setCenter(mapOptions.center);
          break;
      case 'colleges':
          google.maps.event.trigger(map6, 'resize');
          map6.setCenter(mapOptions.center);
          break;
      default:
          break;
  }
  }
  </code></pre>