Google मानचित्र एपीआई वी 3 ट्विटर के बूटस्ट्रैप

Question

का उपयोग करके टैबड पेज पर प्रतिस्पर्धात्मक रूप से प्रतिपादन नहीं कर रहा है, मैं अपने सीएसएस को परिभाषित करने के लिए ट्विटर के बूटस्ट्रैप का उपयोग कर रहा हूं। मैंने तीन टैब के साथ एक पेज बनाया है। दूसरे टैब में Google मानचित्र के साथ बनाया गया मानचित्र शामिल है। हालांकि, पृष्ठ खोलते समय और मानचित्र के साथ दूसरे पृष्ठ पर स्विच करते समय, नक्शा पूरी तरह से प्रस्तुत नहीं किया जाता है। एक बार जब मैं Google मानचित्र टैब के साथ पृष्ठ को फिर से लोड करता हूं तो चयनित टैब के रूप में नक्शा पूरी तरह लोड हो जाता है।

google.maps.event.addDomListener(window, 'resize', function() { 
    map.setCenter(homeLatlng); 
}); 

हालांकि इस समाधान हो प्रतीत नहीं होता:

मैं कुछ पदों है कि जावास्क्रिप्ट के लिए निम्न कोड जोड़ने के लिए एक ही समस्या के साथ लोगों को सलाह दी पढ़ा।

जावास्क्रिप्ट:

<script type="text/javascript"> 
function initialize() { 
    google.maps.event.addDomListener(window, 'resize', function() { 
     map.setCenter(homeLatlng); 
    }); 

    var myLatlng = new google.maps.LatLng(37.4419, -122.1419); 
    var myOptions = { 
     zoom: 13, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    downloadUrl("data.xml", function(data) { 
     var markers = data.documentElement.getElementsByTagName("marker"); 
     for (var i = 0; i < markers.length; i++) { 
      var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), 
           parseFloat(markers[i].getAttribute("lng"))); 
      var marker = new google.maps.Marker({position: latlng, map: map}); 
     } 
    }); 
} 
</script> 

HTML:

<div class="tab-pane" id="orange" style="background-color:#E3F2FF;"> 
     <div id="map_canvas" style="width:780px; height:400px; overflow:;"></div> 
</div> 

मैं इस हल कर सकते हैं कृपया नीचे पूरा कोड नहीं मिल रहा?

<div class="tab-pane" id="orange" style="background-color:#E3F2FF;"> 
    <div id="map_canvas" style="width:780px; height:400px; overflow:;"></div> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript" src="util.js"></script> 
    <script type="text/javascript"> 
     function initialize() { 
     google.maps.event.addDomListener(window, 'resize', function() { 
      map.setCenter(homeLatlng); 
     }); 

     var myLatlng = new google.maps.LatLng(37.4419, -122.1419); 
     var myOptions = { 
      zoom: 13, 
      center: myLatlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
     downloadUrl("data.xml", function(data) { 
      var markers = data.documentElement.getElementsByTagName("marker"); 
      for (var i = 0; i < markers.length; i++) { 
      var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), 
             parseFloat(markers[i].getAttribute("lng"))); 
      var marker = new google.maps.Marker({position: latlng, map: map}); 
      } 
     }); 
     map.checkResize(); 
    } 
    </script> 
</div> 

Answer 1

मैं: शायद मैं कुछ जावास्क्रिप्ट कि गूगल मैप्स हिस्सा पुन: लोड एक बार टैब का चयन किया है, लेकिन मैं ऐसा करने के तरीके पता नहीं है ....

अपडेट किया गया कोड अभी भी त्रुटि से पता चलता जोड़ सकते हैं इस मुद्दे के साथ भी जूझ रहा था। मैं एक मोडल फॉर्म का उपयोग कर रहा था और जब यह छिपा हुआ था तो उसने मानचित्र को प्रस्तुत किया। जब टैब दिखाई देता है, तो आप इस कोड को गति प्रदान करने की जरूरत है:

google.maps.event.trigger(map, 'resize'); 
map.setZoom(map.getZoom()); 

उम्मीद है कि यह आप के लिए काम करेंगे। अगर यह काम नहीं करता है, तो वह लिंक है जहां मुझे समाधान मिला। शायद एक और सहायक टिप्पणी होगी।

http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448

Answer 2

एक छिपा div में एक गूगल मैप्स दिखाने के लिए, इससे पहले कि नक्शा बनाया और लोड कर रहा है div दिखाना चाहिए। नीचे एक उदाहरण है:

<div id="map_canvas" style="width:500px; height:500px"></div> 

<script> 
$(document).ready(function(){ 
    $('#button').click(function() { 
    $('#map_canvas').delay('700').fadeIn(); 
    setTimeout(loadScript,1000); 
    }); 
}); 

    function initialize() { 
     var title= "Title"; 
     var lat = 50; 
     var lng = 50; 
     var myLatlng = new google.maps.LatLng(parseFloat(lat),parseFloat(lng)); 
     var myOptions = { 
     zoom: 8, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
     var marker = new google.maps.Marker({ 
      position: myLatlng, 
      title:artTitle 
     }); 
     // To add the marker to the map, call setMap(); 
     marker.setMap(map); 
    } 

    function loadScript() { 
     var script = document.createElement("script"); 
     script.type = "text/javascript"; 
     script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize"; 
     document.body.appendChild(script); 
    }  
</script> 

Answer 3

मैं बूटस्ट्रैप-tab.js में शो समारोह अंदर

google.maps.event.trigger(map, 'resize'); 

का उपयोग करके समस्या का समाधान कर लिया बॉक्स आप घटना का आकार परिवर्तन उत्प्रेरित करने चाहिए दिखा के समय का मतलब है और काम करेंगे ..

संपादित करें: मैं एक ही जवाब Google Maps API v3, jQuery UI Tabs, map not resizing मैं वें देखा है के साथ एक और लिंक देखा है समस्या को सुलझाने कारण जो अभी भी है पता लगाने के लिए के बाद लिंक यही कारण है कि घटना का आकार बदलने के टैब के क्लिक करें घटना पर नहीं काम करता है करता है अनुत्तरित है, लेकिन विभिन्न देरी परीक्षण के बाद मेरे लिए टैब js

Answer 4

निर्माण में काम करता है:

$(window).resize(function() { 
     setTimeout(function() { 
       google.maps.event.trigger(map, 'resize'); 
      }, 300)    

}); 

उम्मीद है कि यह मदद करता है।

Answer 5

मेरे लिए, यह काम करने के लिए किया गया था जो मेरे मामले में, मॉडल के बाद नक्शे को प्रस्तुत करता है।

सभी मैं करना पड़ा था:

$(document).on("shown", "#eventModal", function(){ 
    bindMap(coordinates); 
}); 

आप क्योंकि वे भी एक "पता चला" घटना है, टैब के साथ भी ऐसा ही कर सकते हैं।

Answer 6

यह मेरे लिए ठीक काम करता है, मैं इस लिंक https://code.google.com/p/gmaps-api-issues/issues/detail?id=1448

Answer 7

से jQuery टैब

  setTimeout(function() { 
      google.maps.event.trigger(map, "resize"); 
      map.setCenter(new google.maps.LatLng(default_lat, default_lng)); 
      map.setZoom(default_map_zoom); 
     }, 2000); 

का उपयोग यहाँ समाधान की एक बहुत कुछ है और स्पष्ट रूप से वे सब गलत हैं। यदि आपको बूटस्ट्रैप टैब की डिफ़ॉल्ट कार्यक्षमता को हाय-जैक करना है, तो आप बूटस्ट्रैप टैब का भी उपयोग नहीं कर सकते हैं। यदि टैब दिखाए जाने के बाद आप केवल आकार बदल रहे हैं, तो आपको अभी भी जीमैप्स इंटरफ़ेस (ज़ूम स्तर और ऐसे) के साथ समस्याएं हो सकती हैं। टैब दिखाई देने के बाद आपको बस मानचित्र को प्रारंभ करना होगा।

var myCenter=new google.maps.LatLng(53, -1.33); 
var marker=new google.maps.Marker({ 
    position:myCenter 
}); 

function initialize() { 
    var mapProp = { 
     center:myCenter, 
     zoom: 14, 
     draggable: false, 
     scrollwheel: false, 
     mapTypeId:google.maps.MapTypeId.ROADMAP 
    }; 

    var map=new google.maps.Map(document.getElementById("map-canvas"),mapProp); 
    marker.setMap(map); 

    google.maps.event.addListener(marker, 'click', function() { 

    infowindow.setContent(contentString); 
    infowindow.open(map, marker); 

    }); 
}; 

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
    initialize(); 
}); 

आप इस bootply में एक काम उदाहरण देख सकते हैं: http://www.bootply.com/102241

नोट: Google Maps API V3 : weird UI display glitches (with screenshot)

सबसे हाल ही में GMaps का उपयोग करना: अगर आपके इंटरफ़ेस अभी भी glitchy है, यह इस समस्या हो सकती है एपीआई, आपको बस इसे अपने स्टाइल में जोड़ना होगा:

.gm-style img { max-width: none; } 
.gm-style label { width: auto; display: inline; }