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

Answer 1

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;
}