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.

If you are using WordPress, then feel free to use the Responsive Google Map plugin for WordPress.

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 use iframe in the world of HTML5, I am using Google Map API V3 to get rid of an iframe and with the help of the ‘resize’ event, we can make our map responsive very easily. Take a look at the below code, I have implemented this on the Demo section as well.

Responsive Google Map with JavaScript

Let’s first create a function that generates the Google Map.

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
     );
}

As you can see that first we defined a variable with three options to make our map attractive. These options are the zoom, center, mapTypeId where zoom is used to set the map zoom level, center accepts the map object with latitude and longitude and mapTypeId accepts the one value from roadmap, satellite, hybrid and terrain. You can check about the Map Types in details from the Google Map documentation.

Next, we have used the new google.maps.Map() that return a new object. We added the HTML DOM reference as first argument and the mapOptions object as the second argument.

Add Marker to Google Map

Let’s add the marker to the Google Map. We are going to use the new google.maps.Marker().

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)
    });
}

Rendering Google Map

Now the final step is to render the google map. We are going to use google.maps.event.addDomListener to create an event. We need to define two events. First event is “load” to render our map and the second one is “resize” that re-render our map on the screen resize to maintain the responsiveness.

google.maps.event.addDomListener(window, 'resize', initialize);
google.maps.event.addDomListener(window, 'load', initialize)

The complete codes should be look like the below codes.

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>

We hope this article to make response google map. If you like this article then please follow us on Facebook and Twitter.