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&source=s_q&hl=de&geocode=+&q=jaipur+Rajasthan&ie=UTF8&hq=&hnear=Jaipur,+Rajasthan,+Indien&ll=26.912416,75.787288&spn=0.375941,0.441513&t=m&z=11&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.
