私はちょうどウェブサイトにgooglemapを追加しました。以下のような別のdivの内側map_canvas divの中toturialsに提示されるようIが配置され、このdiv要素がネストされている：Googleマップは左上に配置されます
今の問題は、TOPLEFT隅にマップタイルのstayesではなくマップこのような背景http://screencast.com/t/jeUSKijjwE
何が間違っている可能性がありますか？
ラスマス、私は）私は機能checkResize（と呼ばれる... Googleマップとここに本部を問題を解決する
を終わりました。
私は、変数のマップを（マップがロードされ、機能と呼ばれている私のDIV「検査」という取っ：
maps.checkResizeを（）;
私は、このリンクを支援することができました：Google map only loading half of itself
マルセロ・マリーニ
これはうまくいくようですが、それをどこに置くべきかを理解する。内部にある場合は、ページ全体が有効になります。 –
私はこの問題を抱えていたし、私の場合には問題は私はjavascriptのinnerHTMLプロパティとmap_canvas div要素を作成したことがあることを発見した。
地図は正しく表示されますが、同じ地図（間違った地図）が表示され、別の地図を表示すると3回目に表示されます左上隅にのみ表示されます。それは残りのすべての呼び出しのために上部の角にあります。
私がしなければならなかったのは、元のHTMLにdivを入れて、そこから完全に動作することでした。
これが誰かを助けることを願っています！
これは通常、マップの表示、非表示、またはサイズ変更の問題です。
Googleマップv3では、google.maps.event.trigger(map, 'resize');と呼ぶことができます。mapは、Googleマップオブジェクトへの参照です。
divが表示されているかどうかを確認した後、マップを保持しようとした後、少し時間がかかるロードマップをお勧めします。
$(document).ready(function() {
$('.togglebtn').click(function() {
if(!$('#map_canvas').is(':visible')){
setTimeout(function(){initialize()}, 500);
}
});
});
//your function
function initialize() {
var mapOptions = {
zoom: 3,
center : new google.map.LatLng(31.510474,80.352287),
center: new google.maps.LatLng(44.510474, 50.352287),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var contentSC_PAK = "SoftCircles Pakistan";
.....
.....
and rest of your map code to initialize map
});
}
autosizseオプションを使用する必要があります。私は同じ問題を抱えており、私はそれを解決しました。
ここで、モーダルを開いてその内部にコードを配置すると、位置ピッカーが呼び出されます。
$scope.map_picker = function(){
$("#map_modal").modal('show');
$('.us2').locationpicker({
location: {latitude: 33.997215339647724, longitude: -81.02654766235355},
radius: 300,
inputBinding: {
latitudeInput: $('.us2-lat'),
longitudeInput: $('.us2-lon'),
radiusInput: $('#us2-radius'),
locationNameInput: $('#us2-address')
}
});
**$('#map_modal').on('shown.bs.modal', function() {
$('.us2').locationpicker('autosize');
});**
}
メインロジックは、ちょうどこのライン使用する必要がありますされています $をlocationpicker（ '自動サイズ調整 '）;（' US2。'）。 しかし、この行をどのように、どこで呼び出すのが重要です。
---- UPDATE -----ブラウザが復元されてから再び最大化されると、地図が正しく描画されていることがわかりました.....しかし、なぜですか？ –
http：// stackoverflow。com/questions/8803323/google-maps-api-map-only-on-the-left-of-the-div/11006250＃11006250 – maksbd19