Google Maps API V3 Marker Not Loading

Question

Я пытаюсь получить маркер для отображения на карте Google для веб-сайта, который я делаю. Без кода маркера карта загружается штрафом и показывает правильное местоположение (без маркера), когда я добавляю код маркера, карта больше не загружается. Ясно, что я пропустил что-то простое, но я не очень хорошо знаком с JQuery.

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0; padding: 0 } 
    #map-canvas { height: 100% } 
</style> 
<script type="text/javascript" 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBWJYTBt3bKUIsQKKsQPSnR1IHNdkAmBQs&sensor=false"> 
</script> 
<script type="text/javascript"> 
    function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(53.154662, -1.208357), 
     zoom: 15, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map-canvas"), 
     mapOptions); 
    } 
var marker = new google.maps.Marker({ 
    position:(53.154662, -1.208357), 
    map: map-canvas, 
    title:"Hello World!" 
}); 
    google.maps.event.addDomListener(window, 'load', initialize); 

</script> 

Благодарим за любую помощь.

Answer 1

map -property, как ожидается, будет google.maps.Map -instance и позиционно-свойство быть google.maps.LatLng:

Кроме того, вы должны создать маркер, когда карта уже была создана и в рамках которой map-instance доступен, например в конце initialize().

function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(53.154662, -1.208357), 
     zoom: 15, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map-canvas"), 
     mapOptions); 

    var marker = new google.maps.Marker({ 
     position:new google.maps.LatLng(53.154662, -1.208357), 
     map: map, 
     title:"Hello World!" 
    }); 
    }