लोड होने के बाद मैं जावास्क्रिप्ट के साथ Google मानचित्र का आकार कैसे बदल सकता हूं?

Question

मेरे पास 400px x 400px में एक 'मैपवैप' div सेट है और उसके अंदर मेरे पास 100% 100% Google सेट 'मैप' है। इसलिए मानचित्र 400 x 400px पर लोड होता है, फिर जावास्क्रिप्ट के साथ मैं 100% x 100% स्क्रीन के लिए 'मैपवैप' का आकार बदलता हूं - जैसा कि मुझे उम्मीद थी कि गूगल मैप पूरी स्क्रीन का आकार बदलता है, लेकिन दाहिने हाथ के किनारे से पहले टाइल गायब होने लगती हैं। पृष्ठ।

क्या कोई साधारण फ़ंक्शन है जिसे मैं Google मानचित्र को बड़े आकार के 'मैपवैप' div में पुनः समायोजित करने का कारण कह सकता हूं?

Answer 1

यदि आप Google मैप्स v2 का उपयोग कर रहे हैं, checkResize()तो कंटेनर का आकार बदलने के बाद अपने मानचित्र पर कॉल करें । संपर्क

अपडेट करें

Google मैप्स जावास्क्रिप्ट API v2 को 2011 में हटा दिया गया था। यह अब उपलब्ध नहीं है।

Answer 2

Google मैप्स v3 के लिए, आपको अलग-अलग आकार के इवेंट को ट्रिगर करना होगा:

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

आकार बदलने की घटना के लिए प्रलेखन देखें (आपको 'आकार बदलने ’के लिए शब्द खोजना होगा): http://code.google.com/apis/maps/documentation/v3/reference.html#event

---

अपडेट करें

यह उत्तर यहां एक लंबा समय रहा है, इसलिए थोड़ा डेमो सार्थक हो सकता है और यद्यपि यह jQuery का उपयोग करता है, ऐसा करने की कोई वास्तविक आवश्यकता नहीं है।

$(function() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  var map = new google.maps.Map($("#map-canvas")[0], mapOptions);

  // listen for the window resize event & trigger Google Maps to update too
  $(window).resize(function() {
    // (the 'map' here is the result of the created 'var map = ...' above)
    google.maps.event.trigger(map, "resize");
  });
});

html,
body {
  height: 100%;
}
#map-canvas {
  min-width: 200px;
  width: 50%;
  min-height: 200px;
  height: 80%;
  border: 1px solid blue;
}

<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&dummy=.js"></script>
Google Maps resize demo
<div id="map-canvas"></div>

UPDATE 2018-05-22

मैप्स जावास्क्रिप्ट एपीआई के 3.32 संस्करण में एक नए रेंडरर रिलीज के साथ, आकार बदलने वाली घटना अब Mapकक्षा का हिस्सा नहीं है ।

दस्तावेज में कहा गया है

जब मानचित्र का आकार बदल दिया जाता है, तो मानचित्र केंद्र निश्चित हो जाता है

• पूर्ण स्क्रीन नियंत्रण अब केंद्र को संरक्षित करता है।

• मैन्युअल रूप से आकार बदलने की घटना को ट्रिगर करने की कोई आवश्यकता नहीं है।

स्रोत: https://developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize"); 3.32 संस्करण से शुरू होने वाला कोई प्रभाव नहीं है

Comments

GoMap का उपयोग करने वाले किसी भी व्यक्ति के लिए, याद रखें कि Google मानचित्र ऑब्जेक्ट $ .goMap.map पर उपलब्ध है

— एडम कैविनेस

एंड्रयू हेजेज के इस जवाब को लागू करने के तरीके के लिए देखें:

— CrazyTim

जब तक मैं इसे सेटटाइमआउट के साथ नहीं लपेटता, तब तक यह कॉल करने के बाद नक्शा आकार नहीं देगा। मुझे वह समाधान यहाँ मिला (टिप्पणी # 46 देखें)।

— टायलर कोलियर

इस उत्तर को यह देखते हुए चुना जाना चाहिए कि v2 अब पदावनत हो गया है। @ टायलर कोलियर इस इवेंट ट्रिगर को मैप को सूचित करना है कि उसे खुद को फिर से पेंट करना है। यह संभव है कि आप एक छिपे हुए कंटेनर का आकार बदल रहे हों, जिस स्थिति में, हाँ, एक ज़ूम आउट और इन टाइमआउट में काम करेगा।

— शिएन

Answer 3

लोकप्रिय जवाब google.maps.event.trigger(map, "resize");मेरे अकेले काम नहीं आया।

यहां एक तरकीब बताई गई थी जिसमें यह आश्वासन दिया गया था कि पेज लोड हो चुका है और नक्शा भी लोड हो चुका है। एक श्रोता को सेट करके और मानचित्र की निष्क्रिय स्थिति को सुनने के बाद आप आकार बदलने के लिए इवेंट ट्रिगर को कॉल कर सकते हैं।

$(document).ready(function() {
    google.maps.event.addListener(map, "idle", function(){
        google.maps.event.trigger(map, 'resize'); 
    });
}); 

यह मेरा जवाब था जिसने मेरे लिए काम किया।

Answer 4

वोल्फगैंग पिक्लर के नक्शे में एक बॉक्स प्रदान करता है

मानचित्र को ड्रैग करने योग्य और आकार देने योग्य div तत्व में लोड करें।

Comments

ऐसा लगता है कि यह v2 मानचित्रों के लिए है। मूल पोस्टर v3 नक्शे के बारे में पूछ रहा था। दो API संगत प्रतीत नहीं होते हैं।

— यहोशू

यह लिंक खतरे का पता लगाने के लिए ट्रिगर करता है।

— इंटोचो

Answer 5

यह सबसे अच्छा है यह काम किया जाएगा। यह आपके मानचित्र को फिर से आकार देगा। अपने मानचित्र को फिर से आकार देने के लिए अब तत्व का निरीक्षण करने की आवश्यकता नहीं है। यह क्या करता है यह स्वचालित रूप से पुनः आकार घटना को ट्रिगर करेगा।

    google.maps.event.addListener(map, "idle", function()
        {
            google.maps.event.trigger(map, 'resize');
        });

        map_array[Next].setZoom( map.getZoom() - 1 );
    map_array[Next].setZoom( map.getZoom() + 1 );

Answer 6

सबसे पहले, मुझे मार्गदर्शन देने और इस मुद्दे को बंद करने के लिए धन्यवाद। मुझे आपकी चर्चा से इस मुद्दे को ठीक करने का एक तरीका मिला। हाँ, चलिए मुद्दे पर आते हैं। बात यह है कि मैं CakePHP3 में GoogleMapHelper v3 हेल्पर का उपयोग कर रहा हूं। जब मैंने बूटस्ट्रैप मोडल पॉपअप को खोलने की कोशिश की, तो मैं नक्शे पर ग्रे बॉक्स मुद्दे से टकरा गया। इसे 2 दिनों के लिए बढ़ा दिया गया है। अंत में मैं इस पर एक तय मिल गया।

हमें समस्या को ठीक करने के लिए GoogleMapHelper को अपडेट करने की आवश्यकता है

नीचे दिए गए स्क्रिप्ट को setCenterMap फ़ंक्शन में जोड़ने की आवश्यकता है

google.maps.event.trigger({$id}, \"resize\");

और जावास्क्रिप्ट में नीचे दिए गए कोड को शामिल करने की आवश्यकता है

google.maps.event.addListenerOnce({$id}, 'idle', function(){
   setCenterMap(new google.maps.LatLng({$this->defaultLatitude}, 
   {$this->defaultLongitude}));
});