Responsive Google Map?

Question

How to make a responsive google map from the code

I use in css

Answer 1

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

}

Answer 2

My solution based on eugenemail response:

1. HTML - Google Maps API

Get API Key

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

2. HTML - Canvas

<div id="map_canvas"></div>

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

Answer 3

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

Answer 4

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/

Answer 5

in the iframe tag, you can easily add width='100%' instead of the preset value giving to you by the map

like this:

 <iframe src="https://www.google.com/maps/embed?anyLocation" width="100%" height="400" frameborder="0" style="border:0;" allowfullscreen=""></iframe>

Answer 6

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 <a href="#" id="modalOpen"...
    $("#myModal").show(); //ID from the Modal <div id="myModal">...
    google.maps.event.trigger(respMap, 'resize');
});

HTML

Add the following code before the tag:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="js/mymap.js"></script>

Add this to the modal code:

<div id="mymap"></div>

CSS

Add this to your stylesheet:

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