Geek Answers Handbook

Display world map without repetition

I am currently using the Google Maps API for the first time. In fact, I want the map to be reduced so that the whole world is displayed without overlapping (for example, the bit of a certain country does not repeat on both sides of the map).

The closest I found in my requirements is this question: Google Maps API V3: show the whole world

However, the main answer to this question does not provide complete code.

I used the Google starter example as a 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 mentioned in the question above, a number of additional variables are indicated. My question is: where can I include the code from the question above to make sure my world map is displayed correctly?

+6
source share
3 answers

If you do not want repetitions, you need to control the minimum scaling, and the width of your map will be less than or equal to one width of the base fragments with the minimum zoom level allowed on your map. When scaling zero, one width of the world represents a single 256 x 256-pixel slab, each level of increase increases, which is 2 times.

This will display one map width at zoom level 1 (512x512 map), you can change the height, but the width should be 256 at 0, 512 at 1, 1024 at 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"></script> <div id="map-canvas"></div>
+7
source

Here is the worldViewFit function that 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>
+1
source

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() });
-3
source

More articles:


All Articles