Display world map with no repeats

Question

I'm currently using the Google Maps API for the first time. Essentially I wish to have the map zoomed out so that the whole world is displayed with no overlap (e.g. bits of a certain country are not repeated on either side of the map).

The closest I have found to my requirements is this SO question: Google Maps API V3: Show the whole world

However, the top answer on this question does not provide the full code required.

I have used the starter example from Google as the base for my HTML:

<!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: 100% }
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCuP_BOi6lD7L6ZY7JTXRdhY1YEj_gcEP0&sensor=false">
    </script>
    <script type="text/javascript">
       function initialize() {
          var mapOptions = {
             center: new google.maps.LatLng(-34.397, 150.644),
             zoom: 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>

However, in the example provided in the question above a number of additional variables have been specified. My question is, where do I plug in the code from the question above to ensure that my world map is displayed correctly?

geocodezip · Accepted Answer · 2020-12-11T05:58:07.117

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>

This is great however it produces a grey box at the bottom of the map regardless of height. Is there any way of getting rid of this grey box as it looks horrible. — jezzipin, Dec 11 '13 at 09:40
You can change the height to be shorter than a multiple of 256, the vertical direction doesn't repeat. — geocodezip, Dec 11 '13 at 14:19
@jezzipin: you could also set `minZoom` to 2, or another higher level, depending on the devices you want to show your map on. Wide screens will indeed show those grey boxes at the top and bottom if the minimum zoom factor is too low. — Jochem Schulenklopper, Mar 19 '17 at 18:18

score 2 · Answer 2 · edited May 12 '19 at 00:30

Here's a function worldViewFit I like to use:

function initMap() {
 var mapOptions = {
  center: new google.maps.LatLng(0, 0),
  zoom: 1,
  minZoom: 1
 };
 map = new google.maps.Map(document.getElementById('officeMap'), mapOptions);
 google.maps.event.addListenerOnce(map, 'idle', function() {
  //Map is ready
  worldViewFit(map);
 });
}

function worldViewFit(mapObj) {
 var worldBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(70.4043,-143.5291), //Top-left
  new google.maps.LatLng(-46.11251, 163.4288)  //Bottom-right
 );
 mapObj.fitBounds(worldBounds, 0);
 var actualBounds = mapObj.getBounds();
 if(actualBounds.getSouthWest().lng() == -180 && actualBounds.getNorthEast().lng() == 180) {
  mapObj.setZoom(mapObj.getZoom()+1);
 }
}

google.maps.event.addDomListener(window, 'load', initMap);

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

#officeMap {
  height: 512px;
  width: 512px;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="officeMap"></div>

score 0 · Answer 3 · answered Aug 27 '23 at 04:16

This is the best i was able to do ,

const mapOptions = {
    zoom:1,
    minZoom: 2,  // Set your desired minZoom level
    maxZoom: 25,
    restriction: {
      latLngBounds: {
        north: 85.0 , // Define your desired latitude boundaries
          south: -85.0 , // Define your desired latitude boundaries
          west: -50.0, // Define your desired longitude boundaries
          east: 50.0,
      },
    },

and in the render ui,

<GoogleMap
      options={mapOptions}
      onLoad={handleOnLoad}
      onClick={() => setActiveMarker(null)}
      mapContainerStyle={{ width: "100%", height: "100vh" }}
    >

PS>> this is a react js code

score -3 · Answer 4 · edited Jul 10 '17 at 19:44

This is the JavaScript I found:

/**
* All locations map scripts
*/
jQuery(function($){

    $(document).ready(function(){
        loadmap();
    });

    function loadmap()
    {
        var locations = wpsl_locator_all.locations;
        var mapstyles = wpsl_locator.mapstyles; 
        var mappin = ( wpsl_locator.mappin ) ? wpsl_locator.mappin : '';
        var bounds = new google.maps.LatLngBounds();

        var mapOptions = {
                mapTypeId: 'roadmap',
                mapTypeControl: false,
                zoom: 8,
                styles: mapstyles,
                panControl : false
            }
        if ( wpsl_locator.custom_map_options === '1' )  mapOptions = wpsl_locator.map_options;

        var infoWindow = new google.maps.InfoWindow(), marker, i;
        var map = new google.maps.Map( document.getElementById('alllocationsmap'), mapOptions );

        // Loop through array of markers & place each one on the map  
        for( i = 0; i < locations.length; i++ ) {
            var position = new google.maps.LatLng(locations[i].latitude, locations[i].longitude);
            bounds.extend(position);

            var marker = new google.maps.Marker({
                position: position,
                map: map,
                title: locations[i].title,
                icon: mappin
            }); 

            // Info window for each marker 
            google.maps.event.addListener(marker, 'click', (function(marker, i){
                return function() {
                    infoWindow.setContent(locations[i].infowindow);
                    infoWindow.open(map, marker);
                    wpsl_all_locations_marker_clicked(marker, infoWindow)
                }
            })(marker, i));

            // Center the Map
            map.fitBounds(bounds);
            var listener = google.maps.event.addListener(map, "idle", function() { 
                    if ( locations.length < 2 ) {
                    map.setZoom(13);
                }
                google.maps.event.removeListener(listener); 
            });
        }

        // Fit the map bounds to all the pins
        var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
            google.maps.event.removeListener(boundsListener);
        });

        wpsl_all_locations_rendered(map);

    } // loadmap()

});

Display world map with no repeats

4 Answers4

Linked

Related