Saya mencoba menggunakan Google MAP API v3 dengan kode berikut.

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

Ketika saya menjalankan kode ini, browser mengatakan ini.

UnEught TypeError: Tidak dapat membaca properti 'offsetWidth' dari nol

Saya tidak tahu, karena saya mengikuti arahan yang diberikan dalam tutorial ini .

Apakah Anda punya petunjuk?

Masalah ini biasanya karena div peta tidak dirender sebelum javascript berjalan yang perlu mengaksesnya.

Anda harus meletakkan kode inisialisasi Anda di dalam fungsi onload atau di bagian bawah file HTML Anda, tepat sebelum tag, sehingga DOM sepenuhnya ditampilkan sebelum dijalankan (perhatikan bahwa opsi kedua lebih sensitif terhadap HTML yang tidak valid).

Catatan, seperti yang ditunjukkan oleh matthewsheets, ini juga bisa disebabkan oleh div dengan id yang tidak ada sama sekali dalam HTML Anda (kasus patologis dari div tidak dirender)

Menambahkan contoh kode dari posting wf9a5m75 untuk meletakkan semuanya di satu tempat:

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

Untuk orang lain yang mungkin masih memiliki masalah ini , bahkan setelah mencoba rekomendasi di atas, menggunakan pemilih yang salah untuk kanvas peta Anda pada fungsi inisialisasi dapat menyebabkan masalah yang sama karena fungsi ini mencoba mengakses sesuatu yang tidak ada. Periksa ulang apakah Id peta Anda cocok dengan fungsi inisialisasi Anda dan HTML Anda atau kesalahan yang sama ini dapat terjadi.

Dengan kata lain, pastikan ID Anda cocok. ;)

Anda juga bisa mendapatkan kesalahan ini jika Anda tidak menentukan centeratau zoomdalam opsi peta Anda.

Google menggunakan id="map_canvas"dan id="map-canvas"dalam sampel, periksa ulang dan periksa ulang id: D

Tahun, jawaban geocodezip benar. Jadi ubah kode Anda seperti ini: (jika Anda masih dalam kesulitan, atau mungkin orang lain di masa depan)

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

Jadi saya menambahkan skenario gagal saya agar ini berfungsi. Saya punya <div id="map>di mana saya memuat peta dengan:

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

dan div pada awalnya disembunyikan dan tidak secara eksplisit mengatur lebar dan tinggi nilai jadi itu ukurannya width x 0. Setelah saya mengatur ukuran div ini di CSS seperti ini

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

semuanya bekerja! Semoga ini bisa membantu seseorang.

Untuk lebih banyak lagi orang lain yang mungkin masih mengalami masalah ini, saya menggunakan <div id="map1" />tag yang menutup sendiri , dan div kedua tidak muncul, dan tampaknya tidak berada di dom. segera setelah saya mengubahnya menjadi dua tag buka & tutup <div id="map1"></div>itu berfungsi. hth

Juga berhati-hatilah untuk tidak menulis

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

benar:

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

Saya punya satu kutipan di blog saya

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

dan menggantinya dengan tanda kutip ganda

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

Ini berhasil bagi saya.

Mengubah ID (di semua 3 tempat) dari "map-canvas" ke "map" memperbaikinya untuk saya, meskipun saya telah memastikan ID-nya sama, div memiliki lebar dan tinggi, dan kode tidak berjalan sampai setelah jendela memuat panggilan. Itu bukan tanda hubung; tampaknya tidak berfungsi dengan ID selain "peta".

Juga, pastikan Anda tidak menempatkan simbol hash (#) di dalam pemilih Anda di a

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

    document.getElementById('map') // good

pernyataan. Itu bukan jQuery. Hanya pengingat cepat untuk seseorang yang sedang terburu-buru.

Saya memiliki masalah yang sama tetapi masalahnya adalah bahwa zoom tidak didefinisikan dalam objek opsi yang diberikan ke Google Maps.

Jika Anda membuat beberapa peta dalam satu lingkaran, jika elemen DOM peta tunggal tidak ada, itu akan merusak semuanya. Pertama, periksa untuk memastikan elemen DOM ada sebelum membuat objek Peta baru.

[...]

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

[...]

Jika Anda menggunakan asp.net Webforms dan mendaftarkan skrip dalam kode di belakang halaman menggunakan halaman master, jangan lupa untuk menggunakan clientID elemen peta (vb.net):

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

Untuk mengatasinya Anda perlu menambahkan async defer ke skrip.

Seharusnya seperti ini:

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

Lihat di sini arti dari async defer.

Karena Anda akan memanggil fungsi dari file js utama, Anda juga ingin memastikan bahwa ini setelah fungsi tempat Anda memuat skrip utama.

Pastikan Anda menyertakan perpustakaan Places &libraries=places parameter saat pertama kali memuat API.

Sebagai contoh:

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

Saya tahu saya agak terlambat ke pesta, hanya ingin menambahkan bahwa kesalahan juga bisa terjadi ketika div tidak ada di halaman. Anda juga dapat memeriksa apakah div ada terlebih dahulu sebelum memuat panggilan fungsi google maps. Sesuatu seperti

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

• Setup ng-init = init () di HTML Anda

• Dan di controller

  gunakan $ scope.init = function () {...} alih-alih google.maps.event.addDomListener (window, "load", init) {...}

Semoga ini bisa membantu Anda.

Sebenarnya cara termudah untuk memperbaikinya adalah dengan memindahkan objek Anda sebelum kode Javascript berhasil. Saya kira objek jawaban Anda dimuat setelah kode javascript.

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

Dalam kasus saya, masalah semacam ini diselesaikan menggunakan defer https://developer.mozilla.org/en/docs/Web/HTML/Element/script

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

Anda perlu mempertimbangkan dukungan peramban akun untuk opsi ini (saya belum melihat masalah)

Pastikan Anda tidak mengesampingkan window.self

Masalah saya: Saya telah membuat komponen dan menulis self = thisalih-alih var self = this. Jika Anda tidak menggunakan kata kunci var, JS akan meletakkan variabel itu di objek jendela, jadi saya menimpa window.selfyang menyebabkan kesalahan ini.

Ini adalah pengeditan pos yang sebelumnya dihapus untuk memuat konten dari jawaban yang ditautkan, dalam jawaban itu sendiri. Tujuan untuk menerbitkan kembali jawaban ini adalah berfungsi sebagai PSA untuk pengguna 0.9+ React yang juga tersandung ke dalam masalah ini.

pos yang diedit asli

Juga mendapat kesalahan ini saat menggunakan ReactJS saat mengikuti posting blog ini . Komentar sahat di sini membantu - lihat isi komentar sahat di bawah.

❗️ Catatan untuk Bereaksi> = 0,9

Sebelum v0.9, node DOM diteruskan sebagai argumen terakhir. Jika Anda menggunakan ini, Anda masih dapat mengakses simpul DOM dengan memanggil this.getDOMNode ().

Dengan kata lain, ganti parameter rootNode dengan this.getDOMNode () di React versi terbaru.

Kegagalan saya adalah untuk digunakan

zoomLevel

sebagai opsi, bukan opsi yang benar

zoom

tambahkan penangguhan async pada awal panggilan kunci api peta.

Dalam kasus yang saya hadapi, div peta dibuat secara kondisional tergantung jika lokasi diumumkan kepada publik. Jika Anda tidak yakin apakah kanvas div peta akan ada di halaman, cukup periksa apakah Anda document.getElementByIdmengembalikan elemen dan hanya memohon peta jika ada:

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

Di sini masalahnya adalah tautan API tanpa keyparam:

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

Cara itu berfungsi dengan baik.