Responsive Google Maps V3 - Cannot Get 100% Height

Responsive Google Maps v3 - Cannot get 100% height

You need to give sizes to all the elements up to the <html> element:

html, body, #dvMap {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

Mike Williams' Google Maps Javascript API v2 page on this subject: Using a percentage height for the map div

proof of concept fiddle

code snippet:

var markers = [{

  "title": 'xxxxx School',

  "lat": '53.004758',

  "lng": '-2.241232',

  "description": '<br/><a href="http://www.google.com">View more info</a>',

  "type": 'UK Independent School'

}, {

  "title": 'xxxxx Prep',

  "lat": '51.470123',

  "lng": '-0.209838',

  "description": '<br/><a href="http://www.google.com">View more info</a>',

  "type": 'UK Independent School'

}, {

  "title": 'xxxxxx',

  "lat": '46.709741',

  "lng": '9.159625',

  "description": '<br/><a href="http://www.google.com">View more info</a>',

  "type": 'Swiss Boarding School'

}, {

  "title": 'xxxxxxx independent College',

  "lat": '51.512103',

  "lng": '-0.308055',

  "description": '83 New Broadway, <br/>London W5 5AL, <br/>United Kingdom <br/><a href="http://www.google.com">View more info</a>',

  "type": 'UK Independent School'

}, {

  "title": 'xxxxxxx Hill',

  "lat": '51.007720',

  "lng": '0.217913',

  "description": 'Five Ashes, <br/>Mayfield, <br/>East Sussex <br/>TN20 6HR, <br/>United Kingdom <br/><a href="http://www.google.com">View more info</a>',

  "type": 'UK Independent School'

}];

var map;

function initMap() {

  var mapOptions = {

    center: new google.maps.LatLng(51.507351, -0.127758),

    zoom: 8,

    mapTypeId: google.maps.MapTypeId.ROADMAP,

    styles: [{

      "featureType": "landscape",

      "stylers": [{

        "saturation": -100

      }, {

        "lightness": 65

      }, {

        "visibility": "on"

      }]

    }, {

      "featureType": "poi",

      "stylers": [{

        "saturation": -100

      }, {

        "lightness": 51

      }, {

        "visibility": "simplified"

      }]

    }, {

      "featureType": "road.highway",

      "stylers": [{

        "saturation": -100

      }, {

        "visibility": "simplified"

      }]

    }, {

      "featureType": "road.arterial",

      "stylers": [{

        "saturation": -100

      }, {

        "lightness": 30

      }, {

        "visibility": "on"

      }]

    }, {

      "featureType": "road.local",

      "stylers": [{

        "saturation": -100

      }, {

        "lightness": 40

      }, {

        "visibility": "on"

      }]

    }, {

      "featureType": "transit",

      "stylers": [{

        "saturation": -100

      }, {

        "visibility": "simplified"

      }]

    }, {

      "featureType": "administrative.province",

      "stylers": [{

        "visibility": "off"

      }]

    }, {

      "featureType": "water",

      "elementType": "labels",

      "stylers": [{

        "visibility": "on"

      }, {

        "lightness": -25

      }, {

        "saturation": -100

      }]

    }, {

      "featureType": "water",

      "elementType": "geometry",

      "stylers": [{

        "hue": "#ffff00"

      }, {

        "lightness": -25

      }, {

        "saturation": -97

      }]

    }]

  };

  var infoWindow = new google.maps.InfoWindow();

  var latlngbounds = new google.maps.LatLngBounds();

  var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

  var i = 0;

  var interval = setInterval(function() {

    var data = markers[i]

    var myLatlng = new google.maps.LatLng(data.lat, data.lng);

    var icon = "";

    switch (data.type) {

      case "UK Independent School":

        icon = "orange";

        break;

      case "Swiss Boarding School":

        icon = "green";

        break;

    }

    icon = "http://maps.google.com/mapfiles/ms/micons/" + icon + ".png";

    var marker = new google.maps.Marker({

      position: myLatlng,

      map: map,

      title: data.title,

      animation: google.maps.Animation.DROP,

      icon: icon

    });

    (function(marker, data) {

      google.maps.event.addListener(marker, "click", function(e) {

        infoWindow.setContent("<div style = 'width:200px;min-height:40px'><strong>" + data.title + "</strong><br/>" + data.description + "</div>");

        infoWindow.open(map, marker);

      });

    })(marker, data);

    latlngbounds.extend(marker.position);

    i++;

    if (i == markers.length) {

      clearInterval(interval);

      var bounds = new google.maps.LatLngBounds();

      map.setCenter(latlngbounds.getCenter());

      map.fitBounds(latlngbounds);

    }

  }, 80);

}

google.maps.event.addDomListener(window, 'load', initMap);

html,

body,

#dvMap {

  height: 100%;

  width: 100%;

  margin: 0px;

  padding: 0px

}

<script src="https://maps.googleapis.com/maps/api/js"></script>

<div style="width:100%; height:100%;">

  <div id="dvMap"></div>

</div>

Google Maps 100% height not working

Quickest solution is the one you referenced. The problem may be you not also targeting the map. Here is the simplest solution (sorry for messy map in the fiddle - side project I'm working on):

jsFiddle

html, body, #map {
    height: 100%;
    margin: 0px;
}

make the width of my google-maps responsive

You need to make the width of #map_canvas in the css equal 100%. That way it'll stretch in relation to the width of the parent container. It'll still obey the min-width and max-width properties if those limits are reached when you resize your browser.

height=100% not rendering the google maps api

The reason why 100% doesn't work is because the map needs to send you images at a specific ratio (fixed width & height). Now I might be guessing here, but that's what I think happens.

Since I had a similar problem, where my map was hidden inside a tab, I wrote this function to calculate the width & height or a ratio. Then whatever size of the container, the map was in, it would adjust. It uses jQuery so I just thought I'd post it to get the idea.

    /**
     * Calculate the dimensions
     */
    calculateMap: function () {
        var self = this,
            parent = this.map.parent(), // jQuery obj
            w, h, id, el;

        // if the container of your map is visible and wrapped it has a certain width and height...
        // if it also has 100% height, it could be collapsed (not wrapped)
        // so you ask the google maps api to load images at 500px width and 0height?
        // if the parent has 0height, the ratio helps to set it properly
        // with debug tools (F12) you can see the parent if it lights up
        if (parent.is(':visible')) {
            w = parent.outerWidth(false);
            h = w * this.settings.options.mapRatio; // 4/3 | 16/9
            this.map.css({ width: w, height: h });
        } else {
            // if your map is invisible after load...
            id = this.onParent.prop('id'); // this id references my tab
            el = this.onParent.prevAll().find('a[href=#' + id + ']'); // trigger of the tab
            // add click event once
            el.one(this.settings.events.onParent, function() {
                setTimeout(function() {
                    self.activate(); // goes back to calculateMap()
                }, 200);
            }.bind(this));
        }
    },

If you trigger calculateMap on the resize event, you'll have a responsive approach.

Also a quick google showed me this approach ... notice the fixed width and height on the iframe.

In short:

fixed width and height in css gives you the cleanest solution. you might be able to use a clearfix, padding in % or min-height in px to gain dimension if that works out.
For dynamic/event loading I suggest JavaScript or jQuery
or with an iframe and a fixed width and height

Set Google Maps Container DIV width and height 100%

You have to set all parent containers to a 100% width if you want to cover the whole page with it. You have to set an absolute value at width and height for the #content div at the very least.

body, html {
  height: 100%;
  width: 100%;
}

div#content {
  width: 100%; height: 100%;
}

how to set google maps to 100% height in ngMap

Don't worry. A problem = a solution.

css :

.map{width:100%;} .panel-body {width:100%;}

html :

  <div ng-controller="EventSimpleCtrl" class="ng-scope">
<div class="container"></div>
<div class="row">
  <div class="col-md-12">
    <!--<div class="panel panel-primary map">-->
    <!--  <div class="panel-heading">Test</div>-->
    <!--  <div class="panel-body">-->
    <!--    <map zoom="4" center="-25.363882, 131.044922" on-center-changed="centerChanged()">-->
    <!--      <marker position="-25.363882, 131.044922" on-click="click()" title="Click to zoom"></marker>-->
    <!--    </map>-->
    <!--  </div>-->
    <!--</div>-->
    <map zoom="4" center="-25.363882, 131.044922" on-center-changed="centerChanged()">
      <marker position="-25.363882, 131.044922" on-click="click()" title="Click to zoom"></marker>
    </map>
          </div>
  </div>
  </div>

I hope I answered your question. I test it on your Plunker link and it's OK.

How to make Google Maps Responsive?

So, I found a solution to my question. Here is my revised CSS:

#map {
width: 100%;
height: 300px;
}

I found that you have to have a height of a certain amount of pixels, using 100% or another percentage would make the map disappear, however the width 100% makes the map respond to resizing the browser. The HTML has been left the same.

Set width and height to responsive Google Map?

media query works perfectly.

look here

try to re-size window with the map inside.

Responsive Google Maps V3 - Cannot Get 100% Height