diff --git a/index.html b/index.html
index ac95797..38485e6 100644
--- a/index.html
+++ b/index.html
@@ -148,7 +148,7 @@
   </div>
 
   <div class="container">
-    <object type="image/svg+xml" data="maps/M-MGN1-4.svg" id="plan"></object>
+    <object type="image/svg+xml" data="maps/M-MGN1-4.svg" id="map"></object>
 
     <div class="card">
       <h4 class="card-header">Salle actuelle</h4>
diff --git a/resources/script.js b/resources/script.js
index da49aa2..567578d 100644
--- a/resources/script.js
+++ b/resources/script.js
@@ -39,9 +39,9 @@ function httpGetAsync(theUrl, callback)
 }
 
 function selectRoom(roomId) {
-  var svg = document.getElementById('plan');
-  
-  var selectedRooms = plan.contentDocument.getElementsByClassName('current-room');
+  var svg = document.getElementById('map');
+
+  var selectedRooms = map.contentDocument.getElementsByClassName('current-room');
   for (var i = 0; i < selectedRooms.length; i++) {
     selectedRooms[i].classList.remove('current-room');
   }
@@ -52,7 +52,7 @@ function selectRoom(roomId) {
     console.log('Error: the room salle-'+roomId+' does not exist');
     return;
   }
-  
+
   room.classList.add('current-room');
 
   httpGetAsync("api/request.php?salle="+room.id.substring("salle-".length), function (s,errcode){
@@ -102,11 +102,16 @@ function updateCurrentRoom()
 
 function initSvgSupport()
 {
-  var plan = document.getElementById('plan');
+  var map = document.getElementById('map');
 
-  svgPanZoom(plan, {zoomEnabled: true, controlIconsEnabled: true});
+  window.panZoom = svgPanZoom(map, {
+    zoomEnabled: true,
+    controlIconsEnabled: true
+  });
+  panZoom.fit();
+  panZoom.center();
 
-  var salles = plan.contentDocument.querySelectorAll('#salles-group path');
+  var salles = map.contentDocument.querySelectorAll('#salles-group path');
 
   for (var i = 0; i < salles.length; i++) {
     salles[i].addEventListener('click', function(e) {
@@ -119,9 +124,9 @@ function initSvgSupport()
 
 window.addEventListener('load', function() {
   // Init SVG
-  var plan = document.getElementById('plan');
-  if (plan.contentDocument == null) {
-  	plan.addEventListener('load', initSvgSupport);
+  var map = document.getElementById('map');
+  if (map.contentDocument == null) {
+  	map.addEventListener('load', initSvgSupport);
   } else {
   	initSvgSupport();
   }
@@ -130,8 +135,14 @@ window.addEventListener('load', function() {
   if (window.location.hash != "") {
     updateCurrentRoom();
   }
-
-  window.onhashchange = function() {
-    updateCurrentRoom();
-  }
+});
+
+window.onhashchange = function() {
+  updateCurrentRoom();
+};
+
+window.addEventListener('resize', function() {
+  window.panZoom.resize();
+  window.panZoom.fit();
+  window.panZoom.center();
 });
diff --git a/resources/styles.css b/resources/styles.css
index 6bf2321..37a32d7 100644
--- a/resources/styles.css
+++ b/resources/styles.css
@@ -1,3 +1,7 @@
+#map {
+  width: 100%;
+}
+
 #searchResultInfos {
   background-color: #BBBBBB;
 }