कैसे एक छिपे हुए div के अंदर गूगल मानचित्र से निपटने के लिए (अद्यतन तस्वीर)

Question

मेरे पास एक पृष्ठ है और एक Google मानचित्र पहले एक छिपे हुए div के अंदर है। मैं एक लिंक पर क्लिक करने के बाद फिर div दिखाता हूं, लेकिन केवल मानचित्र के ऊपर बाईं ओर दिखाई देता है।

मैंने क्लिक करने के बाद इस कोड को चलाने की कोशिश की:

    map0.onResize();

या:

  google.maps.event.trigger(map0, 'resize')

कोई विचार। यहाँ एक छवि है जो मुझे इसमें छिपे नक्शे के साथ div दिखाने के बाद दिखाई देता है।

Comments

इसके बारे में SO पर पहले से ही कई प्रश्न हैं, जिसमें एक छिपे हुए क्षेत्र से Google मानचित्र प्रदर्शन

— मैट बॉल

@ मट बॉल - जैसा कि अद्यतन किया गया है, मैंने वहां आकार बदलने की घटना को जोड़ने की कोशिश की, लेकिन अभी भी काम नहीं कर रहा है

— leora

@ मट बॉल - मुझे यह काम करने के लिए मिला। Google मैप ऑब्जेक्ट बनाने के बाद मैं एक वैश्विक चर में स्टोर करता हूं, इसलिए मैं इसे बाद में फिर से संदर्भित कर सकता हूं और आकार बदलने के बाद अब काम करने लगता है। मैं कोशिश कर रहा हूं कि हर बार मैं इसे दिखाने के बाद मैप ऑब्जेक्ट को दोबारा न बनाऊं क्योंकि मैं लोगों को आगे और पीछे टॉगल करने की अनुमति देता हूं।

— leora

@ जू जो नीचे दिए गए कोड के साथ बहुत सरल है। मैप ऑब्जेक्ट को इनिशियलाइज़ किया गया है या नहीं यह जांचने के लिए आपको बस एक शर्त रखनी होगी। यह एक ऑफ-द-कफ़ कोड था जिसे आपकी प्रारंभिक समस्या को संबोधित करने के लिए लिखा गया था जो कि मानचित्र को सही ढंग से लोड करना है।

— फीलर

@ फीलर - यूप। । यहाँ धन्यवाद। । इस प्रकार upvote :)। किसी भी तरह से मैं एक वैश्विक स्तर पर चर को फिर से संगठित करने की आवश्यकता है ताकि पुनर्मूल्यांकन से बचा जा सके

— leora

Answer 1

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

एचटीएमएल

<div id="map_canvas" style="width:700px; height:500px; margin-left:80px;" ></div>
<button onclick="displayMap()">Show Map</button>

सीएसएस

<style type="text/css">
#map_canvas {display:none;}
</style>

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

<script>
function displayMap()
{
    document.getElementById( 'map_canvas' ).style.display = "block";
    initialize();
}
function initialize()
{
    // create the map
    var myOptions = {
        zoom: 14,
        center: new google.maps.LatLng( 0.0, 0.0 ),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map( document.getElementById( "map_canvas" ),myOptions );
}
</script>

Comments

तो मूल रूप से आप केवल मानचित्र को दिखावा करते हैं जब तलाक दिखाया जाता है? क्या ऐसा करने का कोई तरीका है ताकि मैप ऑब्जेक्ट केवल एक बार (पेज लोड होने पर) तुरंत हो जाए?

— लुकास

यदि आप किसी शो () को आकार बदलने के लिए समय देने की अनुमति देते हैं, तो मैं दूसरे फ़ंक्शन को कॉल करने के लिए सेटटाइमआउट देरी का सुझाव भी दे सकता हूं।

— एरिक .१8

Answer 2

मुझे भी यही समस्या हो रही थी और पता चला कि डिव को दिखाने के लिए कॉल करें google.maps.event.trigger(map, 'resize');और यह मेरे लिए समस्या को हल करता प्रतीत होता है।

Comments

आकार के मूल केंद्र को आकार बदलने के बाद सही रखने के लिए, इस तरह के आकार के कथन का विस्तार करने पर विचार करें: var केंद्र = map.getCenter (); google.maps.event.trigger (मानचित्र, 'आकार'); map.setCenter (बीच में);

— जॉन डोपेलमैन

यह निश्चित नहीं है कि क्यों, लेकिन मुझे इसे प्राप्त करने के लिए छोटे सेटटाइमआउट के अंदर समाधान को लपेटने की आवश्यकता है: सेटटाइमआउट (फ़ंक्शन () {google.maps.event.trigger (मानचित्र, 'आकार'))}, 100);

— 13

@JohnDoppelmann टिप के लिए धन्यवाद! यह सहज नहीं था कि यह केंद्र को बनाए क्यों नहीं रख रहा था, न ही इसे वापस कैसे लाया जाए।

— नूह डंकन

'आकार' घटना को ट्रिगर करने के बाद फिर से मानचित्र केंद्र और ज़ूम स्तर सेट करें। अधिक जानकारी के लिए, देखें: code.google.com/p/gmaps-ap-issues/issues/detail?id=1448

— ruhong

@ यह दिखाने के प्रभाव से पहले आपके आकार बदलने वाले कोड फायरिंग के कारण संभवत:, टाइमआउट विलम्बित हो जाता है जब तक कि शो का प्रदर्शन नहीं किया जाता है, तब आकार परिवर्तन काम कर सकता है। आप शायद यह सुनिश्चित कर सकते हैं कि आपके कोड ऑफ़ एक्जीक्यूशन को बदलते हुए यह सुनिश्चित किया जाए कि इवेंट को फायरिंग करते समय, मैप दिखाने के पहले डिव शो को निष्पादित किया जाए।

— बारदो

Answer 3

google.maps.event.trigger($("#div_ID")[0], 'resize');

यदि आपके पास वैरिएबल मैप उपलब्ध नहीं है, तो यह पहला तत्व होना चाहिए (जब तक कि आपने कुछ बेवकूफ न किया हो) divजिसमें जीएमएपी शामिल हो।

Comments

क्या आप वाकई google.map.Map ऑब्जेक्ट के बजाय div पर एलिमेंट को ट्रिगर कर सकते हैं ?

— सलमान A

@ सलमान - बस इस की जाँच की और इसने मेरे लिए काम किया (हालाँकि मानचित्र में एक नया केंद्र है)। पिछले शोध से मुझे पता था कि यह संभव नहीं था इसलिए CSN

— Hal

सीएस एन ... यह मेरे लिए काम करता है, लेकिन, यह गलत स्थिति में केंद्र की स्थिति को छोड़ देता है। मेरा नक्शा ओपी के स्क्रीन शॉट की तरह इनिशियलाइज़ हो रहा है, और यह केंद्र की तरह है: मेरे map_canvas के ऊपरी बाएँ कोने पर केंद्रित है। विचार कैसे इसे पाने के लिए केंद्रित करने के लिए?

— कर्क रास

Answer 4

मेरे पास बूटस्ट्रैप टैब के अंदर एक Google मानचित्र था, जो सही ढंग से प्रदर्शित नहीं हो रहा था। यह मेरा फिक्स था।

// Previously stored my map object(s) in googleMaps array

$('a[href="#profileTab"]').on('shown', function() {   // When tab is displayed...
    var map = googleMaps[0],
        center = map.getCenter();
    google.maps.event.trigger(map, 'resize');         // fixes map display
    map.setCenter(center);                            // centers map correctly
});

Comments

मुझे एक निष्क्रिय टैब में छिपे हुए मानचित्र के लिए इस कार्य को प्राप्त करने के लिए 'दिखाया' से 'show.bs.tab' को बदलना पड़ा। धन्यवाद

— निकॉला

मैं स्मार्टवॉयर 4 का उपयोग कर रहा हूं और यह एकमात्र समाधान है जो मेरे लिए काम करता है और इसने बहुत अच्छा काम किया है! मैं बदल 'a[href="#profileTab"]'गया, step-2जो कि DIV का नाम है जिसमें DIV का नक्शा है।

— GeospatialPython.com

Answer 5

जब आप अपने डिव का आकार बदलते हैं तो नक्शे को कैसे ताज़ा करें

यह केवल कॉल करने के लिए पर्याप्त नहीं है google.maps.event.trigger(map, 'resize');आपको मानचित्र के केंद्र को भी रीसेट करना चाहिए।

var map;

var initialize= function (){
    ...
}

var resize = function () {
    if (typeof(map) == "undefined") {) {
        // initialize the map. You only need this if you may not have initialized your map when resize() is called.
        initialize();
    } else {
        // okay, we've got a map and we need to resize it
        var center = map.getCenter();
        google.maps.event.trigger(map, 'resize');
        map.setCenter(center);
    }
}

आकार बदलने के लिए कैसे सुनें

कोणीय (एनजी-शो या यूआई-बूटस्ट्रैप पतन)

एनजी-शो के लिए बाध्य मूल्य के बजाय सीधे तत्व की दृश्यता के लिए बाध्य करें, क्योंकि एनजी-शो अपडेट होने से पहले $ घड़ी आग लगा सकती है (इसलिए div अभी भी अदृश्य होगी)।

scope.$watch(function () { return element.is(':visible'); },
    function () {
        resize();
    }
);

jQuery .show ()

अंतर्निहित कॉलबैक का उपयोग करें

$("#myMapDiv").show(speed, function() { resize(); });

बूटस्ट्रैप 3 मोडल

$('#myModal').on('shown.bs.modal', function() {
    resize();
})

Comments

आपके बूटस्ट्रैप 3 मोडल आकार के तरीके ने मेरी समस्या को पूरी तरह से ठीक कर दिया जबकि अधिकांश अन्य सुझावों में से नहीं थे। धन्यवाद!

— ब्रायनलेग

Answer 6

यदि आपके पास iframe कोड कॉपी / पेस्ट करके Google मैप डाला गया है और आप Google मैप्स API का उपयोग नहीं करना चाहते हैं , तो यह एक आसान समाधान है। जब आप छिपे हुए नक्शे को दिखाते हैं तो बस निम्नलिखित जावास्क्रिप्ट लाइन निष्पादित करें। यह सिर्फ iframe HTML कोड लेता है और इसे उसी स्थान पर सम्मिलित करता है, इसलिए यह फिर से प्रस्तुत होता है:

document.getElementById("map-wrapper").innerHTML = document.getElementById("map-wrapper").innerHTML;

jQuery संस्करण:

$('#map-wrapper').html( $('#map-wrapper').html() );

HTML:

....
<div id="map-wrapper"><iframe src="https://www.google.com/maps/..." /></div>
....

निम्न उदाहरण बूटस्ट्रैप 3 टैब में शुरू में मैप किए गए नक्शे के लिए काम करता है:

<script>
$(document).ready( function() {

    /* Detects when the tab is selected */
    $('a[href="#tab-id"]').on('shown.bs.tab', function() {

        /* When the tab is shown the content of the wrapper
           is regenerated and reloaded */

        $('#map-wrapper').html( $('#map-wrapper').html() ); 

    });
});
</script>

Comments

जो कोई भी Google मैप JS लोड नहीं कर रहा है, उसके लिए सबसे अच्छा समाधान, लेकिन बस src url के साथ iframe का उपयोग करhttps://www.google.com/maps/embed/v1/place?..

— gsinha

Answer 7

यह भी संभव है कि केवल मूल विंडो आकार परिवर्तन इवेंट को ट्रिगर किया जाए।

Google मानचित्र अपने आप पुनः लोड हो जाएगा:

window.dispatchEvent(new Event('resize'));

Answer 8

मेरे पास एक ही मुद्दा google.maps.event.trigger(map, 'resize')था , मेरे लिए काम नहीं कर रहा था।

मैंने जो किया वह दृश्य को डालने के बाद मानचित्र को अपडेट करने के लिए टाइमर लगाने के लिए था div...

//CODE WORKING

var refreshIntervalId;

function showMap() {
    document.getElementById('divMap').style.display = '';
    refreshIntervalId = setInterval(function () { updateMapTimer() }, 300);
}

function updateMapTimer() {
    clearInterval(refreshIntervalId);
    var map = new google.maps.Map(....
    ....
}

मुझे नहीं पता कि यह करने के लिए अधिक सुविधाजनक तरीका है लेकिन यह काम करता है!

Comments

एक बार प्रतीक्षा करने के लिए setTimeout का उपयोग करें।

— जो ऑस्टिन

Answer 9

JQuery के साथ आप ऐसा कुछ कर सकते हैं। इसने मुझे Umbraco CMS में एक टैब पर एक Google मानचित्र लोड करने में मदद की, जो अभी से दिखाई नहीं देगा।

function waitForVisibleMapElement() {
    setTimeout(function () {
        if ($('#map_canvas').is(":visible")) {
            // Initialize your Google Map here
        } else {
            waitForVisibleMapElement();
        };
    }, 100);
};

waitForVisibleMapElement();

Comments

यह एकमात्र समाधान है जिसने मेरे और मेरी समस्या के लिए काम किया है। मेरे पास Materialize.CSS टैब के अंदर एक गूगल मैप था जो मैप को नहीं दिखाता था, लेकिन बाएं कोने में केवल मार्कर और Google लोगो के साथ एक ग्रे बैकग्राउंड दिखा। मैं टैब कंटेंट डिव को मैप को इनिशियलाइज़ करने के लिए सेट करता हूँ जब यह दिखाई देता है, और यह पूरी तरह से काम करता है। उदाहरण

— Gorgon_Union

Answer 10

मेरा समाधान बहुत सरल और कुशल है:

HTML

<div class="map-wrap"> 
  <div id="map-canvas"></div>
</div>

सीएसएस

.map-wrap{
  height:0;
  width:0;
  overflow:hidden;
}

jQuery

$('.map-wrap').css({ height: 'auto', width: 'auto' }); //For showing your map
$('.map-wrap').css({ height: 0, width: 0 }); //For hiding your map

Answer 11

या यदि आप gmaps.js का उपयोग करते हैं , तो कॉल करें:

map.refresh();

जब आपका div दिखाया जाएगा।

Answer 12

मुझे लगता है कि मूल प्रश्न एक मानचित्र के साथ है जो पृष्ठ के छिपे हुए भाग में जन्मजात है। मैंने दस्तावेज़ तैयार होने पर, छिपे हुए div में मानचित्र का आकार बदलकर एक समान समस्या को हल किया है, इसके प्रदर्शन की स्थिति की परवाह किए बिना, इसे प्रारंभ किया गया है। मेरे मामले में, मेरे पास 2 नक्शे हैं, एक दिखाया गया है और एक छिपा हुआ है जब वे आरंभीकृत होते हैं और मैं हर बार दिखाए जाने वाले नक्शे को आरंभ नहीं करना चाहता। यह एक पुरानी पोस्ट है, लेकिन मुझे आशा है कि यह किसी को भी मदद करता है जो देख रहे हैं।

Answer 13

मुझे यह मेरे लिए काम करने के लिए मिला है:

छुपाना:

$('.mapWrapper')
.css({
  visibility: 'hidden',
  height: 0
});

दिखाना:

    $('.mapWrapper').css({
      visibility: 'visible',
      height: 'auto'
    });

Answer 14

यदि बूटस्ट्रैप v3 टैब के अंदर उपयोग किया जाता है, तो निम्न कार्य करना चाहिए:

$('a[href="#tab-location"]').on('shown.bs.tab', function(e){
    var center = map.getCenter();
    google.maps.event.trigger(map, 'resize');
    map.setCenter(center);
});

जहां tab-locationटैब युक्त मानचित्र की ID है।

Answer 15

जिस तरह जॉन डोपेलमैन और हॉफज़ ने संकेत दिया है, उसी तरह सभी कोड एक साथ रखें जैसे कि आपके डिव फंक्शन या ऑन्कलिक इवेंट में दिखाया गया है:

setTimeout(function(){
var center = map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(center);
});

इसने मेरे लिए पूरी तरह से काम किया

Answer 16

मेरा समाधान था:

सीएसएस:

.map {
   height: 400px;
   border: #ccc solid 1px;
}

jQuery:

$('.map').width(555); // width of map canvas

Answer 17

मुझे यह पसंद नहीं था कि नक्शा केवल छिपे हुए div के दिखाई देने के बाद लोड होगा। एक हिंडोला में, उदाहरण के लिए, यह वास्तव में काम नहीं करता है।

यह मेरा समाधान है कि इसे छिपाने के लिए छिपे हुए तत्व के साथ वर्ग जोड़ें और इसके बजाय इसे पूर्ण स्थिति के साथ छिपाएं, फिर मानचित्र प्रस्तुत करें, और मानचित्र लोड होने के बाद कक्षा को हटा दें।

बूटस्ट्रैप हिंडोला में परीक्षण किया गया।

एचटीएमएल

<div class="item loading"><div id="map-canvas"></div></div>

सीएसएस

.loading { display: block; position: absolute; }

जे एस

$(document).ready(function(){
    // render map //
    google.maps.event.addListenerOnce(map, 'idle', function(){
        $('.loading').removeClass('loading');
    });
}

Answer 18

जब आप मानचित्र दिखाना चाहते हैं तो कोड की इस पंक्ति का उपयोग करें।

               $("#map_view").show("slow"); // use id of div which you want to show.
                    var script = document.createElement("script");
                    script.type = "text/javascript";
                    script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize";
                    document.body.appendChild(script);

Answer 19

 $("#map_view").show("slow"); // use id of div which you want to show.
     var script = document.createElement("script");
     script.type = "text/javascript";
     script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize";
     document.body.appendChild(script);

Answer 20

पहिला पद। मेरा googleMap div टैब प्रदर्शित होने तक {डिस्प्ले: कोई नहीं} के साथ एक कंटेनर div के भीतर था। ओपी के रूप में एक ही समस्या थी। यह मेरे लिए काम किया:

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

इस कोड को अपने कोड के अंदर और अंत में चिपकाएँ जहाँ आपके कंटेनर div टैब पर क्लिक किया गया है और आपके छिपे हुए div को प्रकट करता है। महत्वपूर्ण बात यह है कि आपके कंटेनर डिव को शुरू होने से पहले दिखाई देना चाहिए।

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

Answer 21

Div से पहले इस कोड को जोड़ें या इसे js फ़ाइल में पास करें:

<script>
    $(document).on("pageshow","#div_name",function(){
       initialize();
    });

   function initialize() {
   // create the map

      var myOptions = {
         zoom: 14,
         center: new google.maps.LatLng(0.0, 0.0),
         mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      map = new google.maps.Map(document.getElementById("div_name"), myOptions);
   }


</script>

यह ईवेंट लोड होने के बाद चालू हो जाएगा, इसलिए यह F5 दबाए बिना मैप कंटेंट को रिफ्रेश करेगा

Answer 22

नक्शे को दिखाने के बाद मैं एक पते को जियोकोडिंग कर रहा हूं फिर नक्शे केंद्र की स्थापना कर रहा हूं। google.maps.event.trigger(map, 'resize');मेरे लिए काम नहीं किया।

मुझे एक का उपयोग करना था map.setZoom(14);

नीचे कोड:

document.getElementById('map').style.display = 'block';
var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ 'address': input.value }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker2 = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
                map.setZoom(14);
                marker2.addListener('dragend', function (event) {
                    $('#lat').val(event.latLng.lat());
                    $('#lng').val(event.latLng.lng());
                });

            }
        });

Answer 23

function init_map() {
  var myOptions = {
    zoom: 16,
    center: new google.maps.LatLng(0.0, 0.0),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
  marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(0.0, 0.0)
  });
  infowindow = new google.maps.InfoWindow({
    content: 'content'
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
  });
  infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map);

jQuery(window).resize(function() {
  init_map();
});
jQuery('.open-map').on('click', function() {
  init_map();
});

<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?v=3.exp'></script>

<button type="button" class="open-map"></button>
<div style='overflow:hidden;height:250px;width:100%;'>
  <div id='gmap_canvas' style='height:250px;width:100%;'></div>
</div>