ฉันพยายามใช้ 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>

เมื่อฉันเรียกใช้รหัสนี้เบราว์เซอร์จะบอกสิ่งนี้

Uncaught TypeError: ไม่สามารถอ่านคุณสมบัติ 'offsetWidth' ของ null ได้

ฉันไม่มีความคิดเนื่องจากฉันทำตามคำแนะนำในบทช่วยสอนนี้

คุณมีเงื่อนงำอะไรบ้าง

ปัญหานี้มักจะเกิดจาก div แผนที่ไม่ได้ถูกเรนเดอร์ก่อนที่จะรันจาวาสคริปต์ที่จำเป็นต้องเข้าถึง

คุณควรใส่รหัสเริ่มต้นของคุณไว้ในฟังก์ชั่น onload หรือที่ด้านล่างของไฟล์ HTML หน้าแท็กดังนั้น DOM จะแสดงผลอย่างสมบูรณ์ก่อนที่จะดำเนินการ (โปรดทราบว่าตัวเลือกที่สองมีความไวต่อ HTML ที่ไม่ถูกต้อง)

หมายเหตุตามที่ระบุไว้โดยmatthewsheetsสิ่งนี้อาจเกิดจาก div ที่มี id นั้นไม่มีอยู่ใน 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>

สำหรับคนอื่น ๆ ที่อาจยังมีปัญหานี้แม้หลังจากลองทำตามคำแนะนำข้างต้นแล้วการใช้ตัวเลือกที่ไม่ถูกต้องสำหรับผืนผ้าใบแผนที่ของคุณในฟังก์ชั่นเริ่มต้นอาจทำให้เกิดปัญหานี้เช่นเดียวกันขณะที่ฟังก์ชันพยายามเข้าถึงบางอย่างที่ไม่มีอยู่ ตรวจสอบอีกครั้งว่ารหัสแผนที่ของคุณตรงกันในฟังก์ชั่นเริ่มต้นและ HTML หรือข้อผิดพลาดเดียวกันนี้อาจถูกโยน

ตรวจสอบให้แน่ใจว่า ID ของคุณตรงกัน ;)

คุณสามารถได้รับข้อผิดพลาดนี้หากคุณไม่ได้ระบุcenterหรือzoomในตัวเลือกแผนที่ของคุณ

google ใช้id="map_canvas"และid="map-canvas"ในตัวอย่างให้ตรวจสอบอีกครั้งและตรวจสอบอีกครั้ง id: D

ปีคำตอบของ geocodezip นั้นถูกต้อง ดังนั้นเปลี่ยนรหัสของคุณดังนี้: (หากคุณยังมีปัญหาหรืออาจจะเป็นคนอื่นในอนาคต)

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

เพียงแค่ฉันเพิ่มสถานการณ์ที่ล้มเหลวในการทำให้สิ่งนี้ทำงาน ฉันมี<div id="map>ที่ฉันกำลังโหลดแผนที่ด้วย:

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

และ div ที่แรกคือที่ซ่อนอยู่width x 0และมันไม่ได้มีความกว้างและความชัดเจนค่าความสูงตั้งค่าเพื่อให้ขนาดของมันก็คือ เมื่อฉันได้กำหนดขนาดของ div นี้ใน CSS แบบนี้

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

ทุกอย่างทำงานได้! หวังว่านี่จะช่วยใครซักคน

สำหรับคนอื่น ๆ ที่อาจยังมีปัญหานี้อยู่ฉันกำลังใช้<div id="map1" />แท็กปิดตัวเองและ div ที่สองไม่แสดงและดูเหมือนจะไม่อยู่ในโดม ทันทีที่ฉันเปลี่ยนไปสองแท็กเปิดและใกล้<div id="map1"></div>มันทำงาน HTH

นอกจากนี้ระวังอย่าเขียน

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

แก้ไข:

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

ฉันมีคำพูดเดียวใน

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

และแทนที่ด้วยเครื่องหมายคำพูดคู่

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

นี้ได้เคล็ดลับสำหรับฉัน.

การเปลี่ยน ID (ในสถานที่ทั้ง 3 แห่ง) จาก "map-canvas" เป็น "map" แก้ไขให้ฉันแม้ว่าฉันจะทำให้แน่ใจว่า ID นั้นเหมือนกัน div ก็มีความกว้างและความสูงและรหัสไม่ได้ ทำงานจนกระทั่งหลังจากโหลดหน้าต่างโทร มันไม่ใช่เส้นประ; ดูเหมือนว่ามันจะไม่ทำงานกับ ID อื่นใดนอกจาก "map"

ตรวจสอบให้แน่ใจว่าคุณไม่ได้วางสัญลักษณ์แฮช (#) ไว้ในตัวเลือกของคุณใน

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

    document.getElementById('map') // good

คำให้การ. มันไม่ใช่ jQuery เพียงเตือนความทรงจำอย่างรวดเร็วสำหรับใครบางคนรีบ

ฉันมีปัญหาเดียวกัน แต่ปัญหาคือการซูมไม่ได้กำหนดไว้ในตัวเลือกวัตถุที่กำหนดให้กับ Google Maps

หากคุณกำลังสร้างหลายแผนที่ในวงถ้าองค์ประกอบ 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);
}

[...]

หากคุณกำลังใช้เว็บฟอร์ม asp.net และกำลังลงทะเบียนสคริปต์ในโค้ดด้านหลังของหน้าโดยใช้เพจต้นแบบอย่าลืมใช้ clientID ขององค์ประกอบแผนที่ (vb.net):

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

ในการแก้ปัญหาคุณต้องเพิ่มasync deferสคริปต์

มันควรจะเป็นแบบนี้:

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

ดูความหมายของ async ที่นี่ได้ที่นี่

เนื่องจากคุณจะเรียกใช้ฟังก์ชันจากไฟล์ js หลักคุณจึงต้องตรวจสอบให้แน่ใจว่าสิ่งนี้อยู่หลังไฟล์ที่คุณโหลดสคริปต์หลัก

ตรวจสอบให้แน่ใจว่าคุณรวม&libraries=placesพารามิเตอร์ไลบรารีของ Places เมื่อคุณโหลด API ครั้งแรก

ตัวอย่างเช่น:

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

ฉันรู้ว่าฉันมาช้าไปงานปาร์ตี้แค่ต้องการเพิ่มว่าข้อผิดพลาดอาจเกิดขึ้นเมื่อ div ไม่อยู่ในหน้า นอกจากนี้คุณยังสามารถตรวจสอบว่า div อยู่ก่อนหรือไม่ก่อนที่จะโหลดการเรียกใช้ฟังก์ชัน Google แผนที่ สิ่งที่ต้องการ

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

• ตั้งค่า ng-init = init () ใน HTML ของคุณ

• และในส่วนควบคุม

  ใช้ $ scope.init = function () {... } แทน google.maps.event.addDomListener (หน้าต่าง "load", init) {... }

หวังว่านี่จะช่วยคุณได้

จริง ๆ แล้ววิธีที่ง่ายที่สุดในการแก้ไขปัญหานี้เป็นเพียงการย้ายวัตถุของคุณก่อนที่โค้ดจาวาสคริปต์จะทำงานให้ฉัน ฉันเดาว่าวัตถุคำตอบของคุณโหลดหลังจากจาวาสคริปต์แล้ว

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

ในกรณีของฉันปัญหาเหล่านี้ได้รับการแก้ไขโดยใช้defer https://developer.mozilla.org/en/docs/Web/HTML/Element/script

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

คุณต้องคำนึงถึงการสนับสนุนตัวเลือกนี้ของเบราว์เซอร์ด้วย (ฉันไม่ได้เห็นปัญหา)

ตรวจสอบว่าคุณไม่ได้กำลังเอาชนะ window.self

ปัญหาของฉัน: ฉันได้สร้างองค์ประกอบและเขียนself = thisแทน self = thisvar หากคุณไม่ได้ใช้คำหลักvarJS จะวางตัวแปรนั้นไว้ในวัตถุหน้าต่างดังนั้นฉันเขียนทับwindow.selfซึ่งทำให้เกิดข้อผิดพลาดนี้

นี่คือการแก้ไขโพสต์ที่ถูกลบไปก่อนหน้านี้เพื่อให้มีเนื้อหาของคำตอบที่เชื่อมโยงในคำตอบนั้น จุดประสงค์ในการเผยแพร่คำตอบนี้ใหม่คือการทำหน้าที่เป็น PSA สำหรับผู้ใช้ React 0.9+ ที่ยังพบปัญหานี้อยู่

โพสต์เดิมแก้ไข

ได้รับข้อผิดพลาดนี้ในขณะที่ใช้ ReactJS ในขณะที่ติดตามโพสต์บล็อกนี้ ความคิดเห็นของ sahat ช่วยได้ที่นี่ - ดูเนื้อหาความคิดเห็นของ sahat ด้านล่าง

❗️หมายเหตุสำหรับการตอบโต้> = 0.9

ก่อนหน้า v0.9 โหนด DOM ถูกส่งผ่านเป็นอาร์กิวเมนต์สุดท้าย หากคุณใช้สิ่งนี้คุณยังคงสามารถเข้าถึงโหนด DOM ได้โดยเรียก this.getDOMNode ()

กล่าวอีกนัยหนึ่งให้แทนที่พารามิเตอร์ rootNode ด้วย this.getDOMNode () ใน React เวอร์ชันล่าสุด

ความล้มเหลวของฉันคือการใช้

zoomLevel

เป็นตัวเลือกแทนที่จะเป็นตัวเลือกที่ถูกต้อง

zoom

เพิ่ม async เลื่อนไปที่จุดเริ่มต้นของการเรียกใช้แผนที่ API

ในกรณีที่ฉันจัดการกับแผนที่ div มีการแสดงผลแบบมีเงื่อนไขขึ้นอยู่กับว่ามีการเปิดเผยตำแหน่ง หากคุณไม่แน่ใจว่า div แผนที่บนแผนที่นั้นอยู่บนหน้าเว็บหรือไม่เพียงตรวจสอบว่าคุณdocument.getElementByIdส่งคืนองค์ประกอบและเรียกใช้แผนที่เฉพาะในกรณีที่มีอยู่หรือไม่:

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

นี่คือปัญหาคือลิงก์ API ที่ไม่มีkeyพารามิเตอร์:

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

วิธีนี้ใช้ได้ดี