Display world map with no repeats

If you don't want any repeats, you need to control the minimum zoom allowed and the width of your map to be less than or equal to one width of of the base tiles at the minimum zoom level allowed on your map. At zoom zero, one width of the world is a single 256 x 256 pixel tile, each zoom level increases that by a factor of 2.

This will show one width of the map at zoom level 1 (512x512 map-canvas), you can change the height, but the width will need to be 256 at zoom 0, 512 at zoom 1, 1024 at zoom 2, etc:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
      <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 0; padding: 0 }
        #map-canvas { height: 512px; width:512px;}
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false">
    </script>
    <script type="text/javascript">
       function initialize() {
          var mapOptions = {
             center: new google.maps.LatLng(-34.397, 150.644),
             zoom: 1,
             minZoom: 1
          };
          var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
       }

       google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
   <div id="map-canvas"/>
  </body>
</html>

code snippet:

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 1,
    minZoom: 1
  };
  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);
html {
  height: 100%
}

body {
  height: 100%;
  margin: 0;
  padding: 0
}

#map-canvas {
  height: 512px;
  width: 512px;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>

Tags:

Javascript

Google Maps

Google Maps Api 3

Recent Posts