Make google map responsive with no iframe - css

Question

For example , If you use embedded google map.
You can make your google map responsive with the code below
using iframe (simple iframe)
<div class="ggmap">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d212270.5451230493!2d-84.42060395!3d33.7677129!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88f5045d6993098d%3A0x66fede2f990b630b!2sAtlanta%2C+GA!5e0!3m2!1sen!2sus!4v1396981185525" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>
.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.ggmap iframe,
.ggmapr object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
However I use google map by javascript like this below.
no iframe (simple no-iframe)
<div id="map_canvas" style="width:600px; height:450px"></div>
function writeMap(latitude,longitude) {
var latlng = new google.maps.LatLng(latitude,longitude);
var opts = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), opts);
}
$(document).ready( function(){
writeMap(latitude,longitude);
});
In this case, google map could not be responsive.
How can I make this google map responsive??

Answer 1

Make the height and width percentages of the container (and make sure the container has a size).
var latitude = 42.0;
var longitude = -72.0;
function writeMap(latitude,longitude) {
var latlng = new google.maps.LatLng(latitude,longitude);
var opts = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), opts);
}
$(document).ready( function(){
writeMap(latitude,longitude);
});
body, html, #map_canvas {
height: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" ></div>