Google Maps v3 - Settings zoom level and fixing to bounds of world map

Question

I have been going around the net trying to find a solution for a map problem, but not really worked one out. I'm new to JS.

See the example below, it has markers but what would be ideal is that you only ever see the markers and world map once: if you click and drag to the left for example it just keeps repeating the world map and markers over and over again.

I would like to maybe stop when you get to the end of the map which ever way and only show the markers once. Is this possible with my code?

$(document).ready(function() {
 var styles = {
        'AmbientLounge': [{
      featureType: "water",
      elementType: "geometry",
      stylers: [
       { weight: 4 },
       { visibility: "on" },
       { invert_lightness: true },
       { color: "#333333" }
      ]
  },
  {
      featureType: "landscape",
      stylers: [
       { color: "#2996b3" }
      ]
  },
  {
      elementType: "labels.text",
      stylers: [
       { visibility: "off" }
      ]
  },
  {
      featureType: "administrative.country",
      elementType: "geometry.stroke",
      stylers: [
       { color: "#333333" }
      ]
  }]
    }

 new Maplace({
     map_div: '#gmap',
     controls_type: 'list',
     locations: Locs,
     start: 0,
     styles: styles,
     map_options: {
         zoom: 2,
         set_center: [0,0],
         panControl: false,
      zoomControl: true,
      scaleControl: false,
      disableDoubleClickZoom: true,
      draggable: true
     }
 }).Load(); 
});

/* -----------------------------------------
   General
----------------------------------------- */

ul, ol, dl {
    margin-bottom: 20px
}
html, body {
    height: 100%;
}
.gmap {
    height: 100%;
    width: 100%;
    font-size: 90%;
}

.gmap + .gmap {
    margin: 5px 0;
}

.canvas_map {
    width: 100% !important;
}

.gmap img, .gmap object, .gmap embed { max-width: none; height: auto }

.gmap *,.gmap *:before,.gmap *:after{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;}

.gmnoprint {
    display: none;
}

.gm-style-mtc div {
    font-size: 15px !important;
    padding: 5px 15px !important;
}

#controls .ullist {
    margin: 0px; 
    padding: 0px; 
    list-style-type: none;
}

.on_gmap.list.gmap_controls {
    left: 0 !important;
    top: 3px !important;
}

.on_gmap.list.gmap_controls .wrap_controls {
    border: 0 !important;
    box-shadow: none !important;
    background: none !important;
}

.ullist li {
    float: left;
    background: rgba(0, 0, 0, .6);
    color: #ffffff;
    padding: 0 10px;
    margin-right: 10px;
}

.ullist li a {
    color: #ffffff !important;
}

.ullist li.active {
    background: #ED2088;
}
.gmap * {
    font-size: 100%;
}

.ullist {
    width: 100%;
}

.ullist li a:hover,
.ullist li:hover {
    background: #eee !important;
    color: #2a2a2a !important;
}

.ullist li.active a,
.ullist li.active:hover {
    color: #ffffff !important;
    background-color: #ED2088 !important;
    font-size: 12px !important;
}

.gm-style-iw p {
    margin:3px 0;
}

.gm-style-iw h3 {
    font-size: 20px !important;
    margin: 5px 0 10px 0;
    border-bottom: 1px solid lightgrey;
}

@media only screen and (max-width: 767px) {

    h2 { 
        font-size: 24px;
    }

    h3 {
        font-size: 20px;
    }
}

<div id="gmap" class="gmap"></div>

<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry&v=3.7"></script>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://www.ambientlounge.com/external/map-v2/maplace.min.js"></script>
<script src="http://www.ambientlounge.com/external/map-v2/locations.js"></script>