Display world map with no repeats

user_1110621 0
Viewed 19723

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?

google-maps-api-3 google-maps javascript
3 Answers

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>

user_16870830
Related