2016-11-09 11 views
0

基本的には、SE-NWコーナーに対応するサイズにズームインするマップを作成したいと考えています。私は非常に多くのバリエーションを試しましたが、動作させることができませんでした。私はスクリプトの1つのバージョンに2つのマーカーを配置することができましたが、マーカーをマーカーのサイズに拡大することはできませんでした。私はマーカーを必要としない、私はちょうど箱の外で考えていた。私は下に私の仕事のスクリプトの私の並べ替えを含めるが、fitBoundsを動作させるための任意の助けに感謝します。私は2日間これをしっかりと実践しましたが、私はプログラマーではなく、私がこのウェブサイトで見つけた解決策の多くを理解していないか、または私の正確な問題に対処していません。Googleマップを作成するfitBounds

<!DOCTYPE html> 
<!-- This script works, but the size of the output should be as per the SW-NE coordinates -- not the 'div style width/height', and ignoring the center:coordinates --> 
<!-- This is one of several maps I am planning to create but I don't mind typing in the fitBounds coordinates by hand --> 
<html> 
<head> 
<title>Google Road Maps</title> 
<script src="http://maps.googleapis.com/maps/api/js"></script> 
<script> 
function initialize() { 
    var mapProp = { 
    center:new google.maps.LatLng(56.3,4.3), 
    zoom:8, 
    mapTypeId:google.maps.MapTypeId.ROADMAP, 
    disableDefaultUI:true,  
    scaleControl: true 
    }; 
    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 

var fitBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(53.3,-0.7), 
    new google.maps.LatLng(59.3,9.3) 
); 
</script> 
</head> 
<body> 
<div id="googleMap" style="width:600mm;height:600mm;"></div> 
</body> 
</html> 

答えて

0

あなたのfitBoundsオブジェクトにMap.fitBoundsを呼び出す必要があります。

map.fitBounds(fitBounds); 

proof of concept fiddle

コードスニペット:

function initialize() { 
 
    var mapProp = { 
 
    center: new google.maps.LatLng(56.3, 4.3), 
 
    zoom: 8, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    disableDefaultUI: true, 
 
    scaleControl: true 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 
 
    map.fitBounds(fitBounds); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize); 
 
var fitBounds = new google.maps.LatLngBounds(
 
    new google.maps.LatLng(53.3, -0.7), 
 
    new google.maps.LatLng(59.3, 9.3) 
 
);
html, 
 
body, 
 
#googleMap { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="googleMap"></div>

関連する問題