How to Create Responsive Google Map For Your Website or Blog

How to Create Responsive Google Map For Your Website or Blog, now you're reading How to Create Responsive Google Map For Your Website or Blog and Thanks for visiting my Driver download blog, for download this manual please click the button and choose what you want, blog about Windows Driver, Laptop drivers, Notebook driver, USB Driver, Phone driver and much more.

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.