Home / JavaScript / How to make Responsive Google Map with Google Map API

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.

15 thoughts on “How to make Responsive Google Map with Google Map API”

    1. Binh NGuyen If you want to change your IFrame code into GoogleMAP API then please follow the steps:
      1. Change zoom: 9 to zoom: 6 in line number 4

      2. Change center: new google.maps.LatLng(28.9285745, 77.09149350000007) to
      center: new google.maps.LatLng(-36.633162,144.799805) in line number 5

      3. Change position: new google.maps.LatLng(28.9285745, 77.09149350000007) to position: new google.maps.LatLng(-36.633162,144.799805) in line number 15

      And remain all the code as it is, except these changes. That’s it, Hope this help you.

  1. Pingback: Responsive Google Map WordPress Plugin

  2. Nectarios Kounenakis

    Very nice code. I will point out (for the benefit of those amonst us who are perfectionists) that you’ve not addressed the variables for MapControls. Default is true, but you can always customize position/design within a element in the or call up a separate stylesheet. Thanks, I found this particularly useful in a new web application. Take care.

  3. Instead of recalling the entire initialize function on every resize, you can simply use the panTo function. Using the panTo function will just cause the map to load or unload only the specific tiles it needs for the maps new size. I would rewrite this as

    function initialize() {
    … stripped for brevity …
    google.maps.event.addDomListener(window, ‘resize’, function(){
    map.panTo(mapOptions.center);
    });
    }
    google.maps.event.addDomListener(window, ‘load’, initialize);

    With the originally suggested method, you are redrawing the map every time the browser is re-sized. This means you make a new request to Google Maps API for each tile (even the ones that are already loaded) and you cause a redraw for the map marker, which becomes apparent if you have the drop animation (“{animation: google.maps.Animation.DROP}”).

  4. I have been going crazy for days trying to get responsive to work — this solved it! Thanks and great work!

  5. I used this and it works great but I’m having trouble getting my clients place-card to appear in the upper corner. Looked through the maps v3 api documentation and haven’t seen how to get it to show up without using an iframe.

    Let me know what you think.

  6. Pingback: Responsive Google Map WordPress Plugin

Leave a Comment

Your email address will not be published. Required fields are marked *