Google Maps API V3：全世界を表示

13

function initialize() { 
 

 
var mapOptions = { 
 
\t center: new google.maps.LatLng(0, 0), 
 
\t zoom: 1, 
 
\t minZoom: 1 
 
}; 
 

 
var map = new google.maps.Map(document.getElementById('map'),mapOptions); 
 

 
var allowedBounds = new google.maps.LatLngBounds(
 
\t new google.maps.LatLng(85, -180), \t // top left corner of map 
 
\t new google.maps.LatLng(-85, 180) \t // bottom right corner 
 
); 
 

 
var k = 5.0; 
 
var n = allowedBounds .getNorthEast().lat() - k; 
 
var e = allowedBounds .getNorthEast().lng() - k; 
 
var s = allowedBounds .getSouthWest().lat() + k; 
 
var w = allowedBounds .getSouthWest().lng() + k; 
 
var neNew = new google.maps.LatLng(n, e); 
 
var swNew = new google.maps.LatLng(s, w); 
 
boundsNew = new google.maps.LatLngBounds(swNew, neNew); 
 
map .fitBounds(boundsNew); 
 

 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);

#map { 
 
    width: 500PX; 
 
    height: 500px; 
 
}

<html> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://maps.googleapis.com/maps/api/js"></script> 
 
    </head> 
 
    <body> 
 
    <div id="map"></div> 
 
    </body> 
 
</html>

// map zoom level should be 1

出典

2013-07-24 15:23:54 Kunal

+1

'swt'と' nor'は未使用の変数です。 SOに貼り付ける前にコードを整理してください。 – developerbmw

+0

ありがとう@developerbmw – Kunal

+0

私はこの解決策をAndroid自体で試しましたが、例外があります。「java.lang.IllegalArgumentException：南緯が北緯（85.0> -85.0）を超えています。座標を切り替えると、クラッシュしませんでしたが、まだ全世界が表示されません。どうして？ここでそれについての質問です：http://stackoverflow.com/q/42329186/878126 –

5

新しいマップインスタンスを作成するときに、ズームレベルを指定できます。

var myOptions = { 
     zoom:7, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

下のズーム値、あなたが見るマップのより、その1または2の値が（マップキャンバスのサイズに応じて）地球全体を表示する必要があります。地図を作成した後、

map.setZoom(8);

ズームレベルを変更することができます。

出典

2012-03-27 19:21:27 javram

+1

問題はキャンバスのサイズは、ウィンドウサイズに相対的であるということです。だから、座標Aから座標Bまでのすべてを表示する必要があると言うことができるのはいいことです。 – Nocklas

+2

さらに、オプションオブジェクトには、[公式ドキュメント]（https ：//developers.google.com/maps/documentation/javascript/reference？hl = ja＃MapOptions）が必要です。 –

-2

この問題の解決策は、マップオブジェクトに対してfitBoundsメソッドを使用し、適切な境界を指定することでした。

出典

2012-12-04 22:31:33 Nocklas

+4

使用した境界は何ですか？ – httpete

3

それは、繰り返しを持っていないことが保証はなく、事実を悪用することにより、ベースタイルは、256（ズーム0）から始まり、内にあり、各増分で倍増していない - あなた対数関数を使用して最適なズームレベルを選択できます。

function initialize() { 
 
    var mapOptions = { 
 
    center: new google.maps.LatLng(0, 0), 
 
    zoom: Math.ceil(Math.log2($(window).width())) - 8, 
 
    }; 
 
    
 
    var map = new google.maps.Map(document.getElementById('map'), mapOptions); 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);

#map { 
 
    width: 100%; 
 
    height: 500px; 
 
}

<html> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://maps.googleapis.com/maps/api/js"></script> 
 
    </head> 
 
    <body> 
 
    <div id="map"></div> 
 
    </body> 
 
</html>

出典

2015-04-17 12:42:03

Google Maps API V3：全世界を表示

答えて

関連する問題