How to make Responsive Google Map with Google Map API

by in on

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.

responsive-google-map

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.

 

Now just put the following HTML markup.

 

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.

 

And now just put the following HTML

 

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.

  • James Dean

    Awesome stuff! thanks

  • Binh NGuyen

    Hi Yogesh Sharma

    I would like change the map iframe below is version v2 to v3

    Can you help me?

    • http://webomnizz.com/ Jogesh Sharma

      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.

  • Steve

    Finally found one that works. Thanks!

  • jimxc

    This is awesome. Nice job.

  • Pingback: Responsive Google Map WordPress Plugin()

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

  • Diego De Luca

    cool!!
    tnx

  • Houssam

    Thanks for this information 😀

  • wjmazza

    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}”).

  • sg1456

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

  • amrit

    where do i put this division

    • http://webomnizz.com/ Jogesh Sharma

      Wherever you want o to show your Google MAP, just put this


      in your HTML

  • Jeff

    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.