Google MAP API v3'ü aşağıdaki kodla kullanmaya çalışıyorum.

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

Bu kodu çalıştırdığımda tarayıcı bunu söylüyor.

Yakalanmayan TypeError: null 'offsetWidth' özelliği okunamıyor

Hiçbir fikrim yok, çünkü bu eğitimde verilen talimatları takip ediyorum .

Herhangi bir ipucun var mı?

Bu sorunun nedeni genellikle, harita bölümünün erişmesi gereken javascript çalıştırılmadan önce oluşturulmamasıdır.

Başlatma kodunuzu bir yükleme işlevinin içine veya HTML dosyanızın altına, etiketin hemen önüne koymalısınız, böylece DOM yürütülmeden önce tamamen işlenir (ikinci seçeneğin geçersiz HTML'ye daha duyarlı olduğunu unutmayın).

Not, matthewsheets tarafından işaret edildiği gibi , bunun nedeni HTML'nizde bu kimliğe sahip olmayan div (div'in patolojik durumu oluşturulmuyor) olabilir.

Her şeyi tek bir yere koymak için wf9a5m75'in gönderisinden kod örneği ekleme :

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

Yukarıdaki sorunu denedikten sonra bile, bu sorunu yaşamayan diğerleri için, başlatma işlevinde harita tuvaliniz için yanlış bir seçici kullanmak, işlev varolmayan bir şeye erişmeye çalışırken aynı soruna neden olabilir. Harita Kimliğinizin başlatma işlevinizle eşleşip eşleşmediğini bir kez daha kontrol edin ve HTML'niz ya da aynı hatanın atılabileceğini kontrol edin.

Başka bir deyişle, kimliklerinizin eşleştiğinden emin olun. ;)

Bu hatayı ayrıca belirtmezseniz centerveya zoomharita seçeneklerinizde de alabilirsiniz.

google kullanır id="map_canvas"ve id="map-canvas"örneklerde kimliği tekrar kontrol edin ve tekrar kontrol edin: D

Yıl, geocodezip'in cevabı doğrudur. Kodunuzu şu şekilde değiştirin: (hala sorun yaşıyorsanız veya gelecekte başka biri varsa)

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

Sadece başarısız senaryomu işe almak için eklemek. Ben <div id="map>ile harita yüklerken bir vardı :

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

div başlangıçta gizlendi ve genişlik ve yükseklik değerleri ayarlanmadı, bu yüzden boyut olarak ayarlandı width x 0. CSS'de bu div'in boyutunu böyle ayarladıktan sonra

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

her şey çalıştı! Umarım bu birine yardımcı olur.

Hala bu sorunu yaşıyor olabilir daha diğerleri için, ben kendi kendine kapanan bir <div id="map1" />etiket kullanıyordum ve ikinci div göstermiyordu ve dom görünmüyordu. En kısa sürede iki açık ve kapalı etiketi <div id="map1"></div>olarak değiştirdi çalıştı. hth

Yazmamaya da dikkat et

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

doğru:

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

Tek tırnaklarım vardı

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

ve bunları çift tırnak işareti ile değiştirdiler

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

Bu benim için hile yaptı.

Kimliklerin aynı olduğundan emin olmama rağmen kimliğin (her 3 yerde) "map-canvas" dan "map" e değiştirilmesi benim için düzeltildi, div bir genişlik ve yüksekliğe sahipti ve kod değildi pencere yükleme çağrısından sonraya kadar çalışıyor. Bu çizgi değil; "harita" dışında başka bir kimlikle çalışmıyor gibi görünüyor.

Ayrıca, seçicinizin içine kare simgesi (#) yerleştirmediğinizden emin olun.

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

    document.getElementById('map') // good

Beyan. Bu bir jQuery değil. Acelesi olan biri için hızlı bir hatırlatma.

Aynı sorunu yaşadım ancak sorun, Google Haritalar'a verilen seçenekler nesnesinde zumun tanımlanmamasıydı.

Bir döngüde birden çok harita oluşturuyorsanız, tek bir harita DOM öğesi yoksa, bunların tümünü keser. İlk olarak, yeni bir Harita nesnesi oluşturmadan önce DOM öğesinin bulunduğundan emin olun.

[...]

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 Webforms kullanıyorsanız ve komut dosyasını bir ana sayfa kullanarak sayfanın arkasındaki kodda kaydediyorsanız, map öğesinin (vb.net) clientID'sini kullanmayı unutmayın:

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

Çözmek async deferiçin betiğe eklemeniz gerekir .

Bu şekilde olmalı:

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

Buraya bakın asenkron ertelemenin anlamına .

Ana js dosyasından bir işlev çağıracağınızdan, bunun ana komut dosyasını yüklediğiniz işlevden sonra olduğundan emin olmak istersiniz.

Rehber kitaplığını eklediğinizden emin olun &libraries=placesAPI'yı ilk yüklediğinizde parametresini eklediğinizden .

Örneğin:

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

Partiye biraz geç kaldığımı biliyorum, sadece div sayfada bulunmadığında hatanın da olabileceğini eklemek istedim. Ayrıca, google maps işlev çağrısını yüklemeden önce div öğesinin var olup olmadığını da kontrol edebilirsiniz. Gibi bir şey

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

• HTML'nizde ng-init = init () kurulumu

• Ve denetleyicide

  google.maps.event.addDomListener (pencere, "yükle", init) yerine $ scope.init = function () {...} kullanın {...}

Umarım bu size yardımcı olacaktır.

Aslında bunu düzeltmenin en kolay yolu, nesnenizi bana çalıştığı Javascript kodundan önce taşımaktır. Cevap nesnenizde javascript kodundan sonra yüklenir.

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

Benim durumumda bu tür sorunlar https://developer.mozilla.org/en/docs/Web/HTML/Element/script kullanılarak çözüldüdefer

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

Yine de tarayıcıların bu seçeneği desteklemesini dikkate almanız gerekir (sorun görmedim)

Geçersiz kılmadığınızı kontrol edin window.self

Benim sorunum: Bir bileşen oluşturmuş ve self = thisvar yerine yazmıştım self = this. Anahtar kelimeyi kullanmazsanız var, JS bu değişkeni pencere nesnesine koyacaktır, bu yüzden window.selfbu hataya neden olan üzerine yazdım .

Bu, daha önce silinen bir gönderinin, cevabın kendisinde bağlı cevabın içeriğini içerecek şekilde düzenlenmesidir. Bu yanıtı yeniden yayınlamanın amacı, bu soruna rastlayan React 0.9+ kullanıcıları için PSA işlevi görmektir.

orijinal düzenlenmiş gönderi

Ayrıca bu blog gönderisini izlerken ReactJS kullanırken bu hatayı aldı . sahat'ın yorumu burada yardımcı oldu - sahat'ın yorumunun içeriğine bakın.

❗️ Reaksiyon Notu = = 0.9

V0.9'dan önce, DOM düğümü son argüman olarak aktarıldı. Bunu kullanıyorsanız, this.getDOMNode () öğesini çağırarak DOM düğümüne erişmeye devam edebilirsiniz.

Başka bir deyişle, rootNode parametresini React'in en son sürümünde this.getDOMNode () ile değiştirin.

Benim hatam kullanmaktı

zoomLevel

doğru seçenek yerine bir seçenek olarak

zoom

harita api anahtar çağrısının başında asenkron erteleme ekleyin.

Üzerinde çalıştığım bir durumda, konumun herkese açık hale getirilip getirilmemesine bağlı olarak harita div şartlı oluşturuldu. Harita tuvali div'in sayfada olup olmayacağından emin değilseniz document.getElementById, öğenizin bir öğe döndürüp döndürmediğini kontrol edin ve haritayı yalnızca varsa çağırın:

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

Burada sorun, keyparametresiz API bağlantısıydı :

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

Bu şekilde iyi çalışır.