How to Create Responsive Google Map For Your Website or Blog

Last Updated: February 16, 2014 /
If you want to create Responsive Google Map, then you have two options, first with CSS and the second is JavaScript.  Today, a lot of designers and developers are struggling to Embed Google maps in responsive designs.

First basic steps with CSS for creating a responsive Google Map.

Responsive Google Map CSS

.googlemap-container {
    position: relative;
    padding-bottom: 26.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.googlemap-container iframe,
.googlemap-container object,
.googlemap-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Responsive Google Map HTML Markup

<div class="googlemap-container ">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.ch/maps?f=q&amp;source=s_q&amp;hl=de&amp;geocode=+&amp;q=jaipur+Rajasthan&amp;ie=UTF8&amp;hq=&amp;hnear=Jaipur,+Rajasthan,+Indien&amp;ll=26.912416,75.787288&amp;spn=0.375941,0.441513&amp;t=m&amp;z=11&amp;output=embed"></iframe>
</div>

Responsive Google Map with JavaScript
Use the following Javascript code before end the head tag into your website html file.

<script type="text/javascript">
function initialize() {
   var mapOptions = {
           zoom: 9,
           center: new google.maps.LatLng(28.9285745, 77.09149350000007),
           mapTypeId: google.maps.MapTypeId.TERRAIN
       };
   var map = new google.maps.Map(document.getElementById('responsive-google-map'),
                                   mapOptions);
                            
   var marker = new google.maps.Marker({
                   map: map,
                   draggable: false,
                   position: new google.maps.LatLng(28.9285745, 77.09149350000007)
       });
}
google.maps.event.addDomListener(window, 'resize', initialize);
google.maps.event.addDomListener(window, 'load', initialize);
</script>

HTML markup

<div id='responsive-google-map' style='width:100%;height:300px;'></div>

It is working fine on your phone or tablet.