Responzive google map on all devices

Question

I need a google map to have responsiveness for both computer and smartphone. I need to show only Slovak Republic to the edge of any device's width. Currently, I am using lng and lat to determine the center of the country.

My complete javascript:

//<![CDATA[

    var customIcons = {
      1: {
        icon: '/img/map-marker-icon.png'
      },
      0: {
        icon: '/img/map-marker-icon.png'
      }
    };

    function load() {

      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(48.730556, 19.457222),
        zoom: 8,
        scrollwheel: false,
        mapTypeId: 'roadmap'
      });
      var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP file
      downloadUrl("phpsqlajax_genxml2.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          // MAX MEETINGS = 10      
          var num1 = markers[i].getAttribute("num1");   
          var nazov1 = markers[i].getAttribute("nazov1");
          var popis1 = markers[i].getAttribute("popis1");
          var foto1 = markers[i].getAttribute("photo1");
          var datum1 = markers[i].getAttribute("datum1");

          var num2 = markers[i].getAttribute("num2");   
          var nazov2 = markers[i].getAttribute("nazov2");
          var popis2 = markers[i].getAttribute("popis2");
          var foto2 = markers[i].getAttribute("photo2");
          var datum2 = markers[i].getAttribute("datum2");

          var num3 = markers[i].getAttribute("num3");   
          var nazov3 = markers[i].getAttribute("nazov3");
          var popis3 = markers[i].getAttribute("popis3");
          var foto3 = markers[i].getAttribute("photo3");
          var datum3 = markers[i].getAttribute("datum3");

          var num4 = markers[i].getAttribute("num4");   
          var nazov4 = markers[i].getAttribute("nazov4");
          var popis4 = markers[i].getAttribute("popis4");
          var foto4 = markers[i].getAttribute("photo4");
          var datum4 = markers[i].getAttribute("datum4");

          var num5 = markers[i].getAttribute("num5");   
          var nazov5 = markers[i].getAttribute("nazov5");
          var popis5 = markers[i].getAttribute("popis5");
          var foto5 = markers[i].getAttribute("photo5");
          var datum5 = markers[i].getAttribute("datum5");

          var num6 = markers[i].getAttribute("num6");   
          var nazov6 = markers[i].getAttribute("nazov6");
          var popis6 = markers[i].getAttribute("popis6");
          var foto6 = markers[i].getAttribute("photo6");
          var datum6 = markers[i].getAttribute("datum6");

          var num7 = markers[i].getAttribute("num7");   
          var nazov7 = markers[i].getAttribute("nazov7");
          var popis7 = markers[i].getAttribute("popis7");
          var foto7 = markers[i].getAttribute("photo7");
          var datum7 = markers[i].getAttribute("datum7");

          var num8 = markers[i].getAttribute("num8");   
          var nazov8 = markers[i].getAttribute("nazov8");
          var popis8 = markers[i].getAttribute("popis8");
          var foto8 = markers[i].getAttribute("photo8");
          var datum8 = markers[i].getAttribute("datum8");

          var setp = 0;
          var idloc = markers[i].getAttribute("idloc");
          var mesto = markers[i].getAttribute("mesto");
          var lat = markers[i].getAttribute("lat");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));

          // IF SET PHOTO
          if (foto1 == "") {  var photo1 = "<img src='/img/nophoto.jpg' border='0' alt='" + popis1 + "' />"; var link1 = "<a href='/img/nophotobig.jpg' data-lightbox='" + num1 + "' title='" + nazov1 + "<br />Datum: " + datum1 + "<br />Popis: " + popis1 + "' class='morephotos'>Zobraziť popis</a>";  } else { var link1 = "<a href='" + foto1 + "' data-lightbox='" + num1 + "' title='" + nazov1 + "<br />Datum: " + datum1 + "<br />Popis: " + popis1 + "' class='morephotos'>Zobraziť popis+fotky</a>"; var photo1 = "<div class='cover' style='background-image:url(" + foto1 + ");'> </div>"; }
          if (foto2 == "") {  var photo2 = "<img src='/img/nophoto.jpg' border='0' alt='" + popis2 + "' />"; var link2 = "<a href='/img/nophotobig.jpg' data-lightbox='" + num2 + "' title='" + nazov2 + "<br />Datum: " + datum2 + "<br />Popis: " + popis2 + "' class='morephotos'>Zobraziť popis</a>"; } else { var link2 = "<a href='" + foto2 + "' data-lightbox='" + num2 + "' title='" + nazov2 + "<br />Datum: " + datum2 + "<br />Popis: " + popis2 + "' class='morephotos'>Zobraziť popis+fotky</a>"; var photo2 = "<div class='cover' style='background-image:url(" + foto2 + ");'> </div>"; }
          if (foto3 == "") {  var photo3 = "<img src='/img/nophoto.jpg' border='0' alt='" + popis3 + "' />"; var link3 = "<a href='/img/nophotobig.jpg' data-lightbox='" + num3 + "' title='" + nazov3 + "<br />Datum: " + datum3 + "<br />Popis: " + popis3 + "' class='morephotos'>Zobraziť popis</a>";  } else { var link3 = "<a href='" + foto3 + "' data-lightbox='" + num3 + "' title='" + nazov3 + "<br />Datum: " + datum3 + "<br />Popis: " + popis3 + "' class='morephotos'>Zobraziť popis+fotky</a>"; var photo3 = "<div class='cover' style='background-image:url(" + foto3 + ");'> </div>"; }
          if (foto4 == "") {  var photo4 = "<img src='/img/nophoto.jpg' border='0' alt='" + popis4 + "' />"; var link4 = "<a href='/img/nophotobig.jpg' data-lightbox='" + num4 + "' title='" + nazov4 + "<br />Datum: " + datum4 + "<br />Popis: " + popis4 + "' class='morephotos'>Zobraziť popis</a>";  } else { var link4 = "<a href='" + foto4 + "' data-lightbox='" + num4 + "' title='" + nazov4 + "<br />Datum: " + datum4 + "<br />Popis: " + popis4 + "' class='morephotos'>Zobraziť popis+fotky</a>"; var photo4 = "<div class='cover' style='background-image:url(" + foto4 + ");'> </div>"; }
          if (foto5 == "") {  var photo5 = "<img src='/img/nophoto.jpg' border='0' alt='" + popis5 + "' />"; var link5 = "<a href='/img/nophotobig.jpg' data-lightbox='" + num5 + "' title='" + nazov5 + "<br />Datum: " + datum5 + "<br />Popis: " + popis5 + "' class='morephotos'>Zobraziť popis</a>"; } else { var link5 = "<a href='" + foto5 + "' data-lightbox='" + num5 + "' title='" + nazov5 + "<br />Datum: " + datum5 + "<br />Popis: " + popis5 + "' class='morephotos'>Zobraziť popis+fotky</a>"; var photo5 = "<div class='cover' style='background-image:url(" + foto5 + ");'> </div>"; }
          if (foto6 == "") {  var link6 = "<a href='/img/nophotobig.jpg' data-lightbox='" + num6 + "' title='" + nazov6 + "<br />Datum: " + datum6 + "<br />Popis: " + popis6 + "' class='morephotos'>Zobraziť popis</a>"; var photo6 = "<img src='/img/nophoto.jpg' border='0' alt='" + popis6 + "' />";  } else { var link6 = "<a href='" + foto6 + "' data-lightbox='" + num6 + "' title='" + nazov6 + "<br />Datum: " + datum6 + "<br />Popis: " + popis6 + "' class='morephotos'>Zobraziť popis+fotky</a>"; var photo6 = "<div class='cover' style='background-image:url(" + foto6 + ");'> </div>"; }
          if (foto7 == "") {  var link7 = "<a href='/img/nophotobig.jpg' data-lightbox='" + num7 + "' title='" + nazov7 + "<br />Datum: " + datum7 + "<br />Popis: " + popis7 + "' class='morephotos'>Zobraziť popis</a>"; var photo7 = "<img src='/img/nophoto.jpg' border='0' alt='" + popis7 + "' />";  } else { var link7 = "<a href='" + foto7 + "' data-lightbox='" + num7 + "' title='" + nazov7 + "<br />Datum: " + datum7 + "<br />Popis: " + popis7 + "' class='morephotos'>Zobraziť popis+fotky</a>"; var photo7 = "<div class='cover' style='background-image:url(" + foto7 + ");'> </div>"; }
          if (foto8 == "") {  var link8 = "<a href='/img/nophotobig.jpg' data-lightbox='" + num8 + "' title='" + nazov8 + "<br />Datum: " + datum8 + "<br />Popis: " + popis8 + "' class='morephotos'>Zobraziť popis</a>"; var photo8 = "<img src='/img/nophoto.jpg' border='0' alt='" + popis8 + "' />";  } else { var link8 = "<a href='" + foto8 + "' data-lightbox='" + num8 + "' title='" + nazov8 + "<br />Datum: " + datum8 + "<br />Popis: " + popis8 + "' class='morephotos'>Zobraziť popis+fotky</a>"; var photo8 = "<div class='cover' style='background-image:url(" + foto8 + ");'> </div>"; }

          if (datum1 !== null) { var section1 = "<section><br />" + photo1  + " <p>Dňa: <strong>" + datum1 + "</strong><br />" + link1 + "</p><div class='clear'></div></section>"; } else { var section1 = ""; }
          if (datum2 !== null) { var section2 = "<section><br />" + photo2  + " <p>Dňa: <strong>" + datum2 + "</strong><br />" + link2 + "</p><div class='clear'></div></section>"; } else { var section2 = ""; }
          if (datum3 !== null) { var section3 = "<section><br />" + photo3  + " <p>Dňa: <strong>" + datum3 + "</strong><br />" + link3 + "</p><div class='clear'></div></section>"; } else { var section3 = ""; }
          if (datum4 !== null) { var section4 = "<section><br />" + photo4  + " <p>Dňa: <strong>" + datum4 + "</strong><br />" + link4 + "</p><div class='clear'></div></section>"; } else { var section4 = ""; }
          if (datum5 !== null) { var section5 = "<section><br />" + photo5  + " <p>Dňa: <strong>" + datum5 + "</strong><br />" + link5 + "</p><div class='clear'></div></section>"; } else { var section5 = ""; }
          if (datum6 !== null) { var section6 = "<section><br />" + photo6  + " <p>Dňa: <strong>" + datum6 + "</strong><br />" + link6 + "</p><div class='clear'></div></section>"; } else { var section6 = ""; }
          if (datum7 !== null) { var section7 = "<section><br />" + photo7  + " <p>Dňa: <strong>" + datum7 + "</strong><br />" + link7 + "</p><div class='clear'></div></section>"; } else { var section7 = ""; }
          if (datum8 !== null) { var section8 = "<section><br />" + photo8  + " <p>Dňa: <strong>" + datum8 + "</strong><br />" + link8 + "</p><div class='clear'></div></section>"; } else { var section8 = ""; }

          var html = "<div class='locationwindow'>" + section1 + " " + section2 + " " + section3 + " " + section4 + " " + section5 + " " + section6 + " " + section7 + " " + section8 + "<div class='clear'></div><hr />Miesto stretnutia: <strong> " + mesto + " </strong></div>";
          var icon = customIcons[setp] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon
          });
          bindInfoWindow(marker, map, infoWindow, html);
        }
      });
    }
google.maps.event.addDomListener(window, 'resize', initialize);
google.maps.event.addDomListener(window, 'load', initialize)
    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}

My CSS

#map {
  margin: 0;
  padding: 0;
  height: 800px;
  z-index:4;
  width: 100%;
}