গুগল এমএপি এপিআই আনকচড টাইপ এরিয়ার: নালীর সম্পত্তি 'অফসেটউইথ' পড়তে পারে না

Question

আমি নিম্নলিখিত কোড সহ গুগল এমএপি এপিআই 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>

আমি এই কোডটি চালানোর সময়, ব্রাউজারটি এটি বলে।

আনকচড টাইপ এরির: নালীর সম্পত্তি 'অফসেটউইথ' পড়তে পারে না

আমি যেহেতু আমি দিক দেওয়া অনুসরণ কোন ধারণা আছে, এই টিউটোরিয়াল ।

আপনার কি কোনও ক্লু আছে?

Answer 1

এই সমস্যাটি সাধারণত জাভাস্ক্রিপ্ট চালানোর আগে মানচিত্র ডিভি রেন্ডার না হওয়ার কারণে এটি অ্যাক্সেস করার প্রয়োজন হয়।

ট্যাগের ঠিক আগে আপনার কোনও অনোলড ফাংশনের ভিতরে বা আপনার HTML ফাইলের নীচে আপনার প্রারম্ভিককরণ কোডটি রাখা উচিত, সুতরাং ডমটি কার্যকর হওয়ার আগে সম্পূর্ণরূপে রেন্ডার হয় (নোট করুন যে দ্বিতীয় বিকল্পটি অবৈধ এইচটিএমএলকে বেশি সংবেদনশীল))

দ্রষ্টব্য, যেমন ম্যাথিউইটস দ্বারা নির্দেশিত হয়েছে এটি আপনার আইটিএমএল- তে বিদ্যমান নয় এমন আইডি দিয়ে ডিভের কারণেও ঘটতে পারে (ডিভের প্যাথলজিকাল কেসটি রেন্ডার করা হয়নি)

সমস্ত কিছু এক জায়গায় রাখার জন্য 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>

Comments

আমি যখন আমার মানচিত্রের স্ক্রিপ্টকে শর্তযুক্ত করতে ভুলে যাই তখনই আমার সাথে এটি ঘটে me যোগ করা হচ্ছে: var mapExists = document.getElementById ("মানচিত্র-ক্যানভাস"); যদি (mapExists) {// স্ক্রিপ্ট it এটিকে আরও ভাল করে তোলে।

— অনুজ্ঞাসূচক

Answer 2

অন্যদের ক্ষেত্রেও সম্ভবত এই সমস্যাটি রয়েছে , উপরের সুপারিশগুলি চেষ্টা করার পরেও, ইনিশিয়াল ফাংশনে আপনার মানচিত্রের ক্যানভাসের জন্য একটি ভুল নির্বাচক ব্যবহার করা কারণ এই ক্রিয়াকলাপটি এমন কিছু অ্যাক্সেস করার চেষ্টা করছে যা অস্তিত্বহীনভাবে অ্যাক্সেস করার চেষ্টা করছে। আপনার মানচিত্রের আইডিটি আপনার প্রারম্ভিক ফাংশনে মেলে এবং আপনার এইচটিএমএল বা এই একই ত্রুটি নিক্ষেপ করতে পারে তা ডাবল-চেক করুন।

অন্য কথায়, আপনার আইডি মিলছে তা নিশ্চিত করুন। ;)

Comments

আপনি কীভাবে নিশ্চিত হয়ে উঠতে পারেন যে এটি সমস্যা নয় ... যতক্ষণ না আপনি ডাবল চেক করেন এবং বুঝতে না পারছেন যে আপনি এটি পূর্বের পরীক্ষায় পরিবর্তন করেছেন এবং এটি আবার পরিবর্তন করতে ভুলে গেছেন। :-)

— চার্লি গরিচানাজ

Answer 3

আপনি নির্দিষ্ট না করে centerবা zoomআপনার মানচিত্রের বিকল্পগুলিতে না এলে আপনি এই ত্রুটিটি পেতেও পারেন ।

Comments

একটাই ছিল! বিকল্পগুলি থেকে জুম সরানো হয়েছে যেহেতু আমি পরে স্ক্রিপ্টে এটিকে সেট করে রেখেছি এবং বুম, ম্যাপটি প্রথমবার লোড করবে তবে দ্বিতীয়বার সেই ত্রুটি ঘটবে। ধন্যবাদ!!

— আইইন গ্রান্ট

হ্যাঁ, এটা আমার ছিল! একটি জুম ছিল কিন্তু কেন্দ্র ছিল না। শুধু কেন্দ্র যুক্ত করে এটি স্থির করে।

— ওয়েলকাহোলিজম

তারা কমপক্ষে সত্যই, কোনও কনসোলে কিছু বার্তা লগইন করতে পারে। ধন্যবাদ!

— মার্টিন শিশকভ

Answer 4

গুগল ব্যবহার করে id="map_canvas"এবং id="map-canvas"নমুনাগুলিতে, আইডিটিকে ডাবল-চেক করুন এবং পুনরায় ডাবল-চেক করুন: ডি

Answer 5

বছর, জিওকোডিজিপের উত্তর সঠিক। সুতরাং আপনার কোডটি এইভাবে পরিবর্তন করুন: (আপনি যদি এখনও সমস্যায় পড়ে থাকেন বা ভবিষ্যতে অন্য কেউ হতে পারে)

<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>

Comments

ঠিক ঠিক, প্রথমে এইচটিএমএল ডিভেন্ডার রেন্ডার করুন এবং তারপরে জেএস অন্য কোনও ইভেন্ট শ্রোতার সাথে যুক্ত করুন।

— শিয়ালবাগগা

Answer 6

ঠিক তাই আমি এটি কাজ করতে আমার ব্যর্থ দৃশ্যের যোগ। আমার সাথে একটি <div id="map>ছিল যা দিয়ে আমি মানচিত্রটি লোড করছি:

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

এবং ডিভটি প্রাথমিকভাবে লুকানো ছিল এবং এর স্পষ্টভাবে প্রস্থ এবং উচ্চতার মানগুলি সেট করা হয়নি সুতরাং এটির আকারটি ছিল width x 0। একবার আমি সিএসএসে এই ডিভের আকার নির্ধারণ করেছি

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

সব কাজ! আশা করি এটি কাউকে সাহায্য করবে।

Comments

এটি আমার জন্য কাজ করে না ঠিক কারণ। আপনার সিএসএস আপনার মানচিত্রের আইডির সাথে মেলে এবং আপনার কোনও প্রারম্ভিক প্রস্থ / উচ্চতা কম্বো আছে তা নিশ্চিত করা দরকার অন্যথায় কিছুই রেন্ডার করা হয়নি। পুনরুদ্ধার করার জন্য: 1. আপনার জাভাস্ক্রিপ্টে getElementById কল করার সময় আপনার এইচটিএমএল ডিভিডি আইডি আইডি নির্বাচকটির সাথে মিলছে কিনা তা নিশ্চিত করুন ২. আপনার নির্দিষ্ট মানচিত্রের স্টাইল করার জন্য সিএসএসের কোড রয়েছে কিনা তা নিশ্চিত করুন # মানচিত্র 1 {প্রস্থ: 200px; উচ্চতা: 200px; } বা অনুরূপ তাই এটি রেন্ডার করে।

— তাহির খালিদ

Answer 7

আরও এখনও অন্যদের জন্য যে এখনও এই সমস্যাটি নিয়ে থাকতে পারে, আমি একটি স্ব-সমাপনী <div id="map1" />ট্যাগ ব্যবহার করছিলাম , এবং দ্বিতীয় ভাগটি প্রদর্শিত হচ্ছে না, এবং মনে হয় না এটি ডোমটিতে রয়েছে। যত তাড়াতাড়ি আমি এটিকে দু'টি ওপেন এবং ক্লোজ ট্যাগগুলিতে পরিবর্তন করেছি <div id="map1"></div>। HTH

Answer 8

এছাড়াও লিখবেন না যত্ন নিন

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

সঠিক:

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

Comments

প্রকৃতপক্ষে. আমার ক্ষেত্রেও এটি সমস্যা ছিল। দ্বিতীয়টি কেবল ইভেন্ট শ্রোতার কাছে পরামিতি হিসাবে init ফাংশনটি পাস করার পরে প্রথমটি সরাসরি তত্ক্ষণাত্ সঞ্চালিত হয় যা ঘটনাটি ঘটে যখন আরআর ফাংশনটি চালায়। stackoverflow.com/questions/13286233/...

— kivikall

Answer 9

আমার একক উদ্ধৃতি ছিল

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

এবং তাদের ডাবল উদ্ধৃতি দিয়ে প্রতিস্থাপন

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

এটি আমার জন্য কৌশলটি করেছে।

Answer 10

"মানচিত্র-ক্যানভাস" থেকে "মানচিত্র" এ আইডিটি (সমস্ত 3 টি স্থানে) পরিবর্তন করা এটি আমার জন্য ঠিক করেছে, যদিও আমি নিশ্চিত করেছি যে আইডিগুলি একই ছিল, ডিভের প্রস্থ এবং উচ্চতা ছিল, এবং কোডটি ছিল না উইন্ডো লোড কল পরে চলমান। এটা ড্যাশ নয়; এটি "মানচিত্র" ব্যতীত অন্য কোনও আইডি নিয়ে কাজ করছে বলে মনে হচ্ছে না।

Answer 11

এছাড়াও, নিশ্চিত হয়ে নিন যে আপনি একটিতে আপনার নির্বাচকের ভিতরে হ্যাশ প্রতীক (#) রাখছেন না

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

    document.getElementById('map') // good

বিবৃতি। এটি jQuery নয়। তাড়াহুড়োয় কারও জন্য কেবল দ্রুত অনুস্মারক।

Answer 12

আমার একই সমস্যা ছিল তবে সমস্যাটি হ'ল গুগল মানচিত্রে প্রদত্ত বিকল্পগুলির মধ্যে জুমটি সংজ্ঞায়িত হয়নি।

Answer 13

যদি আপনি কোনও লুপে একাধিক মানচিত্র তৈরি করে থাকেন, যদি কোনও একক মানচিত্রের ডিওএম উপাদান উপস্থিত না থাকে তবে এটি সমস্তগুলি ভেঙে দেয়। প্রথমে একটি নতুন মানচিত্র অবজেক্ট তৈরি করার আগে 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);
}

[...]

Comments

তবে যা ঘটে তা হ'ল মানচিত্রটি তৈরি হওয়া বন্ধ করা, আসলে জগাখিচুড়ি ঠিক করা এবং মানচিত্র তৈরি করা নয়।

— রায়ান দ্য লিচ

Answer 14

আপনি যদি এসপি নেটওয়ার্ড ওয়েবফর্ম ব্যবহার করছেন এবং কোনও মাস্টার পৃষ্ঠা ব্যবহার করে কোনও পৃষ্ঠার পিছনে কোডে স্ক্রিপ্টটি নিবন্ধভুক্ত করছেন, মানচিত্রের উপাদানটির ক্লায়েন্টআইডি (vb.net) ব্যবহার করতে ভুলবেন না:

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

Answer 15

এটি সমাধান করার জন্য আপনাকে async deferস্ক্রিপ্টে যুক্ত করতে হবে।

এটি এর মতো হওয়া উচিত:

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

এখানে async স্থগিতের অর্থ দেখুন ।

যেহেতু আপনি মূল জেএস ফাইল থেকে কোনও ফাংশন কল করবেন, আপনি এটিও নিশ্চিত করতে চান যে আপনি যেখানে মূল স্ক্রিপ্টটি লোড করেছেন তার পরে এটি।

Answer 16

&libraries=placesআপনি প্রথম এপিআই লোড করার সময় স্থানগুলি লাইব্রেরি প্যারামিটারটি অন্তর্ভুক্ত করেছেন তা নিশ্চিত করুন ।

উদাহরণ স্বরূপ:

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

Answer 17

আমি জানি আমি পার্টিতে কিছুটা দেরি করেছি, কেবল যুক্ত করতে চেয়েছিলাম যে পৃষ্ঠায় ডিভের অস্তিত্ব না থাকলে ত্রুটিও ঘটতে পারে। গুগল ম্যাপ ফাংশন কল লোড করার আগে ডিভের উপস্থিতি আছে কিনা তাও আপনি দেখতে পারেন। কিছুটা এইরকম

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
     }
}

Answer 18

• আপনার এইচটিএমএলে ng-init = init () সেটআপ করুন

• এবং নিয়ামক মধ্যে

  google.maps.event.addDomListener (উইন্ডো, "লোড", init) এর পরিবর্তে $ স্কোপ.ইনটি = ফাংশন () {... use ব্যবহার করুন {...}

আশা করি এটা তোমাকে সাহায্য করবে।

Answer 19

এটি ঠিক করার সহজতম উপায় হ'ল জাভাস্ক্রিপ্ট কোডটি আমার সাথে কাজ করার আগে আপনার অবজেক্টটি সরিয়ে নেওয়া। আমি আপনার উত্তর বস্তু জাভাস্ক্রিপ্ট কোড পরে লোড করা হয়।

<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>

Answer 20

আমার ক্ষেত্রে এই ধরণের সমস্যাগুলি https://developer.mozilla.org/en/docs/Web/HTML/Element/script ব্যবহার করে সমাধান করা হয়েছিলdefer

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

আপনাকে এই বিকল্পটির অ্যাকাউন্ট অ্যাকাউন্ট ব্রাউজারগুলির সহায়তা গ্রহণ করা দরকার যদিও (আমি সমস্যা দেখিনি)

Answer 21

আপনি ওভাররাইড করছেন না তা পরীক্ষা করুন window.self

আমার ইস্যু: আমি একটি উপাদান তৈরি করেছি এবং ভের self = thisপরিবর্তে লিখেছি self = this। আপনি যদি কীওয়ার্ডটি ব্যবহার না করেন var, জেএস উইন্ডো অবজেক্টে সেই ভেরিয়েবলটি রাখবে, তাই আমি ওভাররোট করলাম window.selfযা এই ত্রুটিটির কারণ হয়েছে।

Answer 22

উত্তরের লিঙ্কযুক্ত উত্তরের সামগ্রীটি ধারণ করার জন্য এটি পূর্বে মুছে ফেলা একটি সম্পাদনা। এই উত্তরটি পুনঃপ্রকাশের উদ্দেশ্য হ'ল প্রতিক্রিয়া 0.9+ ব্যবহারকারীদের জন্য পিএসএ হিসাবে কাজ করা যারা এই সমস্যাটিতেও পড়েছেন।

মূল সম্পাদিত পোস্ট

---

নিম্নলিখিত যখন ReactJS ব্যবহার করার সময় এছাড়াও এই ত্রুটিটি পেয়েছিলেন এই ব্লগ পোস্টে । সাহাতের মন্তব্য এখানে সহায়তা করেছে - নীচে সাহাতের মন্তব্যের সামগ্রীটি দেখুন।

Re প্রতিক্রিয়া> = 0.9 এর জন্য নোট

V0.9 এর আগে, DOM নোডটি শেষ যুক্তি হিসাবে পাস করা হয়েছিল। আপনি যদি এটি ব্যবহার করে থাকেন তবে আপনি এখনও এই ডট নোডটি অ্যাক্সেস করতে পারেন get

অন্য কথায়, রিট্যাক্টের সর্বশেষ সংস্করণে this.getDOMNode () দিয়ে রুটনোড প্যারামিটারটি প্রতিস্থাপন করুন।

Answer 23

আমার ব্যর্থতা ব্যবহার ছিল

zoomLevel

সঠিক বিকল্পের চেয়ে বিকল্প হিসাবে

zoom

Answer 24

মানচিত্র এপিআই কী কলটির সূচনাতে অ্যাসিঙ্ক মুলতুবি যুক্ত করুন।

Answer 25

আমি যে ক্ষেত্রে মোকদ্দমা দিচ্ছিলাম সে ক্ষেত্রে মানচিত্র ডিভিটি শর্তাধীনভাবে স্থানটি যদি জনসাধারণের কাছে প্রকাশ করা হচ্ছে তা নির্ভর করে রেন্ডার করা হয়েছিল। মানচিত্রের ক্যানভাস ডিভটি পৃষ্ঠায় থাকবে কিনা তা আপনি যদি নিশ্চিত না হয়ে থাকেন তবে খালি পরীক্ষা করুন যে আপনার document.getElementByIdকোনও উপাদান ফিরে আসছে এবং কেবল যদি মানচিত্রটি উপস্থিত থাকে তবেই অনুরোধ করুন:

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

Answer 26

এখানে সমস্যাটি ছিল keyপ্যারাম ছাড়াই এপিআই লিঙ্ক :

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

এই ভাবে ভাল কাজ করে।