CODEWITHSUNDEEP
javascriptjquerygoogle-maps
BenM
BenM

Reputation: 53198

Google Maps generates blank grey <div>

I am currently trying to generate several Google Map elements on a single page inside a jQuery each() function. There are several .new-venue-item elements on the page, and they look like this:

<div class="new-venue-item">
   <div class="image">
      <div class="image">
         <a href="/venue/8121_the-square-bristol-city-of-bristol" title="Discover more about The Square"><img src="http://static.weddingvenues.com/venues/200x300/Wedding-image-with-logo-rectangular.jpg" class="" width="200" height="300" alt="" title="" item-prop=""></a>
      </div>
      <div id="map8121" class="map" data-lng="-2.6101986" data-lat="51.4590031">
      </div>
      <div class="overlay">
         <a href="#" class="action-btn btn-wv contact-venue trackit" data-click-type="search-contact" data-venue-id="8121" data-customer-id="4038" data-id="8121">Contact venue</a>
         <a href="/venue/8121_the-square-bristol-city-of-bristol/" class="action-btn btn-white trackit" data-click-type="search-map" data-venue-id="8121" data-customer-id="4038">More info</a>
      </div>
   </div>
   <div class="info">
      <a href="/venue/8121_the-square-bristol-city-of-bristol" title="Discover more about The Square">The Square</a>
      <span class="address"><span class="address"><a href="/p-544/united-kingdom/england/city-of-bristol/bristol/" title="Bristol, City of Bristol">Bristol</a>, <a href="/p-164/united-kingdom/england/city-of-bristol/" title="City of Bristol, England">City of Bristol</a></span></span>
   </div>
</div>

And then the jQuery code is:

$('.new-venue-item').each(function() {

    var $map = $(this).find('.map'),
        lat = parseFloat($map.data('lat')),
        lng = parseFloat($map.data('lng'));

    // Hook up the map:
    var mapOptions = {
        scrollwheel: false,
        streetViewControl: false,
        mapTypeControl: false,
        panControl: false,
        zoomControl: false,
        draggable: false,
        zoomLevel: 14,
        center: {
            lat: lat,
            lng: lng
        }
    };

    //new google.maps.Map( document.getElementById('map8160'), mapOptions );

    $(this).data('map', new google.maps.Map($map[0], mapOptions));


});

Unfortunately, this generates a blank map element with a grey background. There are no errors in the console, and the Map API is being correctly included. Has anyone encountered this issue before, and how might I fix it?

I have put together a jsFiddle demonstrating the problem.

Upvotes: 1

Views: 692

Answers (1)

Kieran McClung
Kieran McClung

Reputation: 724

In your example zoomLevel needs to be changed to zoom which fixes the issue.

$('.new-venue-item').each(function() {

    var $map = $(this).find('.map'),
        lat = parseFloat($map.data('lat')),
        lng = parseFloat($map.data('lng'));

    // Hook up the map:
    var mapOptions = {
        scrollwheel: false,
        streetViewControl: false,
        mapTypeControl: false,
        panControl: false,
        zoomControl: false,
        draggable: false,
        zoom: 14, //Changed from zoomLevel
        center: {
            lat: lat,
            lng: lng
        }
    };

    //new google.maps.Map( document.getElementById('map8160'), mapOptions );

    $(this).data('map', new google.maps.Map($map[0], mapOptions));

});

It took me a while to figure out

Upvotes: 3

Related Questions