Google Map responsive

Question

I am using google map with API.

I am running it on a responsive website. The issue i am having is when i apply width: 100% to it, it goes blank. I tried by warping it in outer div but still no luck.

I've read other Stack questions but did't find any working solution for this.

HTML

<div id="mapCanvas" class="mapCanvas"></div>

CSS

       .mapCanvas{
        width: 800px; /* When i set it to 100%, Map goes BLANK */
        height: 200px;
        }


        .mapContainer
        {
        display:inline-block;
        }
        .mapContainer div, .mapContainer ul
        {
        float:left;
        }
        .infoWindow h1 {
        font-size: 1.6em;
        text-align: center;
        padding-bottom: 1px;
        }
        .infoWindow {
        overflow: hidden;
        }

JS

markers = [];
function initialize() {
var mapOptions = {
  center: new google.maps.LatLng(51.061150138439515, -114.05261809049074),
  zoom: 14,
  mapTypeId: google.maps.MapTypeId.ROADTYPE,
  panControl: false,
  zoomControl: false,
  mapTypeControl: false,
  scaleControl: false,
  streetViewControl: false
};
map = new google.maps.Map(document.getElementById("mapCanvas"),mapOptions);

var marker0 = new google.maps.Marker({
    position: new google.maps.LatLng (51.063838646941576,-114.05572414398193),
    map: map,
    icon: "http://www.earthpoint.us/Dots/GoogleEarth/paddle/ylw-blank.png"
});
markers.push(marker0);
var infowindow0 = new google.maps.InfoWindow({
    content: "<div class='infoWindow'><h1> We are here </h1></div>",maxWidth: 350
});
google.maps.event.addListener(marker0, "click", function()
{
    infowindow0.open(map,marker0);
});

  }
  google.maps.event.addDomListener(window, "load", initialize);

Can anyone help?

Which responsive framework are you using? Bootstrap, skeleton, etc? — IndieRok, Aug 12 '14 at 15:39
possible duplicate of [Google Maps API v3 | shows no map data](http://stackoverflow.com/questions/18273430/google-maps-api-v3-shows-no-map-data/18274234#18274234) — geocodezip, Aug 12 '14 at 15:49

Jay · Accepted Answer · 2014-08-12T16:33:46.023

1

Set a width to the container for this div, and add the following styles too;

.mapCanvas{
        max-width: 800px; 
        height: 200px;
        width: 100%;
        }

This css will ensure the mapCanvas div does not exceed 800px; but also will ensure it stays at 100% width of the containing div, therefore as the window (device) decreases in width so will the map.

edited Aug 12 '14 at 16:33

answered Aug 12 '14 at 15:41

Jay

772
1
6
17

Can you send a link? try setting a width the container of that div. – Jay Aug 12 '14 at 15:47
A little explanation/context would be helpful for posterity. – Wesley Bland Aug 12 '14 at 16:01
I have added some information about what i have done :) – Jay Aug 12 '14 at 16:34

score 0 · Answer 2 · answered Aug 12 '14 at 15:47

0

You need to specify the size (height and width) of any parent elements up to html & body.

working fiddle

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

answered Aug 12 '14 at 15:47

geocodezip

158,664
13
220
245

Sorry For bothering you! It was an issue due to outer div becuase it was set to height only, not to width. that's why map was going blank. I am not sure which answer to accept, So, If you vote up my question then i will accept yours :) – YOU Aug 12 '14 at 15:55
It is a duplicate then. – geocodezip Aug 12 '14 at 16:13

Google Map responsive

2 Answers2