Responsive Google Map

Question

How to make a responsive google map from the code    lt div class  map  gt       lt iframe gt     lt  iframe gt   lt  div gt    I use in css for full map    map max-width 100      and small device    map max-width 40      but it didn t work    Anyone have idea  Thank you

User · Answer

Add this to your initialize function     lt script type  text javascript  gt   function initialize        var map   new google maps Map document getElementById  map-canvas    mapOptions         Resize stuff      google maps event addDomListener window   resize   function         var center   map getCenter        google maps event trigger map   resize        map setCenter center               lt  script gt

User · Answer

Adding a 100  to the width and height attributes of its iframe has always worked for me  For example   lt iframe width  100   height  100   frameborder  0  scrolling  no  marginheight  0  marginwidth  0  src  http   maps google co in maps f q amp amp source s q amp amp hl en amp amp geocode   amp amp q surat amp amp ie UTF8 amp amp hq  amp amp hnear Surat  Gujarat amp amp ll 21 195 72 819444 amp amp spn 0 36299 0 676346 amp amp t m amp amp z 11 amp amp output embed  gt  lt  iframe gt  lt br   gt

User · Answer

Check this for a solution  http   jsfiddle net panchroma 5AEEV    I can t take the credit for the code though  it comes from quick and easy way to make google maps iframe embed responsive     Good luck   CSS     map canvas  width 50   height 300px  important      HTML       lt  DOCTYPE html gt   lt html gt     lt head gt       lt title gt Google Maps JavaScript API v3 Example  Map Simple lt  title gt       lt meta name  viewport  content  width device-width  initial-scale 1 0  user-scalable no   gt       lt meta charset  utf-8   gt       lt style gt        html  body   map canvas           margin  0          padding  0          height  100                lt  style gt       lt script src  https   maps googleapis com maps api js v 3 exp amp sensor false  gt  lt  script gt       lt script gt        var map        function initialize             var mapOptions               zoom  8            center  new google maps LatLng -34 397  150 644             mapTypeId  google maps MapTypeId ROADMAP                    map   new google maps Map document getElementById  map canvas                mapOptions                  google maps event addDomListener window   load   initialize        lt  script gt     lt  head gt     lt body gt       lt div id  map canvas  gt  lt  div gt     lt  body gt   lt  html gt

User · Answer

i think the simplest way will be to add this css and it will work perfectly   embed  object  iframe max-width  100

User · Answer

in the iframe tag  you can easily add width  100   instead of the preset value giving to you by the map  like this     lt iframe src  https   www google com maps embed anyLocation  width  100   height  400  frameborder  0  style  border 0   allowfullscreen    gt  lt  iframe gt

User · Answer

A solution without javascript   HTML    lt div class  google-maps  gt   lt iframe gt           Google Maps Code             lt  iframe gt   lt  div gt    CSS    google-maps       position  relative      padding-bottom  75      This is the aspect ratio     height  0      overflow  hidden     google-maps iframe       position  absolute      top  0      left  0      width  100   important      height  100   important      If you have a custom map size  remove the  height  100   important

User · Answer

My solution based on eugenemail response   1  HTML - Google Maps API  Get API Key   lt script src  https   maps googleapis com maps api js key YOUR API KEY amp callback initMap  gt  lt  script gt    2  HTML - Canvas   lt div id  map canvas  gt  lt  div gt    3  CSS - Map canvas   map canvas       height  400px      4  JavaScript  function initialize         var lat   40 759300      var lng   -73 985712      var map center   new google maps LatLng lat  lng       var mapOptions             center  map center          zoom  16          mapTypeId  google maps MapTypeId ROADMAP            var mapCanvas   document getElementById  map canvas        var map   new google maps Map mapCanvas  mapOptions       new google maps Marker           map  map          draggable  false          position  new google maps LatLng lat  lng              google maps event addDomListener window   resize   function             map setCenter map center             initialize

User · Answer

I am an amateur but I found this worked    maps iframe       position  absolute     body       padding-top  40px      padding-bottom  820px      height  available      There may be a bit of whitespace at the bottom but I am satified

User · Answer

My Responsive  Solution  Google Map in Foundation 4 Modal    JS  Create an external JavaScript file  i e  mymap js  with the following code  google maps visualRefresh   true    Optional  var respMap   function mymapini         var mapPos   new google maps LatLng -0 172175 1 5     Set the coordinates     var mapOpts         zoom  10    You can change this according your needs     disableDefaultUI  true    Disabling UI Controls  Optional      center  mapPos    Center the map according coordinates     mapTypeId  google maps MapTypeId ROADMAP             respMap   new google maps Map document getElementById  mymap          mapOpts        var mapMarker   new google maps Marker             position  mapPos            map  respMap            title   You can put any title                   This centers automatically to the marker even if you resize your window     google maps event addListener respMap   idle   function         window setTimeout function           respMap panTo mapPos getPosition            250                google maps event addDomListener window   load   mymapini        modalOpen   click function      Use it like  lt a href     id  modalOpen             myModal   show      ID from the Modal  lt div id  myModal  gt         google maps event trigger respMap   resize          HTML  Add the following code before the  tag    lt script src  https   maps googleapis com maps api js v 3 exp amp sensor false  gt  lt  script gt   lt script src  js mymap js  gt  lt  script gt    Add this to the modal code    lt div id  mymap  gt  lt  div gt    CSS  Add this to your stylesheet    mymap   margin  0  padding  0  width 100   height  400px

User · Answer

It s better to use Google Map API  I ve created an example here  http   jsfiddle net eugenebolotin 8m1s69e5 1   Key features are using of functions     Full example is here  http   jsfiddle net eugenebolotin 8m1s69e5 1   map setCenter map center      Scale map to fit specified points map fitBounds path bounds     It handles resize event and automaticaly adjusts size

User · Answer

Here a standard CSS solution   JS for the map s height resizing  CSS   map canvas      width  100       JS     On Resize   window  resize function             map canvas   height    window   height       JsFiddle demo   http   jsfiddle net 3VKQ8 33

User · Answer

Responsive with CSS You can make the Iframe responsive with the following CSS codes   map       position  relative      padding-bottom  26 25       padding-top  30px      height  0      overflow  hidden      map iframe   map object   map embed       position  absolute      top  0      left  0      width  100       height  100      Responsive with JavaScript This possible through window resize event and you can apply this on google map like google maps event addDomListener window   resize   initialize   Consider the following example  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    Take a look for more details - https   webomnizz com how-to-make-responsive-google-map-with-google-map-api

User · Answer

Tried it with CSS  but its never 100  responsive  so I built a pure javascript solution  This one uses jQuery   google maps event addDomListener window   resize   function        var center   map getCenter       resizeMap       google maps event trigger map   resize      map setCenter center           function resizeMap       var h   window innerHeight    var w   window innerWidth         map canvas   width w 2         map canvas   height h-50

[google-maps] Responsive Google Map?

Examples related to google-maps

Examples related to responsive-design