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.

How to Host My Website or Web Page Free on Google Drive

How to Host My Website or Web Page Free on Google Drive, now you're reading How to Host My Website or Web Page Free on Google Drive 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.

Google Drive has always been a great place to sharing your documents on web and they are 100% secure and available around the world. November 28, 2012, Eric Gilmore is announced a new Google Drive feature, “site publishing.” In this features you can upload your HTML, Javascript, CSS and Images into a public folder and share it as "Public on the web."

Many peoples are looking for a free web hosting, there are lot of companies who provides free web hosting with unlimited space. But it is hard to choose the right web hosting company with 100% security. Google Drive is the solution for you.

Step by step guide for how to use Google Drive as a web host:- 

1. Create a new folder in Google Drive and share it as "Public on the web."
2. Upload your HTML, CSS, and Javascript files to this folder.
3. Open the HTML file, and click the "Preview" button in the toolbar Section.
4. Share the URL that looks like "www.googledrive.com/host/..." from the preview and everyone on the web can access your new website using that address. 

Google drive does not support server-side scripts languages like PHP, Asp.net, Python and Java.