Responzive google map on all devices - dictionary

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%;
}