ब्राउजर पर गूगल मैप्स (V3) का आकार परिवर्तन (उत्तरदायी)

Question

मेरे पृष्ठ में बीच में एक मार्कर के साथ 100% पृष्ठ चौड़ाई में मेरे पास Google मानचित्र (V3) है। जब मैं अपने ब्राउज़र विंडो की चौड़ाई का आकार बदलूंगा तो मैं मानचित्र को केंद्रित (उत्तरदायी) रहना चाहूंगा। अब नक्शा केवल पृष्ठ के बाईं ओर रहता है और छोटा हो जाता है।

अद्यतन करने के लिए धन्यवाद के रूप में वर्णित के रूप में ठीक से काम करने के लिए मिल गया। यह अंतिम कोड है:

var center;
function calculateCenter() {
  center = map.getCenter();
}
google.maps.event.addDomListener(map, 'idle', function() {
  calculateCenter();
});
google.maps.event.addDomListener(window, 'resize', function() {
  map.setCenter(center);
});

Comments

बहुत बढ़िया! हाँ, आपको वैश्विक केंद्र के लिए वर्तमान केंद्र मान को लगातार आउटपुट करना होगा ताकि इसे डोम श्रोता द्वारा उठाया जा सके

— efwjames

यदि आप इस तरह से शीर्ष पर हैं, तो आपको centerवैश्विक होने की आवश्यकता नहीं है। प्रदान करना center(और calculateCenter) उसी दायरे में हैं map, तो सब कुछ काम करना चाहिए। बेशक, अगर mapवैश्विक है तो आपको इसे भी ठीक करने की आवश्यकता होगी :)

— Roamer-1888

शायद यह अधिकांश के लिए स्पष्ट है, लेकिन यह कोड मैप के लोड होने के बाद आता है, इसलिए इसे कम से कम windows.onload पर होना चाहिए

— Victoria Ruiz

धन्यवाद, यह डिफ़ॉल्ट गूगल मैप्स बीवी होना चाहिए

— युकुले

Answer 1

विंडो का आकार बदलने पर आपको इवेंट श्रोता होना आवश्यक है। इसने मेरे लिए काम किया (इसे अपने शुरुआती कार्य में लगाया):

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

Comments

यह सही काम करता है, धन्यवाद! लेकिन अगर किसी ने नक्शे को स्थानांतरित कर दिया है, तो मुझे नक्शे का नया केंद्र कैसे मिलेगा? मुझे गेटकेंटर () फ़ंक्शन मिला, लेकिन इसे सही ढंग से काम करने के लिए नहीं मिला। map.setCenter (map.getCenter ()); काम नहीं करता है।

— ग्रेगरी बोल्केनस्टीजन

आप एक और ईवेंट श्रोता चाहते हैं, मुझे लगता है कि मैप ऑब्जेक्ट पर "center_changed" के लिए, जो नए निर्देशांक के साथ एक वैश्विक चर को अपडेट करता है, जिसे आप तब अपने सेटकेंटर में उपयोग कर सकते हैं।

— डंकन

मैंने कोशिश की कि साथ ही: var center; google.maps.event.addListener(map, 'center_changed', function() { center = map.getCenter(); }); google.maps.event.addDomListener(window, 'resize', function() { map.setCenter(center); }); काम नहीं करता। किसी भी सहायता की सराहना की जाएगी।

— ग्रेगरी बोलकेनस्टिजिन

इसके बजाय "सीमा_बना हुआ" कैसे?

— दोपहर

यह सबसे आसान तरीका है: hsmoore.com/blog/…

— AO_

Answer 2

ब्राउज़र का पता लगाएँ घटना, केंद्र बिंदु के संरक्षण के दौरान Google मानचित्र का आकार बदलता है:

var map = ...; // your map initialisation code

google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center); 
});

अन्य मानचित्र के माध्यम से गूगल मैप का आकार बदलने (जैसे कि एक jQuery- यूआई 'resizable' नियंत्रण के साथ) जब आप अन्य ईवेंट हैंडलर में समान कोड का उपयोग कर सकते हैं।

स्रोत: http://hsmoore.com/blog/keep-google-map-v3-centered-when-browser-is-resized/ क्रेडिट लिंक के लिए @smftre को।

नोट: यह कोड स्वीकृत उत्तर पर @ smftre की टिप्पणी से जुड़ा था। मुझे लगता है कि यह अपने स्वयं के उत्तर के रूप में जोड़ने के लायक है क्योंकि यह स्वीकृत उत्तर से वास्तव में बेहतर है। यह केंद्र बिंदु को ट्रैक करने के लिए एक वैश्विक चर की आवश्यकता को समाप्त करता है और उस चर को अद्यतन करने के लिए एक इवेंट हैंडलर है।

Comments

@William से सहमत, इस पद्धति का परिणाम मानचित्र के आकार बदलने पर अधिक सटीक केंद्र-स्थिति में होता है।

— दसवें भाग

स्वीकृत उत्तर सही ढंग से काम नहीं कर रहा था, इसने यह चाल

— टॉम

यह सबसे अच्छा और काम करने वाला उपाय है। हर आकार की खिड़कियों पर काम करता है। अन्य समाधान ठीक से काम नहीं करते।

— zdarsky.peter

इसे वास्तव में सामुदायिक विकि के रूप में पोस्ट किया जाना चाहिए था।

— गुस्तावोहेंके २

यह काम करता है, लेकिन मैं इसे और अधिक समझना चाहूंगा। ठीक क्या करता है google.maps.event.trigger(map, "resize");?

— '26

Answer 3

W3schools.com पर कुछ अच्छे उदाहरण। मैंने निम्नलिखित का उपयोग किया और यह बहुत अच्छा काम करता है।

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

http://www.w3schools.com/googleapi/google_maps_events.asp

Answer 4

html: अपनी पसंद की आईडी के साथ एक div बनाएँ

<div id="map"></div>

js: एक नक्शा बनाएं और इसे आपके द्वारा बनाए गए div से संलग्न करें

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: new google.maps.LatLng(-33.890542, 151.274856)
});

विंडो के आकार बदलने पर केंद्र

var center = map.getCenter();

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

Answer 5

Es6 के लिए उपरोक्त समाधान का अद्यतन।

let center;
const addMapListener = google.maps.event.addDomListener;

addMapListener(map, 'idle', () => center = map.getCenter());
addMapListener(window, 'resize', () => map.setCenter(center));

Comments

आप addDomListenerदोनों के लिए उपयोग कर रहे हैं window, जो एक DOM तत्व है, और map, जो नहीं है। मैप ऑब्जेक्ट को google.maps.event.addListenerअपने स्वयं के map.addListenerईवेंट हैंडलर का उपयोग करना चाहिए ।

— डंकन