Google карта: карта не загружается должным образом

Question

Даже логотип Google, «срок использования» текст, кнопки масштабирования, маркер также показывает, но карта не загружается

мой код

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script> 
<script> 
var geocoder; 
var map; 
var infowindow; 
var marker; 
function initialize() { 
var myCoordsLenght = 6; 
var defaultLat = document.getElementById('latitude').value; 
var defaultLng = document.getElementById('longitude').value; 
if(defaultLat =="") 
    defaultLat =24; 
if(defaultLng =="") 
    defaultLng =78; 
var latlng1; 
geocoder = new google.maps.Geocoder(); 
var ltlg = new google.maps.LatLng(defaultLat, defaultLng); 
var mapOptions = { 
    center: ltlg, 
    zoom: 4 
}; 
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

var input = /** @type {HTMLInputElement} */(document.getElementById('pac-input')); 

//var types = document.getElementById('type-selector'); 
//map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 
//map.controls[google.maps.ControlPosition.TOP_LEFT].push(types); 

var autocomplete = new google.maps.places.Autocomplete(input); 
autocomplete.bindTo('bounds', map); 

infowindow = new google.maps.InfoWindow(); 
if(defaultLat == 24 && defaultLng ==78) 
    infowindow.setContent('Click on the Your Location (or)<br> Drag Marker to the Your Location'); 
else 
{ 
    geocoder.geocode({'latLng': ltlg}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      if (results[1]) { 
       infowindow.setContent('<div>'+results[1].formatted_address+'</div>'); 
       infowindow.open(map, marker); 
      } 
     } else 
      alert("Geocoder failed due to: " + status); 
    }); 
} 
marker = new google.maps.Marker({ 
    position: ltlg, 
    map: map, 
    draggable: true, 
    title: 'Click on Map/Click & Drag', 
    anchorPoint: new google.maps.Point(0, -29) 
}); 

google.maps.event.addListener(map, 'click', function(evt) { 
    marker.setPosition(evt.latLng); 
    geocoder.geocode({'latLng': evt.latLng}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      if (results[0]) 
       infowindow.setContent('<div>'+results[0].formatted_address+'</div>'); 
      else 
       infowindow.setContent('No results found'); 
     } 
     else 
      infowindow.setContent('Geocoder failed due to: ' + status); 
    }); 
    document.getElementById('latitude').value = evt.latLng.lat(); 
    document.getElementById('longitude').value = evt.latLng.lng(); 
}); 
google.maps.event.addListener(marker, 'dragend', function(evt){ 
    geocoder.geocode({'latLng': evt.latLng}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      if (results[0]) 
       infowindow.setContent('<div>'+results[0].formatted_address+'</div>'); 
      else 
       infowindow.setContent('No results found'); 
     } 
     else 
      infowindow.setContent('Geocoder failed due to: ' + status); 
    }); 
    document.getElementById('latitude').value = evt.latLng.lat(); 
    document.getElementById('longitude').value = evt.latLng.lng(); 
}); 
google.maps.event.addListener(marker, 'click', function() { 
    infowindow.open(map, marker); 
}); 
google.maps.event.addListener(autocomplete, 'place_changed', function() { 
    infowindow.close(); 
    marker.setVisible(false); 
    var place = autocomplete.getPlace(); 
    if (!place.geometry) 
     return; 

    // If the place has a geometry, then present it on a map. 
    if (place.geometry.viewport) 
     map.fitBounds(place.geometry.viewport); 
    else { 
     map.setCenter(place.geometry.location); 
     map.setZoom(17); // Why 17? Because it looks good. 
    } 
    marker.setPosition(place.geometry.location); //place.geometry.location.lat(); 
    marker.setVisible(true); 
    document.getElementById('latitude').value = place.geometry.location.lat(); 
    document.getElementById('longitude').value = place.geometry.location.lng(); 

    var address = ''; 
    if (place.address_components) { 
     address = [ 
      (place.address_components[0] && place.address_components[0].short_name || ''), 
      (place.address_components[1] && place.address_components[1].short_name || ''), 
      (place.address_components[2] && place.address_components[2].short_name || '') 
     ].join(' '); 
    } 
    infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address); 
    infowindow.open(map, marker); 
}); 

    // Sets a listener on a radio button to change the filter type on Places 
    // Autocomplete. 
function setupClickListener(id, types) { 
    var radioButton = document.getElementById(id); 
    google.maps.event.addDomListener(radioButton, 'click', function() { 
     autocomplete.setTypes(types); 
    }); 
} 
setupClickListener('changetype-all', []); 
setupClickListener('changetype-establishment', ['establishment']); 
setupClickListener('changetype-geocode', ['geocode']); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

HTML

<div class="controls" id="map-canvas" style="width: 650px;height:400px;"></div> 

Он показывает ошибку в консоли как

Firefox =>TypeError: а это п Улла в main.js
хром =>Uncaught TypeError: Не удается прочитать свойство «addEventListener» в нуль в main.js

Answer 1

От HTML скрипку и инфо об ошибке вы дал, мое предположение было бы Карты загружены правильно, но эти линии вызывают ошибку

function setupClickListener(id, types) { 
     var radioButton = document.getElementById(id); 
     if(radioButton){ 
      google.maps.event.addDomListener(radioButton, 'click', function() { 
      autocomplete.setTypes(types); 
     }); 
     } 
    } 

Иды, которые вы проходите, отсутствуют в вашем html!

setupClickListener('changetype-all', []); 
setupClickListener('changetype-establishment', ['establishment']); 
setupClickListener('changetype-geocode', ['geocode']); 

Объект radioButton имеет значение null и, следовательно, ваша ошибка. Простой if решит проблему