How to Create Responsive Google Map For Your Website or Blog

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.