Карта Google не отображается на веб-сайте. Элементы управления показывают, но сама карта не отображается

Question

Карта Google на моем сайте больше не отображается. Я могу видеть слайдер увеличения/вывода, кнопки карты/спутника и т. Д., Но сама карта больше не появляется. Я где-то читал, что карта должна быть в теге div с меткой «карта» с высотой и шириной, указанными в CSS. Карта всегда имела свойства CSS ширины и ширины, но идентификатор был помечен по-разному. Я изменил идентификатор на карту и соответствующий CSS, но карта по-прежнему не будет отображаться. Я читал в другом месте, что плагин Google Analytics от Yoast также вызывает подобные ошибки. Я отключил все плагины, а затем один за раз, когда я активировал их, чтобы узнать, может ли быть проблема с другим плагином. Однако, похоже, что ни один из запущенных плагинов не влияет на отображение карты.

Я - веб-дизайнер с некоторыми знаниями HTML/CSS. Я разработал этот сайт и нанял парня, чтобы закодировать его в специальную тему Wordpress для меня. Как я уже сказал, карта показывала только хорошо, но больше не делает, и я понятия не имею, почему. Я мог бы использовать некоторую помощь, чтобы понять это. Я пытаюсь узнать больше о кодировании, поэтому в будущем я могу отлаживать и исправлять такие вещи самостоятельно. Немного помощи было бы очень полезно!

Вот ссылка на страницу с картой: http://seegerlaw.com/contact-us/

Пожалуйста, дайте мне знать, если вам нужна любая другая информация от меня.

Answer 1

Вы используете недокументированные поля:

function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    codeAddr(function(lat, lng) { 
     myLatlng = new google.maps.LatLng(lat,lng); 
     var mapOptions = { 
      zoom: 15, 
      center: myLatlng, 
      disableDefaultUI: false, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
     var marker = new google.maps.Marker({ 
      position: myLatlng, 
      map: map 
     }); 
    }); 
} 

function codeAddr(callback) { 
    if (geocoder) { 
     geocoder.geocode({ 'address': address }, function (results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      console.log(results[0].geometry); 
      maps_lat = results[0].geometry.location["kb"]; 
      maps_lng = results[0].geometry.location["lb"]; 
      callback(maps_lat, maps_lng); 
     } 
     else { 
      console.log("Geocoding failed: " + status); 
     } 
     }); 
    } 
} 

Используйте lat() и lng() свойства LatLng получить их значения.

Даже лучше, просто пройти в LatLng непосредственно от геокодировщиком к объекту MapOptions:

codeAddr(function(latLng) { 
    var mapOptions = { 
     center: latLng, 
     ... 
    }; 
    ... 
}); 

callback(results[0].geometry.location); 

Еще лучше - кажется, что вы всегда геокодировать тот же адрес - просто жёстко в LatLng в свой код.