CODEWITHSUNDEEP
javascriptjqueryhtmlcssgoogle-maps
Phoenix_uy
Phoenix_uy

Reputation: 3294

Google maps not display entire map on the div container

I have a div with a google map inside but the map is not showing entirely.. just shows a part of the map and the other it's all grey and if i move the map with the cursor, the maps visual part moves fine but the size changes but not taking the entire div size.

This is the div and a snapshot:

<div style="height: 275px; width: 715px;" id="map_display"></div>

This is a snapshot

Upvotes: 0

Views: 601

Answers (3)

patel.milanb
patel.milanb

Reputation: 5992

Working Fiddle 

function InitializeMap() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_display"), myOptions);
}
$(document).ready(function () {
    InitializeMap();
});

Upvotes: 0

ChrisSwires
ChrisSwires

Reputation: 2723

The answer provided Here may be of use to you, the problem is likely that the map has been loaded prior to the sizing of the div (is it perhaps dynamically sized?).

Loading the map after the rest of the page elements should help.

Upvotes: 0

Praveen
Praveen

Reputation: 56501

You need to trigger a resize event in Google maps like

google.maps.event.trigger(myMap, 'resize');

After initializing the Google maps

Upvotes: 1

Related Questions