Google V3 Maps API: A connected world to fit an area and disable map repeat

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

Question: Considering the size of 616px by 310px cards, how can we change / resize the card to fit the given size. For example, only one instance of the world is shown, and the bottom of the map will be the lower part of Africa. Therefore, subsequently the world map will not be repeated. To be precise, make our map connected as follows:

enter image description here

Here is what I got so far: enter image description here

+4
source share
2 answers

The "picture" of the whole world has a constant size at a given zoom level. For zoom level 1 it is 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 div map that is smaller than the image of the whole world at this zoom level, otherwise it won’t work.

For a zoom level of 1, a map will require 512 to fit perfectly, rather than wrap.

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

NTN

+11
source

Google Maps has a number of zoom levels - each one gets one step closer. You set the height and width of the map in pixels, and then the Google maps api download the corresponding map fragments to fill in the provided window.

In fact, this does not allow you to stretch the map, and I believe that when you scale 1, the google map of the world will be 256 pixels by 256 pixels.

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

In addition, if you dynamically drop contacts on a web page, you can use api to add markers directly by their latitude and longitude. If you are working with a static image offline, you must first use the open source openstreetmaps data, as you may need an additional license from Google. For openstreetmaps, can you use a standalone tool like TileMill or mapnik to place markers? In any case - reading forecasts - this will explain how the latitude and longitude coordinates will correspond to the position of the pixel in the image.

You can also browse http://gis.stackexchange.com , which specifically deals with issues related to the card.

0
source

All Articles