5

Setting the center: new google.maps.LatLng(0,0) will set the center of the world. And zoom: 1 makes the default zoom to whole world.

Question is, given the size 616px by 310px of the map how can we modify/resize the map so it fits the given size nicely. For example only one instance of world gets shown and bottom of the map will be the bottom of Africa. So subsequently world map will not repeat. To be precise making our map bound like this:

enter image description here

This is what I have got so far: enter image description here

Mazzi
  • 939
  • 4
  • 12
  • 30

2 Answers2

12

The 'picture' of the whole world has a constant size at a given zoom level. For zoom level 1 it's 512 pixels, for zoom level 2 1024, 3 = 2048 , 4 = 4096 etc ...

To fit the whole world without repeating it you need to have a map div that is smaller than the picture of the whole world at this zoom level, otherwise it won't work.

For zoom level 1 the map would need to 512 to fit ideally and less not to wrap.

https://output.jsbin.com/vabago is a sample that shows the world width at given zoom levels and logs it to the console. It also resizes the map to fit the whole world when you zoom in (a silly thing to do usually, but here it just shows how this works).

HTH

kaskader
  • 1,931
  • 16
  • 24
  • Math.pow(2,zoomLevel)*256 (or Math.pow(2,zoomLevel + 8) I guess) – Andrew Apr 22 '13 at 17:37
  • Is there any other way to do it without manually setting the zoom level.. Or anything like showing pins on one world? – Brune Apr 24 '13 at 07:11
  • you should restrict the zooming by setting maxZoom in MapOptions depending on the size of your map. so if your map is 800px wide you should set the minZoom to 2 if it's bigger than 1024 you should set the minZoom to 3. Check the reference here: https://developers.google.com/maps/documentation/javascript/reference#MapOptions – kaskader Apr 24 '13 at 13:37
  • minZoom, not maxZoom – Radek Jan 08 '16 at 10:53
  • The JavaScript on the page is broken now: `TypeError: Cannot read property 'getWorldWidth' of undefined` – Phil Gibbins May 22 '18 at 11:12
  • It seems wrapping the code inside the 'bounds changed' listener with an 'idle' listener fixes it. Works for me in JSBin. `google.maps.event.addListener(map,"bounds_changed", function() { google.maps.event.addListener(map,"idle", function() { var proj = overlay.getProjection(); ... ` Source: https://stackoverflow.com/a/6657723/6189078 – Phil Gibbins May 22 '18 at 11:31
0

Google maps has a series of zoom levels - each one getting one step closer. You set your map height and width in pixels, and then the google maps api will load the appropriate map tiles to fill the provided window.

In effect, it doesn't allow you to stretch the map, and I believe at zoom 1, the google map of the world would be 256 px by 256 px.

Here is a nice overview explaining this a bit further: http://troybrant.net/blog/2010/01/mkmapview-and-zoom-levels-a-visual-guide/

Also, if you're dropping pins dynamically in a webpage, you can use the api to add markers directly by their latitude and longitude. If you're working with an offline static image, then first, you should look at using the open source openstreetmaps data, as you'll may need a further license with Google. For openstreetmaps, you might look at using offline tool such as TileMill or mapnik for placing the markers? In any case - read up on projections - this will explain how latitude and longitude coordinates will correspond to the pixel position on the image.

You might also look through http://gis.stackexchange.com, which is specifically for map related questions.

Adam Morris
  • 8,265
  • 12
  • 45
  • 68
  • Thanks for your reply. I have update the question by adding what I have got so far. Dropping pins and stuff is not my concern at the moment. What I need is to be able to set the base map similar to the one in example. One instance and perhaps moved down a little. – Mazzi Nov 28 '12 at 00:05