CODEWITHSUNDEEP
google-maps-api-3
Mazzi
Mazzi

Reputation: 949

Google Maps API V3: Bound world to fit area and disable map repeat

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

Upvotes: 5

Views: 15792

Answers (2)

kaskader
kaskader

Reputation: 1972

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

Upvotes: 12

Adam Morris
Adam Morris

Reputation: 8545

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.

Upvotes: 0

Related Questions