-1

I am trying to implement google maps in an application where I specify height and width wrt to percentage. In chrome and firefox it's working but when I try the same in IE the map area is grey. Can some one suggest how can I fix it.

<!DOCTYPE html>
<html>
<body>

<h1>My First Google Map</h1>

<div id="googleMap" style="width:100%;height:500%"></div>

<script>
function myMap() {
var mapProp= {
    center:new google.maps.LatLng(51.508742,-0.120850),
    zoom:5,
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=api_key&callback=myMap"></script>


</body>
</html>
Nandan A
  • 152
  • 1
  • 1
  • 10

2 Answers2

1

Try setting the height to a fixed number of pixels, for example 500px, if that works we know the problem is there so then just set the html and body height to 100% and go back to your 500% height on your map div.

This happens in IE because when you want to use percentages for height, all the preceding elements in your hierarchy must have a set height as well.

Carlos Valencia
  • 6,499
  • 2
  • 29
  • 44
0

remove the comma after zoom. you can also write your properties like that:

var mapProp= {
    center: { lat: 51.508742, lng: ,-0.120850}
    zoom:5
};

Maybe this helps. Otherwise, just set height to 500% and look if that works. I use gmaps in IE and it works perfectly

cheers

Christian
  • 152
  • 1
  • 13