CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-maps
chuckd
chuckd

Reputation: 14520

Can't get Google Map to refresh or redraw

I'm calling

google.maps.event.trigger(map, "resize");

in my window resize event, but when I resize the window the map turns grey. The resize code is being hit and I don't see any errors in the Chrome console window. Is there something I'm missing?

Here is my code, which includes everything in my js script for the page, with two pics that help to show what the before and after looks like

$(document).ready(function() {
  var map = null;
  google.maps.event.addDomListener(window, 'load', initializeMap);

  var x = window.innerHeight;
  var list = $('#theList');
  var pagedListHeight = $('.pagedList').height();
  list.textContent = "height: " + (x - 55 - pagedListHeight);
  list[0].style.height = (x - 55 - pagedListHeight) + 'px';

  document.getElementById("GoogleResultMap").textContent = "height: " + (x - 65);
  document.getElementById("GoogleResultMap").style.height = (x - 65) + 'px';

  function initializeMap() {
    var mapProp = {
      center: new google.maps.LatLng(51.508742, -0.120850),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("GoogleResultMap"), mapProp);
  }

  $(window).resize(function() {
    x = window.innerHeight;
    list = $('#theList');
    pagedListHeight = $('.pagedList').height();
    list.textContent = "height: " + (x - 55 - pagedListHeight); // 55 is the nav bar height
    list[0].style.height = (x - 55 - pagedListHeight) + 'px';

    document.getElementById("GoogleResultMap").textContent = "height: " + (x - 65);
    document.getElementById("GoogleResultMap").style.height = (x - 65) + 'px';

    google.maps.event.trigger(map, "resize");
  });

});
<div class="container">
  <div class="resultrow">
    <div id="resultMap" class="col-md-4 no-float">
      <div id="GoogleResultMap" style="width:100%;border: 1px solid black;"></div>
    </div>
    <div id="resultContent" class="col-md-8 no-float">
      <div id="yogaSpaceList">
        <div id="theList" style="border: 1px solid black;overflow-y:scroll;">
          @foreach (var space in Model.YogaSpaces) {
          <div>
            <h4>@space.Overview.Title</h4>
            <div>
              @space.Overview.Summary
            </div>
          </div>
          <hr />}
        </div>

        <div class="pagedList">
          @Html.PagedListPager(Model.YogaSpaces, page => Url.Action("Search", new { Model.SearchQuery, Model.ClassDate, page }), PagedListRenderOptions.MinimalWithItemCountText)

        </div>

      </div>
    </div>
  </div>
</div>

before window resize and then after

before window resize

enter image description here

Upvotes: 0

Views: 116

Answers (1)

ScaisEdge
ScaisEdge

Reputation: 133360

your problem is due to the fact that you go to make it in writing within the <div id="GoogleResultMap"> that is the <div> containing the map. Google maps don't like this. try not to write or to view the value you need with an alert.

I replaced your code 

 document.getElementById("GoogleResultMap").textContent = "height: " + (x - 65);

with this simple alert message

alert("height: " + (x - 65));

and the map is displayed

Upvotes: 1

Related Questions