Responsive Google Map?

Question

How to make a responsive google map from the code

I use in css

Answer 1

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 ...
    google.maps.event.trigger(respMap, 'resize');
});

HTML

Add the following code before the tag:

Add this to the modal code:

CSS

Add this to your stylesheet:

#mymap { margin: 0; padding: 0; width:100%; height: 400px;}