How to make Responsive Google Map with Google Map API

If you want to make Responsive Google Map then you have two ways, one with CSS and the second? Yes JavaScript. After doing a little struggle and research, i decided to distribute this research to Web Designers and Developer to make the things easy. So let’s move on the first basic steps with CSS.

http://webomnizz.com/demo/make-responsive-google-map

Responsive Google Map with CSS

Don’t forget to implement the Responsive CSS before your html code.

.map-container {
position: relative;
padding-bottom: 26.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.map-container iframe,
.map-container object,
.map-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Now just put the following HTML markup.

<div class="map-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=Bern&amp;aq=&amp;sll=28.9285745,77.09149350000007&amp;sspn=3.379772,8.453979&amp;ie=UTF8&amp;hq=&amp;hnear=Bern&amp;t=m&amp;z=12&amp;ll=28.9285745,77.09149350000007&amp;output=embed&amp;iwloc=near"></iframe>
</div>

Being true, i don’t like to using iframe in the world of HTML5, I am using Google Map API V3 to get rid from iframe and with the help of ‘resize’ event we can make our map responsive very easily. Take a look on the below code, I have implement this on the Demo section as well.

Responsive Google Map with JavaScript

Use the following JavaScript code before closing the head tag into your HTML file.

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('location-canvas'),
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)

And now just put the following HTML

<div id='location-canvas' style='width:100%;height:300px;'></div>

Now what? That’s it. In the JavaScript section we are using to events to initialized our map function that are google.maps.event.addDomListener(window, 'resize', initialize); and google.maps.event.addDomListener(window, 'load', initialize);.

google.maps.event.addDomListener(window, 'resize', initialize); is the main event that initialize our map function on the browser window resize the keeps the map responsive according to device. Hope you guys enjoying this.

The post How to make Responsive Google Map with Google Map API appeared first on WebOmnizz.