-1

I have implemented the Google maps JavaScript API and I am trying to get a full screen map.

The map itself is only showing in a small box in the corner, I know the container is the right size as I have google elements on each corner but the map isn't filling the container.

Here's what I have: Screenshot Of Map

The code:

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAh_6k9o89NOW69iR9mL_0J6vu9QMm_54w&sensor=false&extension=.js"></script> 
<script> google.maps.event.addDomListener(window, 'load', init);

var map;

function init() {
    var mapOptions = {
        center: new google.maps.LatLng(51.508800670335646,-0.06943131238223),
        zoom: 12,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.DEFAULT,
        },
        disableDoubleClickZoom: true,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        },
        scaleControl: true,
        scrollwheel: true,
        streetViewControl: true,
        draggable : true,
        overviewMapControl: true,
        overviewMapControlOptions: {
            opened: false,
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: [
    {
        featureType: 'water',
        stylers: [{color:'#46bcec'},{visibility:'on'}]
    },{
        featureType: 'landscape',
        stylers: [{color:'#f2f2f2'}]
    },{
        featureType: 'road',
        stylers: [{saturation: -100},{lightness: 45}]
    },{
        featureType: 'road.highway',
        stylers: [{visibility: 'simplified'}]
    },{
        featureType: 'road.arterial',
        elementType: 'labels.icon',
        stylers: [{visibility: 'off'}]
    },{
        featureType: 'administrative',
        elementType: 'labels.text.fill',
        stylers: [{color: '#444444'}]
    },{
        featureType: 'transit',
        stylers: [{visibility: 'off'}]
    },{
        featureType: 'poi',
        stylers: [{visibility: 'off'}]
    }
],

    }

    var mapElement = document.getElementById('map');
    var map = new google.maps.Map(mapElement, mapOptions);
    var locations = [

    ];

    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            icon: '',
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
        });
    }
}
</script> 

<style> 
#map{
    width:100%;
    height:100%;
}
</style>

Your input will be greatly appreciated.

AppleTattooGuy
  • 1,145
  • 8
  • 17
  • 39
  • Is that all the code you have or is this in the section of a larger webpage? When I copied your code into a skeleton HTML structure, the map is fullscreen. – Blake Simpson May 09 '14 at 13:40
  • @BlakeSimpson this is just the head section of the site – AppleTattooGuy May 09 '14 at 13:41
  • you can tell it's the right size because of the controls so only one map tile is showing. I've had this problem before, either caused by some error or when trying to show/hide the map canvas, just incase you have *any* errors or you are playing with the visibility of the map. – martincarlin87 May 09 '14 at 13:43
  • https://developers.google.com/maps/documentation/javascript/tutorial?hl=fr#HTML5 – MrUpsidown May 09 '14 at 13:45
  • I have also seen this issue before when the map element is initially hidden when the google map script loads and the element is then shown later. Then you must call `google.maps.event.trigger(map, "resize");` – Blake Simpson May 09 '14 at 13:46
  • Thanks for your input on this - yes the map element is initially hidden, where would I call that function? sorry a bit new to all this. – AppleTattooGuy May 09 '14 at 13:51
  • It depends how you make the map visible, can you provide this code? If it is a jQuery event, after the "show()", run the google resize event. – Blake Simpson May 09 '14 at 13:55
  • Thanks for all your input, it is now working perfectly, working code here jsfiddle.net/lotusgodkk/SD9km/1 for anyones reference – AppleTattooGuy May 09 '14 at 13:57

2 Answers2

2

Your map container is becoming 100% the width and height of nothing.

Try this....

<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map {
    width: 100%;
    height: 100%;
}
</style>
Paul
  • 139,544
  • 27
  • 275
  • 264
HDSSNET
  • 131
  • 3
1

Try adding

html { height: 100% } body { height: 100%; margin: 0px; padding: 0px }

in your stylesheet/css

jsfiddle example: http://jsfiddle.net/lotusgodkk/SD9km/1/

K K
  • 17,794
  • 4
  • 30
  • 39