204

मैं निम्नलिखित कोड के साथ Google MAP API v3 का उपयोग करने का प्रयास कर रहा हूं।

<h2>Topology</h2>

<script src="https://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="{% url css_media 'tooltip.topology.css' %}" />
<link rel="stylesheet" type="text/css" href="{% url css_media 'tooltip.css' %}" />

<style type="text/css" >
      #map_canvas {
              width:300px;
            height:300px;
     }
</style>

<script type="text/javascript">

var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);

</script>

<div id="map_canvas"> </div>

जब मैं इस कोड को चलाता हूं, तो ब्राउज़र यह कहता है।

बिना पढ़ा हुआ टाइपर्रर: शून्य की संपत्ति 'ऑफसेटवेट' को नहीं पढ़ सकता है

मुझे कोई पता नहीं है, क्योंकि मैं इस ट्यूटोरियल में दी गई दिशा का पालन करता हूं ।

क्या आपके पास कोई सुराग है?

javascript google-maps-api-3

— jaeyong
स्रोत

317

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

आपको टैग के ठीक पहले, एक ओनलोड फ़ंक्शन के अंदर या अपनी HTML फ़ाइल के नीचे अपना इनिशियलाइज़ेशन कोड डालना चाहिए, इसलिए इसे निष्पादित करने से पहले DOM पूरी तरह से प्रस्तुत किया जाता है (ध्यान दें कि दूसरा विकल्प अमान्य HTML के प्रति अधिक संवेदनशील है)।

ध्यान दें, जैसा कि मैथ्यूशेट्स द्वारा बताया गया है यह उस आईडी के कारण div के कारण हो सकता है जो आपके HTML में बिल्कुल भी मौजूद नहीं है (div के रोग संबंधी मामले का प्रतिपादन नहीं किया जा रहा है)

सब कुछ एक ही स्थान पर रखने के लिए wf9a5m75 की पोस्ट से कोड नमूना जोड़ना :

<script type="text/javascript">

function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
}
google.maps.event.addDomListener(window, "load", initialize);

</script>

— geocodezip
स्रोत

7

यह मेरे लिए हर समय होता है जब मैं अपनी मानचित्र स्क्रिप्ट को सशर्त बनाना भूल जाता हूं। जोड़ना: var mapExists = document.getElementById ("मैप-कैनवास"); if (mapExists) {// script} यह सब बेहतर बनाता है।

— इंपीरियल

109

अन्य लोगों के लिए जो अभी भी यह समस्या हो रही है , उपरोक्त अनुशंसाओं की कोशिश करने के बाद भी, इनिशियलाइज़ फंक्शन में आपके मैप कैनवस के लिए गलत चयनकर्ता का उपयोग करने से यह समस्या पैदा हो सकती है क्योंकि फ़ंक्शन किसी ऐसी चीज़ को एक्सेस करने की कोशिश कर रहा है जो मौजूद नहीं है। डबल-चेक करें कि आपका मैप आईडी आपके इनिशियलाइज़ फंक्शन में मेल खाता है और आपका HTML या इसी त्रुटि को फेंका जा सकता है।

दूसरे शब्दों में, सुनिश्चित करें कि आपकी आईडी मेल खाती है। ;)

— matthewsheets
स्रोत

3

कमाल है कि आप यह कैसे सुनिश्चित कर सकते हैं कि यह समस्या नहीं है ... जब तक आप दोहरी जांच करते हैं और महसूस करते हैं कि आपने इसे पहले परीक्षण में बदल दिया है और इसे वापस बदलना भूल गए हैं। :-)

— चार्ली गोरीचनज

28

यदि आप निर्दिष्ट नहीं करते हैं centerया zoomअपने मानचित्र विकल्पों में आप यह त्रुटि प्राप्त कर सकते हैं।

— JamesFrost
स्रोत

2

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

— इयान ग्रांट

हाँ, यह मेरा था! ज़ूम किया था, लेकिन कोई केंद्र नहीं था। बस केंद्र को जोड़कर इसे ठीक किया।

— विल्काहोलिज़्म

1

वे कम से कम, वास्तव में कंसोल में कुछ संदेश लॉग कर सकते हैं। धन्यवाद!

— मार्टिन शिशकोव

26

Google उपयोग करता है id="map_canvas"और id="map-canvas"नमूनों में, डबल-चेक और आईडी को दोबारा जांचता है: D

— dpineda
स्रोत

23

वर्ष, जियोकोडिज़िप का उत्तर सही है। इसलिए अपना कोड इस तरह बदलें: (यदि आप अभी भी परेशानी में हैं, या भविष्य में शायद कोई और)

<script type="text/javascript">

function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
}
google.maps.event.addDomListener(window, "load", initialize);

</script>

— wf9a5m75
स्रोत

वास्तव में, पहले html div रेंडर करें और फिर JS एक इवेंट श्रोता जोड़ें।

— foxybagga

11

बस इसलिए मैं इसे काम करने के लिए अपना असफल परिदृश्य जोड़ता हूं। मेरे पास एक <div id="map>नक्शा था जिसमें मैं नक्शा लोड कर रहा था:

var map = new google.maps.Map(document.getElementById("map"), myOptions);

और div शुरू में छिपा हुआ था और इसमें स्पष्ट रूप से चौड़ाई और ऊंचाई के मान नहीं थे इसलिए इसका आकार था width x 0। एक बार मैंने सीएसएस में इस div का आकार इस तरह सेट किया है

#map {
    width: 500px;
    height: 300px;
}

सब कुछ काम कर गया! आशा है कि यह किसी की मदद करता है।

— निकोला
स्रोत

यह वास्तव में यही कारण था कि यह मेरे लिए काम नहीं करता था। आपको यह सुनिश्चित करने की आवश्यकता है कि सीएसएस आपके मानचित्र आईडी से मेल खाता है और आपके पास किसी प्रकार की प्रारंभिक चौड़ाई / ऊंचाई कॉम्बो है अन्यथा कुछ भी प्रदान नहीं किया गया है। इसलिए पुनरावृत्ति करने के लिए: 1. सुनिश्चित करें कि जब आप अपने जावास्क्रिप्ट में getElementById कॉल करते हैं, तो आपका html div आईडी आईडी चयनकर्ता से मेल खाता है। सुनिश्चित करें कि सीएसएस में आपके विशेष नक्शे को स्टाइल करने के लिए कोड है जैसे # map1 {चौड़ाई: 200px; ऊंचाई: 200 पीएक्स; } या इससे मिलता-जुलता है।

— ताहिर खालिद

7

और भी अन्य लोगों के लिए जो अभी भी इस मुद्दे पर आ रहे हैं, मैं एक स्व-समापन <div id="map1" />टैग का उपयोग कर रहा था , और दूसरा div नहीं दिखा रहा था, और डोम में नहीं लग रहा था। जैसे ही मैंने इसे दो खुले और नज़दीकी टैग में बदल दिया, <div id="map1"></div>यह काम किया। hth

— changokun
स्रोत

6

यह भी ध्यान रखें कि न लिखें

google.maps.event.addDomListener(window, "load", init())

सही बात:

google.maps.event.addDomListener(window, "load", init)

— माइक
स्रोत

वास्तव में। मेरे मामले में भी यह समस्या थी। पहला एक init फ़ंक्शन को सीधे चलाता है जब दूसरा एक init फ़ंक्शन को इवेंट श्रोता के पैरामीटर के रूप में पास करता है जो उस इवेंट के होने पर init फ़ंक्शन चलाएगा। stackoverflow.com/questions/13286233/…

— कीविकॉल

6

मेरे पास सिंगल कोट्स थे

var map = new google.maps.Map( document.getElementById('map_canvas') );

और उन्हें दोहरे उद्धरण चिह्नों से बदल दिया

var map = new google.maps.Map( document.getElementById("map_canvas") );

इसने मेरे लिए चाल चली।

— VB.Net प्रोग्रामर
स्रोत

5

आईडी (सभी 3 स्थानों में) को "मैप-कैनवस" से "मैप" में बदलना मेरे लिए इसे तय कर दिया, भले ही मैंने यह सुनिश्चित कर लिया था कि आईडी एक ही थे, div की चौड़ाई और ऊंचाई थी, और कोड नहीं था खिड़की लोड कॉल के बाद तक चल रहा है। यह पानी का छींटा नहीं है; यह "मानचित्र" के अलावा किसी अन्य आईडी के साथ काम नहीं करता है।

— Johnny5k
स्रोत

4

इसके अलावा, सुनिश्चित करें कि आप अपने चयनकर्ता के अंदर हैश प्रतीक (#) नहीं रख रहे हैं

    document.getElementById('#map') // bad

    document.getElementById('map') // good

बयान। यह एक jQuery नहीं है। बस जल्दी में किसी के लिए एक त्वरित अनुस्मारक।

— Keeprock
स्रोत

3

मेरे पास एक ही मुद्दा था लेकिन समस्या यह थी कि ज़ूम को Google मैप्स को दिए गए विकल्प ऑब्जेक्ट के भीतर परिभाषित नहीं किया गया था।

— torresomar
स्रोत

2

यदि आप एक लूप में कई मानचित्र बना रहे हैं, यदि एक भी मानचित्र DOM तत्व मौजूद नहीं है, तो यह उन सभी को तोड़ देता है। सबसे पहले, यह सुनिश्चित करने के लिए जांचें कि एक नया मैप ऑब्जेक्ट बनाने से पहले DOM तत्व मौजूद है।

[...]

for( var i = 0; i <= self.multiple_maps; i++ ) {

  var map_element = document.getElementById( 'map' + '-' + i.toString() );

  // Element doesn't exist, don't create map!
  if( null === map_element ) {
    continue;
  }

  var map = new google.maps.Map( map_element, myOptions);
}

[...]

— ज़ैक काट्ज़
स्रोत

1

लेकिन जो सब करता है वह बनाए जा रहे नक्शे को रोकता है, न कि वास्तव में गड़बड़ को ठीक करने और नक्शे को बनाने के लिए।

— रयान द लीच

1

यदि आप asp.net Webforms का उपयोग कर रहे हैं और किसी मास्टर पृष्ठ का उपयोग करते हुए पृष्ठ के पीछे कोड में स्क्रिप्ट को पंजीकृत कर रहे हैं, तो मानचित्र तत्व (vb.net) के clientID का उपयोग करना न भूलें:

ClientScript.RegisterStartupScript(Me.[GetType](), "Google Maps Initialization", String.Format("init_map(""" & map_canvas.ClientID() & """...

— विंक्स
स्रोत

1

इसे हल करने के लिए आपको async deferस्क्रिप्ट में जोड़ने की आवश्यकता है ।

यह इस तरह होना चाहिए:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>

यहाँ देखें async defer का अर्थ

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

— एवी लेविन
स्रोत

1

सुनिश्चित करें कि आप स्थान पुस्तकालय शामिल हैं &libraries=places जब आप पहली बार API लोड करते हैं तो आप पैरामीटर शामिल करते हैं।

उदाहरण के लिए:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

— स्टीव
स्रोत

1

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

function initMap() {
    if($("#venuemap").length != 0) {
        var city= {lat: -26.2041, lng: 28.0473};
        var map = new google.maps.Map(document.getElementById('venuemap'), {
       etc etc
     }
}

— mr_j
स्रोत

1

अपने HTML में एनजी-इनिट = इनिट () सेटअप करें
और कंट्रोलर में

google.maps.event.addDomListener (विंडो, "लोड", init) {...} के बजाय $ गुंजाइश.init = function () {...} का उपयोग करें

आशा है कि यह आपकी मदद करेगा।

— आकाश सक्सेना
स्रोत

0

वास्तव में इसे ठीक करने का सबसे आसान तरीका यह है कि जावास्क्रिप्ट ऑब्जेक्ट को मेरे पास काम करने से पहले बस अपनी वस्तु को स्थानांतरित करें। मुझे लगता है कि आपके उत्तर ऑब्जेक्ट को जावास्क्रिप्ट कोड के बाद लोड किया गया है।

<style type="text/css" >
      #map_canvas {
              width:300px;
            height:300px;
     }

 <div id="map_canvas"> </div> // Here 

<script type="text/javascript">

var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);

</script>

<div id="map_canvas"> </div>

— Laltzi
स्रोत

0

मेरे मामले में इन मुद्दों को https://developer.mozilla.org/en/docs/Web/HTML/Element-script का उपयोग करके हल किया गया थाdefer

<script src="<your file>.js" defer></script>

आपको इस विकल्प के ब्राउज़र के समर्थन को ध्यान में रखना होगा (हालांकि मैंने समस्याएं नहीं देखी हैं)

— Yercalamarino
स्रोत

0

जांचें कि आप ओवरराइड नहीं कर रहे हैं window.self

मेरा मुद्दा: मैंने एक घटक बनाया था और self = thisvar के बजाय लिखा था self = this। यदि आप कीवर्ड का उपयोग नहीं करते हैं var, तो जेएस उस चर को विंडो ऑब्जेक्ट पर डाल देगा, इसलिए मैंने ओवरवोट किया window.selfजो इस त्रुटि का कारण बना।

— माइक आर ईमो
स्रोत

0

यह पहले से हटाए गए पोस्ट का एक एडिट है जो लिंक किए गए उत्तर की सामग्री को उत्तर में ही समाहित करता है। इस उत्तर को पुन: प्रकाशित करने का उद्देश्य रिएक्ट 0.9+ उपयोगकर्ताओं के लिए एक पीएसए के रूप में कार्य करना है जिन्होंने इस मुद्दे पर ठोकर खाई है।

मूल संपादित पोस्ट

इस ब्लॉग पोस्ट का अनुसरण करते हुए ReactJS का उपयोग करते समय भी यह त्रुटि हुई । यहाँ sahat की टिप्पणी से मदद मिली - नीचे sahat की टिप्पणी की सामग्री देखें।

For नोट रिएक्ट के लिए> = 0.9

V0.9 से पहले, DOM नोड को अंतिम तर्क के रूप में पारित किया गया था। यदि आप इसका उपयोग कर रहे थे, तब भी आप DOM.getDOMNode () को कॉल करके DOM नोड का उपयोग कर सकते हैं।

दूसरे शब्दों में, React के नवीनतम संस्करण में इस .getDOMNode () के साथ रूटनोड पैरामीटर बदलें।

— मेरेडिथ
स्रोत

0

मेरी असफलता का उपयोग करना था

zoomLevel

एक विकल्प के रूप में, सही विकल्प के बजाय

zoom

— strattonn
स्रोत

0

मैप एपी कुंजी कॉल की शुरुआत पर async defer जोड़ें।

— ग़दीर फ़रज़ानेह
स्रोत

0

जिस स्थिति में मैं काम कर रहा था, उस स्थान को सार्वजनिक किए जाने के आधार पर, नक्शा div को सशर्त रूप से प्रदान किया गया था। यदि आप यह सुनिश्चित नहीं कर सकते हैं कि पेज पर कैनवास कैनवास का नक्शा होगा या नहीं, तो केवल यह देख लें कि आपका document.getElementByIdतत्व वापस आ रहा है और केवल मानचित्र प्रस्तुत करें यदि मौजूद है:

var mapEle = document.getElementById("map_canvas");
if (mapEle) {
    map = new google.maps.Map(mapEle, myOptions);
}

— Rillus
स्रोत

-2

यहाँ समस्या थी keyपरम के बिना एपीआई लिंक :

<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places&key=YOURKEY"></script>

वह तरीका ठीक काम करता है।

— vaati
स्रोत

Google एमएपी एपीआई अनकैप टाइप टाइप: शून्य की संपत्ति 'ऑफसेटवेट' को नहीं पढ़ सकता है

मूल संपादित पोस्ट