Google Maps не отображается на веб-странице, но отображается на localhost

Question

Итак, я пытаюсь внедрить карты Google на веб-сайте, а на моем локальном хосте он отлично работает, и я прекрасно его понимаю. Однако, когда я загружаю это в свою хостинговую компанию, карта вообще не отображается. Когда я проверяю элемент и проверяю консоль, я не вижу никаких ошибок. код ниже:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY"></script> 
<script> 
    function initialize() { 
    var mapCanvas = document.getElementById('map-canvas'); 
    var myLatlng = new google.maps.LatLng(53.092975, -7.895479); 

    var mapOptions = { 
     center: myLatlng, 
     zoom:16, 
     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, 
     title: 'LCCEurotex' 
    }); 

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

Я понятия не имею, что может быть причиной как мой код выглядит так же, как один из документации Google. Любые идеи о том, что может быть причиной этого, были бы замечательными. Спасибо за любую помощь!

Answer 1

переместить эту часть кода страницы колонтитула, вероятно, вы имеет привязку к карте, а контейнер-контейнер не загружен, кроме того, лоток добавляет к id map_canvas значение по умолчанию в вашем css.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDo7nFkoUthlGms4De0miS4EPfupB5x0cY"></script> 

    <script> 
     function initialize() { 
     var mapCanvas = document.getElementById('map-canvas'); 
     var myLatlng = new google.maps.LatLng(53.092975, -7.895479); 

     var mapOptions = { 
      center: myLatlng, 
      zoom:16, 
      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, 
      title: 'LCCEurotex' 
     }); 


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

В вашем CSS

div#map-canvas { 
    height: 500px !important; 
} 

Answer 2

только добавить HTTP: // в URL из Google Maps API, изменить эту строку:

<script type="text/javascript" src="maps.google.com/maps/api/js?sensor=false"></script> 

К этому:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>