How to Create Responsive Google Map For Your Website or Blog

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">If you want to create <b>Responsive Google Map</b>, then you have two options, first with <b>CSS</b> and the second is <b>JavaScript</b>.  Today, a lot of designers and developers are struggling to Embed Google maps in responsive designs.</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi337pKsobdCrWNe-vj8PLow3M28zS-31uBZCrCCTNxmObTnCp8QJosmQeWml86Gcx-nBPW_A863GeyrSU19uuZLR_eCmUOubKjh2ZS-MV4Lr9GMCyWdDzd96yaP2ZkFXvxPYuNSyxI0DKa/s1600/Responsive+Google+Map.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi337pKsobdCrWNe-vj8PLow3M28zS-31uBZCrCCTNxmObTnCp8QJosmQeWml86Gcx-nBPW_A863GeyrSU19uuZLR_eCmUOubKjh2ZS-MV4Lr9GMCyWdDzd96yaP2ZkFXvxPYuNSyxI0DKa/s1600/Responsive+Google+Map.jpeg" width="181" /></a></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><b>First basic steps with CSS for creating a responsive Google Map.</b></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><b>Responsive Google Map CSS</b></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><span style="background-color: #eeeeee;">.googlemap-container {</span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;">    position: relative;</span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;">    padding-bottom: 26.25%;</span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;">    padding-top: 30px;</span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;">    height: 0;</span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;">    overflow: hidden;</span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;">}</span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;"></span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;">.googlemap-container iframe, </span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;">.googlemap-container object, </span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;">.googlemap-container embed {</span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;">    position: absolute;</span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;">    top: 0;</span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;">    left: 0;</span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;">    width: 100%;</span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;">    height: 100%;</span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;">}</span></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><b>Responsive Google Map HTML Markup</b></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><span style="background-color: #eeeeee;"><div class="googlemap-container "></span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;"><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></span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;"></div></span></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><b>Responsive Google Map with JavaScript</b></div><div style="text-align: justify;">Use the following Javascript code before end the head tag into your website html file.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><span style="background-color: #eeeeee;"><script type="text/javascript"></span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;">function initialize() {</span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;">   var mapOptions = {</span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;">           zoom: 9,</span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;">           center: new google.maps.LatLng(28.9285745, 77.09149350000007), </span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;">           mapTypeId: google.maps.MapTypeId.TERRAIN</span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;">       };</span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;"></span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;">   var map = new google.maps.Map(document.getElementById('responsive-google-map'),</span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;">                                   mapOptions);</span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;">                             </span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;">   var marker = new google.maps.Marker({</span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;">                   map: map,</span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;">                   draggable: false,</span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;">                   position: new google.maps.LatLng(28.9285745, 77.09149350000007)</span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;">       });</span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;">}</span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;"></span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;">google.maps.event.addDomListener(window, 'resize', initialize);</span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;">google.maps.event.addDomListener(window, 'load', initialize);</span></div><div style="text-align: justify;"><span style="background-color: #eeeeee;"></script></span></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><b>HTML markup</b></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><span style="background-color: #eeeeee;"><div id='responsive-google-map' style='width:100%;height:300px;'></div></span></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">It is working fine on your phone or tablet.</div></div>

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 des...

Read more »